[election:web] upgrade dependencies, reduce build time (#126)

* [election] add cache flag to lint

* [election] remove auto formatting

* [election:web] upgrade dependencies

* [election:web] move testing libs to devDepedencies

* [election:web] fix build errors post deps upgrade

* [election:web] add --production flag in build.sh

* [election:web] add brunch devdependency

* [election:web] move  brunch to dependencies

* [election:web] remove unused refs

* [election:web] bring back corejs

* [election:web] Fix minigraph error

Author: Chandan Rai

election/transformed-data/counties.json

@@ -47439,7 +47439,7 @@
                 "candidates": {}
             }
         },
-        "total": {} 
+        "total": {}
     },
     "AK": {
         "counties": {
@@ -48062,12 +48062,12 @@
     "TT": {
         "total": {
             "constitution": 3807,
-            "democrat": 188794,
+            "democrat": 81195417,
             "green": 8075,
-            "libertarian": 23004,
+            "libertarian": 1791587,
             "no party affiliation": 255060,
-            "others": 12386,
-            "republican": 489371,
+            "others": 217363,
+            "republican": 74022587,
             "better for america": 5825,
             "independent": 1063,
             "prohibition": 715,

election/web/.eslintrc.js

@@ -3,7 +3,7 @@ module.exports = {
     browser: true,
     es6: true,
   },
-  extends: ['plugin:react/recommended', 'google', 'prettier', 'prettier/react'],
+  extends: ['plugin:react/recommended', 'google', 'prettier'],
   globals: {
     Atomics: 'readonly',
     SharedArrayBuffer: 'readonly',
@@ -19,17 +19,18 @@ module.exports = {
   plugins: ['react', 'prettier', 'react-hooks', 'import'],
   rules: {
     'require-jsdoc': 0,
-    'prettier/prettier': 'error',
+    'prettier/prettier': 0,
     'no-invalid-this': 0,
     'react/prop-types': 0,
+    quotes: [0, "single", { "avoidEscape": true }],
     'react-hooks/rules-of-hooks': 'warn',
     'react-hooks/exhaustive-deps': 'error',
     'import/no-unresolved': [2, {commonjs: true, amd: true}],
     'import/named': 2,
     'import/default': 2,
     'import/export': 2,
     'import/order': [
-      2,
+      0,
       {
         groups: [
           'index',

election/web/build.sh

@@ -1,3 +1,3 @@
 #!/bin/bash
-npm install
+npm install --production
 npm run build

election/web/package.json

@@ -7,50 +7,48 @@
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "@primer/octicons-v2-react": "0.0.0-53e900d",
-    "@testing-library/jest-dom": "^5.11.0",
-    "@testing-library/react": "^10.4.3",
-    "ag-grid-community": "^24.0.0",
-    "ag-grid-react": "^24.0.0",
+    "ag-grid-community": "^25.1.0",
+    "ag-grid-react": "^25.1.0",
     "axios": "^0.21.1",
     "classnames": "^2.2.6",
     "core-js": "^3.6.5",
     "corejs-typeahead": "^1.3.1",
     "d3-array": "^2.4.0",
-    "d3-axis": "^1.0.12",
-    "d3-fetch": "^1.2.0",
-    "d3-format": "^1.4.4",
-    "d3-geo": "^1.12.1",
-    "d3-interpolate": "^1.4.0",
+    "d3-axis": "^2.1.0",
+    "d3-fetch": "^2.0.0",
+    "d3-format": "^2.0.0",
+    "d3-geo": "^2.0.1",
+    "d3-interpolate": "^2.0.1",
     "d3-interpolate-path": "^2.1.2",
     "d3-scale": "^3.2.1",
-    "d3-scale-chromatic": "^1.5.0",
-    "d3-selection": "^1.4.1",
-    "d3-shape": "^1.3.7",
-    "d3-transition": "^1.3.2",
+    "d3-scale-chromatic": "^2.0.0",
+    "d3-selection": "^2.0.0",
+    "d3-shape": "^2.1.0",
+    "d3-transition": "^2.0.0",
     "date-fns": "^2.14.0",
     "date-fns-tz": "^1.0.10",
     "fast-deep-equal": "^3.1.3",
     "immer": "^8.0.1",
     "lodash": "^4.17.15",
     "luxon": "^1.25.0",
     "mobx": "^6.1.4",
-    "react": "^16.13.1",
-    "react-content-loader": "^5.1.0",
-    "react-dom": "^16.13.1",
+    "react": "^17.0.1",
+    "react-content-loader": "^6.0.2",
+    "react-dom": "^17.0.1",
     "react-feather": "^2.0.8",
     "react-helmet": "^6.1.0",
-    "react-notifications-component": "^2.4.0",
+    "react-notifications-component": "^3.0.4",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "^3.4.3",
+    "react-scripts": "^4.0.3",
     "react-spring": "^8.0.27",
-    "react-swipeable": "^5.5.1",
-    "react-syntax-highlighter": "^13.5.3",
+    "react-swipeable": "^6.1.0",
+    "react-syntax-highlighter": "^15.4.3",
     "react-table": "^7.5.0",
-    "react-use": "^15.3.0",
-    "react-use-gesture": "^7.0.15",
+    "react-use": "^17.2.1",
+    "react-use-gesture": "^9.1.3",
     "redoc": "^2.0.0-rc.40",
     "styled-components": "^5.2.0",
-    "swr": "^0.2.3",
+    "swr": "^0.5.2",
     "topojson": "^3.0.2",
     "use-dark-mode": "^2.3.1",
     "workerize-loader": "^1.3.0"
@@ -62,9 +60,8 @@
     "compress_maps": "rollup -c",
     "test": "react-scripts test --testPathIgnorePatterns=src/tests/mapAndApiStateNames.test.js",
     "test:map": "react-scripts test src/tests/mapAndApiStateNames.test.js",
-    "eslint": "eslint .",
-    "eslint:fix": "eslint --fix --max-warnings=0",
-    "format": "prettier --write \"**/*.+(js|jsx|json|yml|yaml|md|html)\"",
+    "eslint": "eslint . --cache --quite",
+    "eslint:fix": "eslint . --fix --max-warnings=0",
     "scss-lint": "sass-lint 'src/**/*.scss' -v -f table --max-warnings 0",
     "scss-lint:fix": "sass-lint-auto-fix 'src/**/*.scss' -d -h -c '.sass-lint-auto-fix.yml'",
     "analyze": "source-map-explorer 'build/static/js/*.js'",
@@ -75,44 +72,26 @@
   "eslintConfig": {
     "extends": "react-app"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "*.+(js|jsx)": [
-      "npm run eslint:fix",
-      "prettier --write \"**/*.+(js|jsx)\""
-    ],
-    "*.+(json|yml|yaml|md)": [
-      "prettier --write \"**/*.+(json|yml|yaml|md)\""
-    ],
-    "*.+(css|scss)": [
-      "npm run scss-lint:fix",
-      "npm run scss-lint"
-    ]
-  },
   "devDependencies": {
-    "@welldone-software/why-did-you-render": "^4.2.5",
+    "@testing-library/jest-dom": "^5.11.0",
+    "@testing-library/react": "^11.2.5",
+    "@welldone-software/why-did-you-render": "^6.1.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "eslint-config-google": "^0.14.0",
-    "eslint-config-prettier": "^6.11.0",
+    "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.20.0",
     "http-server": "^0.12.3",
-    "husky": "^4.2.5",
-    "lint-staged": "^10.2.11",
-    "node-sass": "^4.14.1",
+    "node-sass": "^5.0.0",
     "prettier": "^2.0.5",
     "rollup": "^2.18.1",
     "rollup-plugin-copy": "^3.3.0",
     "sass-lint": "^1.13.1",
     "sass-lint-auto-fix": "^0.21.0",
     "source-map-explorer": "^2.4.2",
-    "workbox-build": "^5.1.3"
+    "workbox-build": "^6.1.1"
   },
   "browserslist": {
     "production": [

election/web/src/components/Build.js

@@ -27,8 +27,8 @@ function Build() {
         <h2>
           The Github project for this React application is <a href="https://github.com/nimbella/demo-projects/tree/master/election" target="_blank" rel="noopener noreferrer">here</a>:
       </h2>
-        <p>This project is built with a React front-end for the user interface. The front-end is backed by the <a href="#/api">Nimbella Election API</a>. As an example, let's show you how to share exit poll data in your application.</p>
-        <p>It's as simple as 1, 2, 3 &amp; deploy.</p>
+        <p>This project is built with a React front-end for the user interface. The front-end is backed by the <a href="#/api">Nimbella Election API</a>. As an example, let&apos;s show you how to share exit poll data in your application.</p>
+        <p>It&apos;s as simple as 1, 2, 3 &amp; deploy.</p>
         <ol>
           <li>
             <p>In your front-end React application, import the following.</p>
@@ -88,7 +88,7 @@ useEffect(() => {
             </SyntaxHighlighter>
           </li>
         </ol>
-        <p>You're one <b>deploy</b> step away from sharing your inspiration with the world.</p>
+        <p>You&apos;re one <b>deploy</b> step away from sharing your inspiration with the world.</p>
         <h2>How to deploy your project</h2>
         <p>
           This project is built for the Nimbella cloud. This means you can share your project with the world by deploying the application
@@ -119,9 +119,9 @@ useEffect(() => {
         <SyntaxHighlighter language="javascript" style={darkMode.value ? darcula : prism}>
           GOOGLE_CIVIC_API_TOKEN=&lt;your_google_api_key&gt;  nim project deploy github:nimbella/demo-projects/election
         </SyntaxHighlighter>
-        <p>If you are in a hurry and don't want to grab a <a href="https://developers.google.com/civic-information" target="_blank" rel="noopener noreferrer">Google Civic Information API Key</a> yet, you can still deploy and use this app. Simply clone this repo locally, prepend the <b>API_ROOT_URL</b> value with <b>https://electiondemo-apigcp.nimbella.io</b> in <b>constants.js</b> and deploy using `nim project deploy demo-projects/election`. That's it, you can skip below steps.</p>
+        <p>If you are in a hurry and don&apos;t want to grab a <a href="https://developers.google.com/civic-information" target="_blank" rel="noopener noreferrer">Google Civic Information API Key</a> yet, you can still deploy and use this app. Simply clone this repo locally, prepend the <b>API_ROOT_URL</b> value with <b>https://electiondemo-apigcp.nimbella.io</b> in <b>constants.js</b> and deploy using `nim project deploy demo-projects/election`. That&apos;s it, you can skip below steps.</p>
 
-        <p>If you did not sign up with a GitHub id, then clone the project locally first, then deploy. This is because the GitHub rate limits are too low to deploy without cloning unless you're authenticated with GitHub.</p>
+        <p>If you did not sign up with a GitHub id, then clone the project locally first, then deploy. This is because the GitHub rate limits are too low to deploy without cloning unless you&apos;re authenticated with GitHub.</p>
         <SyntaxHighlighter language="javascript" style={darkMode.value ? darcula : prism}>
           {`git clone https://github.com/nimbella/demo-projects.git
 export GOOGLE_CIVIC_API_TOKEN=<your_google_api_key>

election/web/src/components/Contest.js

@@ -14,7 +14,7 @@ function Contest() {
         />
       </Helmet>
       <div className="jumbotron">
-        <h1>Don't let the year 2020 be a drag</h1>
+        <h1>Don&apos;t let the year 2020 be a drag</h1>
         <p>Extend these election-related APIs/app and build your own election app to inspire your friends, family <span role="img" aria-label="family">👪</span>, and everyone you know to win <span role="img" aria-label="award">🏆</span> $2020.</p>
        <a href="https://nimbella.com/election2020" rel="noopener noreferrer"  target="_blank">
         <img alt="Election2020ContestBanner" src={banner} />

election/web/src/components/MapVisualizer.js

@@ -33,7 +33,7 @@ import {
   interpolatePurples,
   interpolateOranges,
 } from 'd3-scale-chromatic';
-import {select, event} from 'd3-selection';
+import {select} from 'd3-selection';
 import {transition} from 'd3-transition';
 import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 import {useHistory} from 'react-router-dom';
@@ -253,7 +253,7 @@ function MapVisualizer({
         if (onceTouchedRegion.current === d) onceTouchedRegion.current = null;
         else onceTouchedRegion.current = d;
       })
-      .on('click', (d) => {
+      .on('click', (event, d) => {
         event.stopPropagation();
         const stateCode = STATE_CODES[d.properties.st_nm];
         if (
@@ -361,7 +361,7 @@ function MapVisualizer({
           onceTouchedRegion.current = null;
         else onceTouchedRegion.current = feature;
       })
-      .on('click', (feature) => {
+      .on('click', (event, feature) => {
         event.stopPropagation();
         if (onceTouchedRegion.current || mapMeta.mapType === MAP_TYPES.STATE)
           return;

election/web/src/components/Minigraphs.js

@@ -92,7 +92,7 @@ function Minigraphs({timeseries, date: timelineDate}) {
                 const previous = select(this).attr('d');
                 const current = linePath(date);
                 return interpolatePath(previous, current);
-              })
+              }).selection()
         );
 
       svg
@@ -127,7 +127,7 @@ function Minigraphs({timeseries, date: timelineDate}) {
               .attr('cx', (year) => xScale(year))
               .attr('cy', (year) =>
                 yScale(getStatistic(timeseries[year], 'delta', statistic))
-              )
+              ).selection()
         );
     });
   }, [years, timeseries]);

election/web/src/components/Timeseries.js

@@ -11,7 +11,7 @@ import {min, max, bisector} from 'd3-array';
 import {axisBottom, axisRight} from 'd3-axis';
 import {interpolatePath} from 'd3-interpolate-path';
 import { scaleLinear, scaleLog } from 'd3-scale';
-import {select, mouse} from 'd3-selection';
+import {select, pointer} from 'd3-selection';
 import {line, curveMonotoneX} from 'd3-shape';
 // eslint-disable-next-line
 import {transition} from 'd3-transition';
@@ -167,7 +167,7 @@ function Timeseries({timeseries, years, chartType, isUniform, isLog}) {
     };
 
     function mousemove() {
-      const xm = mouse(this)[0];
+      const xm = pointer(this)[0];
       const year = xScale.invert(xm);
       if (!isNaN(year)) {
         const bisectDate = bisector((year) => year).left;
@@ -274,7 +274,7 @@ function Timeseries({timeseries, years, chartType, isUniform, isLog}) {
                   const previous = select(this).attr('d');
                   const current = linePath(year);
                   return interpolatePath(previous, current);
-                })
+                }).selection()
           );
       } else {
         /* ELECTION  TRENDS */