Configured "jsx-control-statements"

.babelrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    'babel-plugin-jsx-control-statements',
+  ],
+}

.eslintrc.js

@@ -3,26 +3,36 @@ module.exports = {
   extends: [
     'react-app',
     'plugin:jest/recommended',
+    'plugin:jsx-control-statements/recommended',
     '@lacussoft',
     'plugin:@typescript-eslint/recommended',
   ],
+  ignorePatterns: [
+    'build/',
+    'dist/',
+    '!.babelrc*',
+  ],
   plugins: [
-    'react',
     '@typescript-eslint',
     'jest',
+    'jsx-control-statements',
+    'react',
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
-    sourceType: 'module',
-    ecmaVersion: 2020,
     ecmaFeatures: {
       jsx: true,
     },
+    ecmaVersion: 2020,
+    sourceType: 'module',
   },
   rules: {
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/no-use-before-define': 'off',
     'no-console': 'off',
     'no-use-before-define': 'off',
+    'react/jsx-indent-props': ['error', 2],
+    'react/jsx-closing-bracket-location': 'error',
+    'react/jsx-no-undef': [2, { allowGlobals: true }],
   },
 }

config-overrides.js

@@ -0,0 +1,4 @@
+/* eslint-disable */
+const { useBabelRc, override } = require('customize-cra')
+
+module.exports = override(useBabelRc())

package.json

@@ -6,9 +6,9 @@
   "author": "Julio L. Muller",
   "homepage": "https://juliolmuller.github.io/marvel-characters",
   "scripts": {
-    "start": "react-scripts start",
-    "build": "rm -rf docs/ && react-scripts build && mv build/ docs/",
-    "test": "react-scripts test",
+    "start": "react-app-rewired start",
+    "build": "rm -rf docs/ && react-app-rewired build && mv build/ docs/",
+    "test": "react-app-rewired test",
     "eject": "react-scripts eject"
   },
   "dependencies": {
@@ -33,8 +33,12 @@
     "@types/react-dom": "^17.0.0",
     "@typescript-eslint/eslint-plugin": "^4.14.2",
     "@typescript-eslint/parser": "^4.14.2",
+    "babel-plugin-jsx-control-statements": "^4.1.0",
+    "customize-cra": "^1.0.0",
     "eslint-plugin-jest": "^24.1.3",
+    "eslint-plugin-jsx-control-statements": "^2.2.1",
     "node-sass": "^4.14.1",
+    "react-app-rewired": "^2.1.8",
     "react-scripts": "^4.0.2",
     "typescript": "^4.1.3"
   },

src/@types/index.d.ts

@@ -1,4 +1,19 @@
 
+declare function If(props: { condition: boolean }): any
+declare function Choose(): any
+declare function When(props: { condition: boolean }): any
+declare function Otherwise(): any
+declare function For<T>(props: { each: string, of: Iterable<T>, index?: string }): any
+declare function With(props: { [id: string]: any }): any
+
+declare namespace JSX {
+  type TChildren = Element | string | number | boolean | null | typeof undefined
+
+  interface IntrinsicAttributes {
+    children?: TChildren | TChildren[]
+  }
+}
+
 interface JQuery {
   modal: (action: 'hide' | 'show' | 'toggle') => any
 }

src/components/App.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react'
+import { FC, useState } from 'react'
 import Header from './Header'
 import SearchBox from './SearchBox'
 import CharactersList from './CharactersList'
@@ -35,20 +35,23 @@ const App: FC = () => {
       <div className="container-fluid py-5">
         <div className="container bg-white">
           <SearchBox submitSearch={submitSearch} />
+
           <div className={(loading || characters.length) ? 'd-block' : 'd-none'}>
             <hr />
-            {loading ? (
+            <If condition={loading}>
               <div className="text-center py-5">
                 <img src={loadingSpinner} alt="Loading animation" />
               </div>
-            ) : (
+            </If>
+
+            <If condition={!loading}>
               <CharactersList
                 metadata={metadata}
                 characters={characters}
                 currentPage={currentPage}
                 goToPage={(page: number) => submitSearch(lastSearch, page)}
               />
-            )}
+            </If>
           </div>
         </div>
       </div>

src/components/CharacterCard/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import { FC } from 'react'
 import './styles.scss'
 
 interface CharacterCardProps {
@@ -15,6 +15,7 @@ const CharacterCard: FC<CharacterCardProps> = ({ character, showDetails }) => (
           className="figure-fluid float-left"
           alt="Character thumbnail"
         />
+
         <div className="character-card-details">
           <h3 className="card-title text-truncate h5" title={character.name}>
             {character.name}

src/components/CharacterModal/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from 'react'
+import { FC, useEffect } from 'react'
 import $ from 'jquery'
 import './styles.scss'
 
@@ -41,17 +41,21 @@ const CharacterModal: FC<CharacterModalProps> = ({ character, hideDetails }) =>
               {character.name}
             </h1>
           </div>
+
           <div className="modal-body text-center">
-            <p className="h5">{character.description || (
-              <span className="font-italic">No description</span>
-            )}</p>
+            <p className="h5">
+              {character.description || (
+                <span className="font-italic">No description</span>
+              )}
+            </p>
             <div className="d-flex justify-content-around pt-3">
               <h5><span className="badge badge-primary">{character.stories.available} stories</span></h5>
               <h5><span className="badge badge-danger">{character.comics.available} comics</span></h5>
               <h5><span className="badge badge-info">{character.series.available} series</span></h5>
               <h5><span className="badge badge-warning">{character.events.available} events</span></h5>
             </div>
           </div>
+
           <div className="modal-footer d-flex justify-content-between">
             <button type="button" className="btn btn-light rounded-0" data-dismiss="modal">
               Close

src/components/CharactersList/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react'
+import { FC, useState } from 'react'
 import CharacterCard from '../CharacterCard'
 import CharacterModal from '../CharacterModal'
 import Pagination from '../Pagination'
@@ -21,14 +21,15 @@ const CharactersList: FC<CharactersListProps> = ({
 
   return (
     <div className="pb-4">
-      {(total > limit) && (
+      <If condition={total > limit}>
         <Pagination
           goToPage={goToPage}
           current={currentPage}
           total={total}
           limit={limit}
         />
-      )}
+      </If>
+
       <div className="row">
         {characters.map((character: any) => (
           <CharacterCard
@@ -38,21 +39,23 @@ const CharactersList: FC<CharactersListProps> = ({
           />
         ))}
       </div>
-      {(total > limit) && (
+
+      <If condition={total > limit}>
         <Pagination
           goToPage={goToPage}
           current={currentPage}
           total={total}
           limit={limit}
           displayCounter
         />
-      )}
-      {displayDetails && (
+      </If>
+
+      <If condition={!!displayDetails}>
         <CharacterModal
           character={displayDetails}
           hideDetails={setDisplayDetails}
         />
-      )}
+      </If>
     </div>
   )
 }

src/components/Header/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import { FC } from 'react'
 import logo from '../../assets/images/logo-marvel.png'
 import './styles.scss'
 

src/components/Pagination/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useReducer } from 'react'
+import { FC, useReducer } from 'react'
 import './styles.scss'
 
 interface PaginationProps {
@@ -32,9 +32,11 @@ const Pagination: FC<PaginationProps> = (props) => {
         onClick={goToPrevious}
         style={{ visibility: (props.current === 1) ? 'hidden' : 'visible' }}
       >Previous</button>
-      {props.displayCounter && (
+
+      <If condition={!!props.displayCounter}>
         <span>Page {props.current} of {last}</span>
-      )}
+      </If>
+
       <button
         type="button"
         className="btn btn-outline-marvel page-nav-btn"

src/components/SearchBox/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, FormEvent, useState } from 'react'
+import { FC, FormEvent, useState } from 'react'
 import './styles.scss'
 
 interface SearchBoxProps {