Add ESLint and prettier

.eslintrc.js

@@ -0,0 +1,32 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+  },
+  parser: 'babel-eslint',
+  extends: ['react-app','prettier', 'prettier/react', 'plugin:prettier/recommended'],
+  globals: {
+    Atomics: 'readonly',
+    SharedArrayBuffer: 'readonly',
+  },
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+      modules: true,
+    },
+    ecmaVersion: 2018,
+    sourceType: 'module',
+  },
+  plugins: ['react', 'prettier'],
+  rules: {
+    'prettier/prettier': 'error',
+    'react/jsx-filename-extension': [1, { extensions: ['.js'] }],
+    'react/forbid-prop-types': [0, { forbid: ['any'] }],
+    'react/prop-types': 0,
+  },
+  env: {
+    jest: true,
+    browser: true,
+    node: true,
+  },
+};

.prettierignore

@@ -0,0 +1,28 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+creds.sh
+token.json
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# ides
+.idea
+.tern-port
+.vscode/

.prettierrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  singleQuote: true,
+  trailingComma: 'all',
+  arrowParens: 'avoid',
+};

cypress/integration/homepage.js

@@ -1,14 +1,10 @@
 describe('Main App Should be Visible', () => {
-    beforeEach(() => {
-        cy.visit('/')
-        cy.get('#root')
-            .should('be.visible')
-    })
+  beforeEach(() => {
+    cy.visit('/');
+    cy.get('#root').should('be.visible');
+  });
 
-    it(`Can See Map`, () => {
-        cy.get('.us-state-map')
-          .should('be.visible')
-    })
-
-
-})
+  it(`Can See Map`, () => {
+    cy.get('.us-state-map').should('be.visible');
+  });
+});

cypress/plugins/index.js

@@ -18,4 +18,4 @@
 module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
-}
+};

cypress/support/index.js

@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import './commands';
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

get-data.js

@@ -1,6 +1,6 @@
 const fs = require('fs');
 const readline = require('readline');
-const { google } = require("googleapis");
+const { google } = require('googleapis');
 
 let MODELS = [
   'MAIN MODEL - Current Trends',
@@ -39,9 +39,12 @@ fs.readFile('credentials.json', (err, content) => {
  * @param {function} callback The callback to call with the authorized client.
  */
 function authorize(credentials, callback) {
-  const {client_secret, client_id, redirect_uris} = credentials.installed;
+  const { client_secret, client_id, redirect_uris } = credentials.installed;
   const oAuth2Client = new google.auth.OAuth2(
-      client_id, client_secret, redirect_uris[0]);
+    client_id,
+    client_secret,
+    redirect_uris[0],
+  );
 
   // Check if we have previously stored a token.
   fs.readFile(TOKEN_PATH, (err, token) => {
@@ -67,13 +70,17 @@ function getNewToken(oAuth2Client, callback) {
     input: process.stdin,
     output: process.stdout,
   });
-  rl.question('Enter the code from that page here: ', (code) => {
+  rl.question('Enter the code from that page here: ', code => {
     rl.close();
     oAuth2Client.getToken(code, (err, token) => {
-      if (err) return console.error('Error while trying to retrieve access token', err);
+      if (err)
+        return console.error(
+          'Error while trying to retrieve access token',
+          err,
+        );
       oAuth2Client.setCredentials(token);
       // Store the token to disk for later program executions
-      fs.writeFile(TOKEN_PATH, JSON.stringify(token), (err) => {
+      fs.writeFile(TOKEN_PATH, JSON.stringify(token), err => {
         if (err) return console.error(err);
         console.log('Token stored to', TOKEN_PATH);
       });
@@ -89,18 +96,22 @@ function getNewToken(oAuth2Client, callback) {
  */
 
 function downloadModel(auth, location, model) {
-  const sheets = google.sheets({version: 'v4', auth});
+  const sheets = google.sheets({ version: 'v4', auth });
   sheets.spreadsheets.values.get(
     {
-      spreadsheetId: "1YEj4Vr6lG1jQ1R3LG6frijJYNynKcgTjzo2n0FsBwZA",
-      range: `${MODELS[model]}!C19:U92`
+      spreadsheetId: '1YEj4Vr6lG1jQ1R3LG6frijJYNynKcgTjzo2n0FsBwZA',
+      range: `${MODELS[model]}!C19:U92`,
     },
     (err, res) => {
-      if (err) return console.log("The API returned an error: " + err);
+      if (err) return console.log('The API returned an error: ' + err);
       const rows = res.data.values;
-      fs.writeFile(`public/data/${location}.${model}.json`, JSON.stringify(rows), err => {
-        if (err) return console.error(err);
-      });
-    }
+      fs.writeFile(
+        `public/data/${location}.${model}.json`,
+        JSON.stringify(rows),
+        err => {
+          if (err) return console.error(err);
+        },
+      );
+    },
   );
 }

package.json

@@ -13,6 +13,8 @@
     "highcharts": "^8.0.4",
     "highcharts-react-official": "^3.0.0",
     "history": "^4.10.1",
+    "husky": "^4.2.3",
+    "lint-staged": "^10.0.9",
     "moment": "^2.24.0",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
@@ -28,10 +30,21 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint src || printf '\\n\\e[31mRun lint-fix to fix\\e[0m\\n\\n'",
+    "lint-fix": "eslint --fix src",
+    "prettier": "prettier --check '**/*.{css,scss,js}' || printf '\\n\\e[31mRun prettier-fix to fix\\e[0m\\n\\n'",
+    "prettier-fix": "prettier --write '**/*.{css,scss,js}'"
   },
-  "eslintConfig": {
-    "extends": "react-app"
+  "lint-staged": {
+    "src/**/*.{css,scss,js}": [
+      "eslint --fix src"
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
   },
   "browserslist": {
     "production": [
@@ -46,6 +59,9 @@
     ]
   },
   "devDependencies": {
-    "prettier": "1.19.1"
+    "eslint": "6.8.0",
+    "eslint-config-prettier": "6.10.1",
+    "eslint-plugin-prettier": "3.1.2",
+    "prettier": "2.0.2"
   }
 }

scripts/resize-images.js

@@ -1,18 +1,21 @@
-const fs    = require('fs');
-const util  = require('util');
-const path  = require('path');
+const fs = require('fs');
+const util = require('util');
+const path = require('path');
 const sharp = require('sharp');
 
 // Resize images to constant width / height
 // removing resized images: find public/images/endorsers -regex ".*resized.*" -delete
-(async() => {
+(async () => {
   const width = 100;
   const height = 100;
-  const imageFolder = 'endorsers'
+  const imageFolder = 'endorsers';
 
   try {
     const readdirAsync = util.promisify(fs.readdir);
-    const directoryPath = path.join(__dirname, `../public/images/${imageFolder}`);
+    const directoryPath = path.join(
+      __dirname,
+      `../public/images/${imageFolder}`,
+    );
 
     const files = await readdirAsync(directoryPath);
 

src/App.css

@@ -1,21 +1,20 @@
 .graphs-container {
-
 }
-.small-graph
-{
-  float:left;
+.small-graph {
+  float: left;
   width: 50%;
 }
 
 .clear {
-  clear:both;
+  clear: both;
 }
 
 h4 {
   margin-top: 50px;
 }
 
-th, td {
+th,
+td {
   padding: 10px;
   width: 25%;
 }
@@ -24,15 +23,14 @@ tr {
 }
 
 @media only screen and (max-width: 600px) {
-  .small-graph
-  {
+  .small-graph {
     float: unset;
     width: 100%;
   }
 }
 
 .analysis-group {
-  background-color: "#fafafa";
+  background-color: '#fafafa';
   padding: 20;
   margin-top: 20;
 }
@@ -71,6 +69,6 @@ tr {
 }
 
 .Map path:hover {
-  opacity: 0.50;
+  opacity: 0.5;
   cursor: pointer;
 }

src/App.js

@@ -9,7 +9,7 @@ import HomePage from 'screens/HomePage/HomePage';
 import FAQ from 'screens/FAQ/FAQ';
 import Contact from 'screens/Contact/Contact';
 import Endorsements from 'screens/Endorsements/Endorsements';
-import About from 'screens/About/About'
+import About from 'screens/About/About';
 import AppBar from 'components/AppBar/AppBar';
 import Footer from 'components/Footer/Footer';
 import theme from 'assets/theme';

src/assets/theme/overrides/index.js

@@ -9,5 +9,5 @@ export default {
   MuiIconButton,
   MuiPaper,
   MuiTableCell,
-  MuiTableHead
+  MuiTableHead,
 };

src/assets/theme/sizes.js

@@ -3,5 +3,5 @@ export const materialSMBreakpoint = '600px';
 
 export default {
   mobileBreakpoint,
-  materialSMBreakpoint
+  materialSMBreakpoint,
 };

src/assets/theme/typography.js

@@ -41,20 +41,20 @@ export default {
     color: palette.text.primary,
     fontSize: '16px',
     letterSpacing: '-0.05px',
-    lineHeight: '25px'
+    lineHeight: '25px',
   },
   subtitle2: {
     color: palette.text.secondary,
     fontWeight: 400,
     fontSize: '14px',
     letterSpacing: '-0.05px',
-    lineHeight: '21px'
+    lineHeight: '21px',
   },
   body1: {
     color: palette.text.primary,
     fontSize: '0.9rem',
     letterSpacing: '-0.05px',
-    lineHeight: '21px'
+    lineHeight: '21px',
   },
   body2: {
     color: palette.text.secondary,
@@ -63,27 +63,27 @@ export default {
       fontSize: '1rem',
     },
     letterSpacing: '-0.04px',
-    lineHeight: '1.4rem'
+    lineHeight: '1.4rem',
   },
   whiteText: {
     color: palette.white,
   },
   button: {
     color: palette.text.primary,
-    fontSize: '14px'
+    fontSize: '14px',
   },
   caption: {
     color: palette.text.secondary,
     fontSize: '11px',
     letterSpacing: '0.33px',
-    lineHeight: '13px'
+    lineHeight: '13px',
   },
   overline: {
     color: palette.text.secondary,
     fontSize: '11px',
     fontWeight: 500,
     letterSpacing: '0.33px',
     lineHeight: '13px',
-    textTransform: 'uppercase'
-  }
+    textTransform: 'uppercase',
+  },
 };