Development Refactor

[soujvnunes]

Refactor is a part of flow Git feature for development maintaining and should not been a prefix, that is, it's remain a feature.

According of Ecmascript 6, React base documentation, console/debug support, airbnb code style and dependencies review, do perform:

1st phase: development debug to maintaining better browser integration performance

• removing eslint error suppresses: to show important and significant dev errors;
• removing unused components;
• removing unused and commented imports;
• removing unused and commented code blocks;
• removing unnecessary usages: imports, props, states, methods and its parameters that is not been used;
• removing unnecessary state usages: ...this.state is unnecessary;
• fixing console browser warnings:
• fix or remove comparison between variables problems;
• fix attibute elements warnings;
• fix unresolved variables warnings;
• set object without id: add id property on every array or array of object if it is not existent. Do not use index on callback;
• fix anchors behaving like buttons: <a href onClick /> to <button className="link" onClick />;
• fix ternary or binary expressions on JSX scope: prefer using control structures for any conditional render;
• fix prop types and its default values;

2nd phase: development review to maintain better principles usages

• fixing console node warnings:
• fix prettier style code problems;
• fix eslint style code problems, as import and methods order on document;
• fix async/await on loop problems;
• removing useless constructor: only [GameObject] and [GameWallObject] are been extended of all app components;
• fixing object identity: do not use template string with index concatenation, uniqueId from lodash i.e. and others build-in or packages resources to generate object ids;
• fixing states been not initilized: initialize states, used in the scope of a component, as the primitive and common types below and never as undefined (this is defined by the language itself), [] or {} (those last two, even apparently been "empties", means true):
• "" for string, because it means false,
• 0 for number, because it means false,
• null for object, because it means false;
• false for boolean;
• fixing unnecessary comparison usages:
• thing === 0 equals to !thing;
• thing === true equals to thing;
• thing === false equals to !thing;
• thing === null equals to !thing;
• isEmpty(thing) equals to !thing, if it's a string type;
• isNull(thing) equals to !thing, if it's an object type;
  Note {} and [] even been truthy empty objects, they should be destructured to access the null values. So, compare the destructured props and not the object itself.
• renaming variables with fixed values designated by camelCase names: i.e. from betWidth = 52 to BET_WIDTH = 52 or from BET_WIDTH: 52 to betWidth: 52;
• adding break at each end of the case statement line on switch/case: add for lines with no return;
• removing async designation for non-promise functions;
• removing useless ternary:
• from [expected] ? [expected] : [fallback] to [[expecteds...] || [fallbacks...]...];
• from [expected] ? [expected] : null to [[expecteds...] || null;
• from condition ? [expected] : null to condition && [expected];
  Note After-change errors should be handled by the message itself. I.e.: style={null|undefined} trigger type error, because [style] should receive object of strings as style={{ prop: "value" }} (OO paradigm).
• fixing unnecessary variables usages: replace them to let or const if its value will be reassigned or fixed, respect.;
• fixing states been designated by props: component states should never receive defaultProps object;
• setting of its prop validation and default values;
• adding alt prop to <img> elements;
• adding aria-label prop to input elements;
• adding key listener on non-button clicker blocks;
• preffering use calls instead of expressions: avoid use ternary or any conditional type inside function scope;
• preffering use build-in SVGs component for render icons;
• preffering use classnames dependencie resources: to handle more than one string css classes on className props;
• destructuring of objects as its props and states;
• fixing all plain strings: removing it and using the translation app redux resource;
• fixing naming imports from components: import all file components as {} from /component

3rd phase: development cleanup to maintain better code rendering performance

• preffering using build-in JS resources: reviewing lodash, i.e., and another dependencies package resources helpers usages. There are many unnecessary functions been used on the app as multiply() (x * y), pow() (x ** y) and so on;
• moving alike methods and components: methods() to /children-components;
• converting class to presentational function: each stateless class will be converted to functions;
• checking of redudant modules: remove package dependency with same functionally or purpose, as classname or clsx ones;
• checking of binding in components: anonymous and binded functions called directly from render method prop components. Instead, reference it on constructor property class parent component;
• checking of synthetic parameter calls: this goes automatically, been unnecessary to call it;
• removing unecessary node elements;
• checking of repeated code fragments: extract into new components or replacing it with existing ones, then render them with callback map function;
• checking of methods behaving like a life cycle: extract in modules outside of the component;
• fixing nested components: /src/components/component-name it's enough;
• checking and fixing rest necessary corrections: go through component by component and review what still be needed to do;

Last phase

• redo all previous activity described on TODOs ever again to check the refactor feature maintainability.

P.S.:

• every right after phase init, dev will be merged into feature/703 branch to be according in front of flow and development;
• every TODO description action will be executed shalloweslly, except refactorings itself;
• any class has not been reformulated to ES6 functions, at least for stateless or the new ones;
• any data has not been changed during the refactoring, but his locals will be moved to a feed.js file only if necessary and for new components;
• any component has not been created at desktop viewport. Instead, will follow the mobile-first principle;
• any activity described on TODOs has not been interfered by another, but the previous ones. It means that only its description will be executed per time;
• any existing structure component folder has not been changed during the refactoring, but the name and default exportation of the new ones will follow the kebab-case and camelCase convention, respect.:

components
├── component-name
│  ├── index.[js,jsx] as ComponentName or componentName if it's a module
│  ├── feed.js
│  └── style.[js,css]
└── another-component
    ├── index.[js,jsx] as AnotherComponent or anotherComponent if it's a module
    ├── feed.js
    └── style.[js,css]