DEV Community: Rafael Cachoeira

React Refactoring - Composition: When don't use it!

Rafael Cachoeira — Tue, 29 Nov 2022 01:22:53 +0000

Intro

I refact a dropdown composition component. Changing it to object.

We had a dropdown in the following structure:

<Dropdown>
   <Dropdown.Toggle color='primary' />
   <Dropdown.Menu>            
      <Dropdown.Item onClick={() => {}}>
         MyLabel
      </Dropdown.Item>
      <Dropdown.Item onClick={() => {}}>
         AnotherLabel
      </Dropdown.Item>
   </Dropdown.Menu>
</Dropdown>

Problem

When we need to hide some elements, we need to apply conditional rendering and with that, we have a mixture of javascript with jsx syntax that makes the code difficult to read and difficult to maintain. For example:

<Page>
   <Subheader helpText="Choose a Publication action">
      <Dropdown>
         <Dropdown.Toggle color='primary' />
         <Dropdown.Menu>
            {allowEdit ? 
               (                  
                  <Dropdown.Item onClick={handleTransfer}>
                     Transfer
                  </Dropdown.Item>
                  <Dropdown.Item onClick={handleAbandon}>
                     Abandon
                  </Dropdown.Item>
               ) : (                        
                     {hasPermission('Pages.Publications.Publish') ? (                     
                        <Dropdown.Item onClick={handlePublish}>
                           Publish
                        </Dropdown.Item> 
                     ) : (
                        <Dropdown.Item onClick={handleTransfer}>
                           Transfer
                        </Dropdown.Item>
                     )}
                  )
               )}
         </Dropdown.Menu>
      </Dropdown>            
   </Subheader>
   <Content>
   ...
   </Content>
<Page>

Realize that there is a ternary inside the other, and also, there is a code duplication for the 'Transfer' item. This is terrible to read.

If allowEdit is TRUE, it should render the 'Transfer' and 'Abandon' items:

If allowEdit is FALSE and user has permission to Publish, it should render only 'Publish' item.
Or 'Transfer' for fallback.

Proposal

Create a new component (DropdownButton) to support options that receive list items instead of children. Like this:

<DropdownButton color='primary' options={[
   { label: '', onClick: () => {}, visible: true }
   { label: '', onClick: () => {}, visible: true }
  ]}
/>

The visible property should control when showing the dropdown item.

Benefits

The code is easier to read
Less code repetition
We can import the object from elsewhere

And applying our conditional rendering...

<Page>
   <Subheader helpText="Choose a Publication action">   
   <DropdownButton
      color='primary'
      options={[
         {
            label: 'Transfer',
            onClick: handleTransfer,
            visible: allowEdit || !hasPermission('Pages.Publications.Publish')
         },
         {
            label: 'Abandon',
            onClick: handleAbandon,
            visible: allowEdit
         },
         {
            label: 'Publish',
            onClick: handlePublish,
            visible: !allowEdit && hasPermission('Pages.Publications.Publish')
         },
      ]}
   />
   </Subheader>
   <Content>
   ...
   </Content>
<Page>

Conclusion

We are used to writing more declarative code, always thinking about generic code, but sometimes it makes our code difficult to read and maintain.
Props as object items are widely used and we can use them when we want to better control our components. In this refactoring, we've assigned responsibility for the conditional rendering requirements to the visible prop.

Jquery Lazy Load Tabs from just DataAttributes

Rafael Cachoeira — Fri, 05 Nov 2021 01:54:11 +0000

Scenario

The content of my tab comes from another url address and I need to process a lazy bootstrap tab! Once the tab content has been visited, the url should no longer be loaded.

Proposal

I created some data attributes to handle getting another page on demand. After that, I set the tab as loaded, passing the tab to the static tab!

The three attributes

 /*
  Attributes: 
        data-lazy-url: string (required) to get
        data-lazy-loaded: boolean (optional) default false, once true, the tab never load anymore
        data-lazy-target: string (required) selector to element 
*/

The Html

<a class="nav-link"
     data-lazy-url="https://dev.to/raafacachoeira" 
     data-lazy-target="#MyTab" 
     data-toggle="tab" 
     href="#MyTab" 
     role="tab" 
     aria-controls="MyTab" 
     aria-selected="false">
      My blog posts
    </a>

And for the Tab Content

<div class="tab-pane" id="MyTab" role="tabpanel">
</div>

Code: https://codepen.io/raafacachoeira/pen/mdMXwWW

jquery-text-wildcard-area: A jQuery plugin to add and remove wildcards

Rafael Cachoeira — Mon, 27 Sep 2021 23:13:18 +0000

A jQuery plugin for textarea to add and remove wildcards from text

Basic Usage

Declare a textarea and declare a list of tags to use with UL LI

 <textarea id="MyTextWildCardArea"></textarea>
 <nav>
    <ul data-toggle="tag" data-target="#MyTextWildCardArea">
        <li class="nav-item"><a class="tag tag--available" data-tag="[ExampleTag]" role="button">[ExampleTag]</a></li>
        <li class="nav-item"><a class="tag tag--available" data-tag="[Email]" role="button">[Email]</a></li>
    </ul>
</nav>

$('#MyTextWildCardArea').textWildCardArea();

It is also possible to instantiate with many text areas.

 <textarea id="TextAreaExample" class="my-textarea"></textarea>
 <nav>
    <ul data-toggle="tag" data-target="#MyTextWildCardArea">
        <li class="nav-item"><a class="tag tag--available" data-tag="[ExampleTag]" role="button">[ExampleTag]</a></li>
        <li class="nav-item"><a class="tag tag--available" data-tag="[Email]" role="button">[Email]</a></li>
    </ul>
</nav>


<textarea id="AnotherTextArea" class="my-textarea"></textarea>
 <nav>
    <ul data-toggle="tag" data-target="#MyTextWildCardArea">
        <li class="nav-item"><a class="tag tag--available" data-tag="[ExampleTag]" role="button">[ExampleTag]</a></li>
        <li class="nav-item"><a class="tag tag--available" data-tag="[Email]" role="button">[Email]</a></li>
    </ul>
</nav>

$('.my-textarea').textWildCardArea();

data attributes

data-toggle="tag": Required: define the type tag for a element
data-target="#elementId": Required: define the target textarea to observer

classes

tag tag-available: the plugin uses this class to control a toggle state.
tag tag-unavailable: the plugin uses this class to control a toggle state. At least one class is required

The plugin doesn't have css styles, but this css can be useful for a basic style

     .tag.tag--available {
        cursor: pointer;
        font-weight: 700;
    }

    .tag.tag--unavailable {
        cursor: pointer;
        font-weight: normal;
        font-style: italic;
        text-decoration: line-through;
    }

Usability

Click once for add wildcard to the textarea
Click once for remove all wildcards from the textarea
If a textarea already has data coming from the server, the plugin must observe and apply the toggle state on the tags

Code: https://github.com/raafacachoeira/jquery-text-wildcard-area

jquery-file-viewer: An extensive jQuery Plugin for rendering files

Rafael Cachoeira — Mon, 27 Sep 2021 23:07:29 +0000

An extensive jQuery Plugin for rendering files

Basic Usage

Declare a div target

<div id="foo" data-file-name="myFile.jpg" data-file-path="content\myfile.jpg" data-file-contenttype="image/jpg"></div>

$('#foo').fileViewer();

It is also possible to instantiate with many divs.

<div class="bar" data-file-name="myFile.jpg" data-file-path="content\myfile.jpg" data-file-contenttype="image/jpg"></div>
<div class="bar" data-file-name="anotherFile.mp3" data-file-path="content\anotherFile.mp3" data-file-contenttype="audio/mpeg"></div>
...
...

$('.bar').fileViewer();

Advanced Options

All options can be informed by html attributes or parameters options method or defaults ($.fn.fileViewer.defaults).

$('.bar').fileViewer(
    filePath: 'content\myfile.jpg',
    fileName: 'myFile.jpg', 
    fileExtension: '.jpg', //optional
    contentType: 'image/jpg', //optional: If a contentType a not filled, it will be discovered by fileExtension
    generateId: true //Sets the id to element render, e.g: id="pdf-viewer"
);

Changing defaults

It is possible changes all parameters on fileViewer plugin, even viewers properties or viewers templates

Adding new viewer support

First, we make the viewer object

$.fn.fileViewer.defaults.viewers.cad = {
    id: 'cad-viewer',
    class: 'cad-viewer',
    render: function (file) {
        return ''; /*Add here a Cad template render*/
    }
}

After, we making the map for extension file to match the new viewer

$.extend($.fn.fileViewer.defaults.map.extension, { '.dwg': 'cad'})

(Optional) Also, it is possible makes the map with contentType

$.extend($.fn.fileViewer.defaults.map.contentType, { 'application/acad': 'cad'})

Browser Support

This library passed on tests in the IE11 Browser.

License

Code: https://github.com/raafacachoeira/jquery-file-viewer

Simple heart beating icon effect

Rafael Cachoeira — Mon, 27 Sep 2021 20:56:22 +0000

Code: https://codepen.io/raafacachoeira/pen/rNwoeGm

Invoke React components from data-attributes

Rafael Cachoeira — Fri, 24 Sep 2021 19:59:15 +0000

Motivation

I have an ASPNET CORE MVC + jQuery application and I need to gradually migrate some components to React!

Since we already have the data from the ViewModel, I would like to pass it to the React component.

Proposal

Why not use data attributes?
I created a data attribute structure that can be read in React and invoke my components (Lazy) with their properties.
That way, I don't need to write javascript code every time to bind 'react' to html.

Requisites

Webpack
Webpack chunk
React

My structure of data-attributes

  <div data-js-component="FavoriteButton"
       data-js-props='{
          "favorite": @Model.Document.Favorite.ToString().ToLower()
      }'>
  </div>

data-js-component: string (name of component to scan and invoke)
data-js-props: json (all properties of initial state)

My React Component

import React from 'react';

export default function FavoriteButton({ favorite }) {
  ...
  ...
}

My InvokeComponents:

How to Works

First, register your components with their respective path to lazy import on 'components' object.
It will be searched for [data-js-component] in the html. When the element is found, it will be read from the 'components' object.
The [data-js-props] will be cast to json and pass to React Component found.


import { lazy, Suspense } from 'react';
import ReactDOM from 'react-dom';

const InvokeComponents = (function() {

    //register here your components
    const components = {
        DocumentFavoriteButton: lazy(() => import('./Documents/DocumentFavoriteButton')),
        FavoriteButton: lazy(() => import('./FavoriteButton'))
    }

    const elements = document.querySelectorAll('[data-js-component]');

    for (const element of elements) {
        const { jsComponent, jsProps } = element.dataset;

        const ComponentFound = components[jsComponent];
        let props = JSON.parse(jsProps);

        ReactDOM.render(
            <Suspense fallback={<p>...</p>}>
                <ComponentFound {...props} />
            </Suspense>,
            element
        );

    }
})();

export default InvokeComponents;

Now, register your InvokeComponent on _layout cshtml page:

<script src="/dist/Components/InvokeComponents.js" asp-append-version="true"></script>

And finishing, modify your webpack.config like this to support chunk used on lazy.

  output: {
        path: path.resolve(__dirname, 'wwwroot'),
        publicPath: '/',
        chunkFilename: '[hash].[name].js',
        filename: '[name]'
    },