Apply lint rules and update tests

config/env.js

@@ -6,6 +6,7 @@ const paths = require('./paths');
 delete require.cache[require.resolve('./paths')];
 
 const { NODE_ENV = 'development' } = process.env;
+
 if (!NODE_ENV) {
   throw new Error('The NODE_ENV environment variable is required but was not specified.');
 }
@@ -46,6 +47,7 @@ dotenvFiles.forEach(dotenvFile => {
 // https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
 // We also resolve them to make sure all tools using them work consistently.
 const appDirectory = fs.realpathSync(process.cwd());
+
 process.env.NODE_PATH = (process.env.NODE_PATH || '')
   .split(path.delimiter)
   .filter(folder => folder && !path.isAbsolute(folder))
@@ -61,7 +63,9 @@ function getClientEnvironment(publicUrl) {
     .filter(key => REACT_APP.test(key))
     .reduce(
       (env, key) => {
+        // eslint-disable-next-line no-param-reassign
         env[key] = process.env[key];
+
         return env;
       },
       {
@@ -91,7 +95,9 @@ function getClientEnvironment(publicUrl) {
   // Stringify all values so we can feed into webpack DefinePlugin
   const stringified = {
     'process.env': Object.keys(raw).reduce((env, key) => {
+      // eslint-disable-next-line no-param-reassign
       env[key] = JSON.stringify(raw[key]);
+
       return env;
     }, {}),
   };

config/getHttpsConfig.js

@@ -6,8 +6,9 @@ const paths = require('./paths');
 
 // Ensure the certificate and key provided are valid and if not
 // throw an easy to debug error
-function validateKeyAndCerts({ cert, key, keyFile, crtFile }) {
+function validateKeyAndCerts({ cert, crtFile, key, keyFile }) {
   let encrypted;
+
   try {
     // publicEncrypt will throw an error with an invalid cert
     encrypted = crypto.publicEncrypt(cert, Buffer.from('test'));
@@ -32,13 +33,14 @@ function readEnvFile(file, type) {
       )}" can't be found.`,
     );
   }
+
   return fs.readFileSync(file);
 }
 
 // Get the https config
 // Return cert files if provided in env, otherwise just true or false
 function getHttpsConfig() {
-  const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env;
+  const { HTTPS, SSL_CRT_FILE, SSL_KEY_FILE } = process.env;
   const isHttps = HTTPS === 'true';
 
   if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) {
@@ -50,8 +52,10 @@ function getHttpsConfig() {
     };
 
     validateKeyAndCerts({ ...config, keyFile, crtFile });
+
     return config;
   }
+
   return isHttps;
 }
 

config/webpack.config.js

@@ -1,4 +1,3 @@
-/*eslint-disable no-console */
 const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
@@ -171,9 +170,6 @@ module.exports = webpackEnv => {
       devtoolModuleFilenameTemplate: isEnvProduction
         ? info => path.relative(paths.appSrc, info.absoluteResourcePath).replace(/\\/g, '/')
         : info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
-      // Prevents conflicts when multiple webpack runtimes (from different apps)
-      // are used on the same page.
-      jsonpFunction: `webpackJsonp${NPMPackage.name}`,
       // this defaults to 'window', but by setting it to 'this' then
       // module chunks which are built will work in web workers as well.
       globalObject: 'this',
@@ -351,11 +347,11 @@ module.exports = webpackEnv => {
               use: [
                 {
                   loader: 'file-loader',
-                  query: { name: 'static/[name].[ext]' },
+                  options: { name: 'static/[name].[ext]' },
                 },
                 {
                   loader: 'image-webpack-loader',
-                  query: {
+                  options: {
                     optipng: {
                       optimizationLevel: 5,
                     },
@@ -477,7 +473,9 @@ module.exports = webpackEnv => {
         publicPath: paths.publicUrlOrPath,
         generate: (seed, files, entrypoints) => {
           const manifestFiles = files.reduce((manifest, file) => {
+            // eslint-disable-next-line no-param-reassign
             manifest[file.name] = file.path;
+
             return manifest;
           }, seed);
           const entrypointFiles = entrypoints.main.filter(fileName => !fileName.endsWith('.map'));
@@ -523,18 +521,6 @@ module.exports = webpackEnv => {
         formatter: isEnvProduction ? typescriptFormatter : undefined,
       }),
     ].filter(Boolean),
-    // Some libraries import Node modules but don't use them in the browser.
-    // Tell Webpack to provide empty mocks for them so importing them works.
-    node: {
-      module: 'empty',
-      dgram: 'empty',
-      dns: 'mock',
-      fs: 'empty',
-      http2: 'empty',
-      net: 'empty',
-      tls: 'empty',
-      child_process: 'empty',
-    },
     // Turn off performance processing because we utilize
     // our own hints via the FileSizeReporter
     performance: false,

src/Root.tsx

@@ -14,16 +14,14 @@ import config from 'config';
 
 import { showAlert } from 'actions';
 
-import Home from 'routes/Home';
-import NotFound from 'routes/NotFound';
-import Private from 'routes/Private';
-
+import Footer from 'components/Footer';
+import Header from 'components/Header';
 import RoutePrivate from 'containers/RoutePrivate';
 import RoutePublic from 'containers/RoutePublic';
 import SystemAlerts from 'containers/SystemAlerts';
-
-import Footer from 'components/Footer';
-import Header from 'components/Header';
+import Home from 'routes/Home';
+import NotFound from 'routes/NotFound';
+import Private from 'routes/Private';
 
 import { StoreState, UserState } from 'types';
 
@@ -57,12 +55,12 @@ function Root() {
       <ThemeProvider theme={theme}>
         <AppWrapper data-testid="app">
           <Helmet
+            defaultTitle={config.name}
             defer={false}
+            encodeSpecialCharacters
             htmlAttributes={{ lang: 'pt-br' }}
-            encodeSpecialCharacters={true}
-            defaultTitle={config.name}
-            titleTemplate={`%s | ${config.name}`}
             titleAttributes={{ itemprop: 'name', lang: 'pt-br' }}
+            titleTemplate={`%s | ${config.name}`}
           >
             <link
               href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap"
@@ -73,13 +71,13 @@ function Root() {
           <Main isAuthenticated={isAuthenticated}>
             <Switch>
               <RoutePublic
+                component={Home}
+                exact
                 isAuthenticated={isAuthenticated}
                 path="/"
-                exact
                 to="/private"
-                component={Home}
               />
-              <RoutePrivate isAuthenticated={isAuthenticated} path="/private" component={Private} />
+              <RoutePrivate component={Private} isAuthenticated={isAuthenticated} path="/private" />
               <Route component={NotFound} />
             </Switch>
           </Main>

src/actions/github.ts

@@ -1,3 +1,4 @@
+/* eslint-disable import/prefer-default-export */
 /**
  * @module Actions/User
  * @desc User Actions

src/components/Alert.tsx

@@ -36,7 +36,7 @@ const AlertButton = styled.button`
   top: ${spacer(1)};
 `;
 
-function Alert({ children, handleClickClose, id, icon, variant = 'gray', ...rest }: Props) {
+function Alert({ children, handleClickClose, icon, id, variant = 'gray', ...rest }: Props) {
   const output: Record<string, any> = {};
   let name: Icons;
 

src/components/Footer.tsx

@@ -7,20 +7,20 @@ function Footer() {
       <Container py={3}>
         <Flex justifyContent="space-between">
           <iframe
-            title="GitHub Stars"
-            src="https://ghbtns.com/github-btn.html?user=gilbarbara&repo=react-redux-saga-boilerplate&type=star&count=true"
             frameBorder="0"
+            height="20px"
             scrolling="0"
+            src="https://ghbtns.com/github-btn.html?user=gilbarbara&repo=react-redux-saga-boilerplate&type=star&count=true"
+            title="GitHub Stars"
             width="110px"
-            height="20px"
           />
           <iframe
-            title="GitHub Follow"
-            src="https://ghbtns.com/github-btn.html?user=gilbarbara&type=follow&count=true"
             frameBorder="0"
+            height="20px"
             scrolling="0"
+            src="https://ghbtns.com/github-btn.html?user=gilbarbara&type=follow&count=true"
+            title="GitHub Follow"
             width="130px"
-            height="20px"
           />
         </Flex>
       </Container>

src/components/Icon.tsx

@@ -24,9 +24,9 @@ const IconWrapper = styled(SVG)`
 function Icon({ name, width = 20 }: Props) {
   return (
     <IconWrapper
+      height="100%"
       src={`${process.env.PUBLIC_URL}/media/icons/${name}.svg`}
       width={px(width)}
-      height="100%"
     />
   );
 }

src/components/Loader.tsx

@@ -145,7 +145,7 @@ const Loader = (props: Props) => {
     output = (
       <LoaderRotate {...props} data-testid="Loader">
         <LoaderRotateSVG {...props}>
-          <LoaderRotateCircle {...props} cx="50" cy="50" r="20" fill="none" strokeWidth={2} />
+          <LoaderRotateCircle {...props} cx="50" cy="50" fill="none" r="20" strokeWidth={2} />
         </LoaderRotateSVG>
       </LoaderRotate>
     );

src/components/Reload.tsx

@@ -18,7 +18,7 @@ function Reload() {
       <Heading as="h6" mb={3}>
         There's a new version of this app!
       </Heading>
-      <Button variant="dark" invert size="sm" onClick={handleClick}>
+      <Button invert onClick={handleClick} size="sm" variant="dark">
         Reload
       </Button>
     </ReloadWrapper>

src/components/Transition/index.tsx

@@ -20,7 +20,8 @@ function Transition({ children, className, style, transition, ...rest }: Props)
   const Component = transitions[transition];
 
   if (!Component) {
-    console.error(`Invalid transition: ${transition}`); //eslint-disable-line no-console
+    console.error(`Invalid transition: ${transition}`); // eslint-disable-line no-console
+
     return null;
   }
 

src/containers/ErrorHandler.tsx

@@ -45,8 +45,8 @@ export default class ErrorHandler extends React.Component<Props, State> {
     const message = error.toString();
 
     return (
-      <Container bg="#000" cl="#fff" fullScreen textAlign="center" data-testid="ErrorHandler">
-        <Image src={`${process.env.PUBLIC_URL}/media/images/error.gif`} alt="Error" width={128} />
+      <Container bg="#000" cl="#fff" data-testid="ErrorHandler" fullScreen textAlign="center">
+        <Image alt="Error" src={`${process.env.PUBLIC_URL}/media/images/error.gif`} width={128} />
         <Heading as="h3" my={3}>
           {message}
         </Heading>

src/containers/GitHub.tsx

@@ -17,9 +17,10 @@ import {
 import { useShallowEqualSelector } from 'modules/hooks';
 import theme, { appColor, spacer } from 'modules/theme';
 
-import { getRepos, showAlert } from 'actions';
 import { STATUS } from 'literals';
 
+import { getRepos, showAlert } from 'actions';
+
 import Loader from 'components/Loader';
 
 const Item = styled(Link)`
@@ -79,7 +80,7 @@ function GitHub() {
     if (previousStatus !== status && status === STATUS.ERROR) {
       dispatch(showAlert(message, { variant: 'danger' }));
     }
-  }, [message, previousStatus, status]);
+  }, [dispatch, message, previousStatus, status]);
 
   const handleClick = useCallback(
     (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -97,6 +98,8 @@ function GitHub() {
     if (data.length) {
       output = (
         <Grid
+          data-testid="GitHubGrid"
+          data-topic={query}
           gridGap={{
             _: spacer(2),
             sm: spacer(3),
@@ -115,12 +118,10 @@ function GitHub() {
             _: '100%',
             sm: '90%',
           }}
-          data-testid="GitHubGrid"
-          data-topic={query}
         >
           {data.map((d: Record<string, any>) => (
             <Item key={d.id} href={d.html_url} target="_blank">
-              <Image src={d.owner.avatar_url} alt={d.owner.login} />
+              <Image alt={d.owner.login} src={d.owner.avatar_url} />
               <ItemHeader>
                 <Heading as="h5" h={100} lineHeight={1}>
                   {d.name}
@@ -142,7 +143,7 @@ function GitHub() {
   return (
     <div key="GitHub" data-testid="GitHubWrapper">
       <Flex justifyContent="center">
-        <ButtonGroup role="group" aria-label="GitHub Selector" data-testid="GitHubSelector">
+        <ButtonGroup aria-label="GitHub Selector" data-testid="GitHubSelector" role="group">
           <Button
             busy={query === 'react' && isRunning}
             data-topic="react"

src/containers/SystemAlerts.tsx

@@ -133,9 +133,9 @@ export default function SystemAlerts() {
       return items.map(d => (
         <Alert
           key={d.id}
-          id={d.id}
-          icon={d.icon}
           handleClickClose={handleClick}
+          icon={d.icon}
+          id={d.id}
           variant={d.variant}
         >
           {d.message}

src/index.tsx

@@ -3,27 +3,26 @@ import ReactDOM from 'react-dom';
 import { HelmetProvider } from 'react-helmet-async';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/lib/integration/react';
-
-import { showAlert } from 'actions';
 import { configStore } from 'store';
 
-import ErrorHandler from 'containers/ErrorHandler';
-import GlobalStyles from 'containers/GlobalStyles';
+import { showAlert } from 'actions';
 
 import Loader from 'components/Loader';
 import Reload from 'components/Reload';
+import ErrorHandler from 'containers/ErrorHandler';
+import GlobalStyles from 'containers/GlobalStyles';
 
 import reportWebVitals from './reportWebVitals';
 import Root from './Root';
 import { register } from './serviceWorkerRegistration';
 
-const { store, persistor } = configStore();
+const { persistor, store } = configStore();
 
 window.store = store;
 
 ReactDOM.render(
   <Provider store={store}>
-    <PersistGate loading={<Loader size={100} block />} persistor={persistor}>
+    <PersistGate loading={<Loader block size={100} />} persistor={persistor}>
       <ErrorHandler>
         <HelmetProvider>
           <Root />
@@ -45,4 +44,4 @@ register({
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals(console.log); //eslint-disable-line no-console
+reportWebVitals(console.log); // eslint-disable-line no-console

src/literals/index.ts

@@ -1,4 +1,4 @@
-import { keyMirror } from 'modules/helpers';
+import { keyMirror } from '@gilbarbara/helpers';
 
 import { Status } from 'types';