update dependencies (#1606)

* update most dependencies to latest version, added support for node 18

* large migration commit

- migrate to material ui 5
  - emotion ui was added as per mui recommendations
    (https://mui.com/material-ui/getting-started/installation/)
  - @material-ui/core, @material-ui/icons, @material-ui/lab removed
  - replaced with @mui/material, @mui/icons-material, @mui/lab
- migrate to react router 6
- update and remove unused dev dependencies
  - redux-devtools-extension was deprecated in favor of @redux-devtools/extension
  - babel-eslint was deprecated in favor of @babel/eslint-parser
  - enzyme was removed as it was unused
- fixed linter errors from updating eslint
  - many were fixed with `npm run lint:fixed`
  - manual fixes applied to Blog.jsx
  - `default-param-last`, `no-restricted-exports`, and `react/jsx-no-constructed-context-values` converted to warnings
- react-day-picker was not updated due to breaking style changes

* update readme

* remove routechange.jsx

* remove date-fns

* revert date fns changes

* update react-markdown to latest version compatible with react 17

* remove more unused dev dependencies
Note: `npx depcheck` incorrectly indicates `eslint-import-resolver-node` and `eslint-import-resolver-node` as unused

* update to latest react 17

* update workflow to use node 18

Author: jaasonw

.eslintrc.js

@@ -4,54 +4,58 @@ module.exports = {
     es6: true,
     node: true,
   },
-  extends: ["airbnb", "eslint:recommended", "plugin:react/recommended"],
+  extends: ['airbnb', 'eslint:recommended', 'plugin:react/recommended'],
   globals: {
-    Atomics: "readonly",
-    SharedArrayBuffer: "readonly",
+    Atomics: 'readonly',
+    SharedArrayBuffer: 'readonly',
   },
-  parser: "babel-eslint",
+  parser: '@babel/eslint-parser',
   parserOptions: {
     ecmaFeatures: {
       jsx: true,
     },
     ecmaVersion: 2018,
-    sourceType: "module",
+    sourceType: 'module',
   },
   settings: {
-    "import/extensions": [".js", ".jsx"],
-    "import/resolver": {
+    'import/extensions': ['.js', '.jsx'],
+    'import/resolver': {
       node: {},
-      webpack: "webpack.config.js",
+      webpack: 'webpack.config.js',
     },
   },
-  plugins: ["react", "react-hooks"],
+  plugins: ['react', 'react-hooks'],
   rules: {
-    "linebreak-style": "off",
-    "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn",
-    "arrow-parens": ["error", "as-needed"],
+    'linebreak-style': 'off',
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
+    'arrow-parens': ['error', 'as-needed'],
     indent: [
-      "error",
+      'error',
       2,
       {
         SwitchCase: 1,
-        MemberExpression: "off",
-        ignoredNodes: ["TemplateLiteral"],
+        MemberExpression: 'off',
+        ignoredNodes: ['TemplateLiteral'],
       },
     ],
-    "template-curly-spacing": "off",
-    "jsx-a11y/no-noninteractive-tabindex": [
-      "error",
+    'template-curly-spacing': 'off',
+    'jsx-a11y/no-noninteractive-tabindex': [
+      'error',
       {
         tags: [],
-        roles: ["tabpanel"],
+        roles: ['tabpanel'],
       },
     ],
-    "jsx-a11y/label-has-associated-control": [ 2, {
-      "labelComponents": ["label"],
-      "labelAttributes": ["htmlFor"],
-      "controlComponents": ["input"]
+    'jsx-a11y/label-has-associated-control': [2, {
+      labelComponents: ['label'],
+      labelAttributes: ['htmlFor'],
+      controlComponents: ['input'],
     }],
-    "react/jsx-filename-extension": [1, { extensions: [".js", ".jsx"] }],
+    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
+
+    'default-param-last': 'warn',
+    'no-restricted-exports': 'warn',
+    'react/jsx-no-constructed-context-values': 'warn',
   },
 };

.github/workflows/main.yml

@@ -24,10 +24,10 @@ jobs:
       #      with:
       #        python-version: '2.x'
 
-      - name: Use Node.js 12.x
+      - name: Use Node.js 18.x
         uses: actions/setup-node@v3
         with:
-          node-version: '12.x'
+          node-version: '18.x'
 
       - name: Install Packages
         run: npm ci

.gitignore

@@ -39,3 +39,5 @@ venv/
 
 # archive
 /archive/aws/API\ Responses/*
+
+.DS_Store

App.jsx

@@ -6,23 +6,21 @@ import { getMetadataRequest } from '@reducers/metadata';
 
 import Header from '@components/Header';
 import Footer from '@components/Footer';
-import Routes from './Routes';
-import RouteChange from './components/main/util/RouteChange';
+import AppRoutes from './Routes';
 
-const App = ({ getMetadata }) => {
+function App({ getMetadata }) {
   useEffect(() => {
     getMetadata();
   });
 
   return (
     <HashRouter>
       <Header />
-      <Routes />
+      <AppRoutes />
       <Footer />
-      <RouteChange />
     </HashRouter>
   );
-};
+}
 
 const mapDispatchToProps = dispatch => ({
   getMetadata: () => dispatch(getMetadataRequest()),

README.md

@@ -27,7 +27,7 @@ Our mission is to create a user-friendly platform for anyone interested in explo
 * React.js
 * Duckdb-wasm
 * Redux
-* Material-UI 4.x
+* Material-UI 5.x
 
 ### Data Analysis
 
@@ -45,9 +45,9 @@ Our mission is to create a user-friendly platform for anyone interested in explo
 
 ## Quick Start
 * Ensure that node version manager (nvm) is installed (e.g. follow a [tutorial](https://heynode.com/tutorial/install-nodejs-locally-nvm/))
-* Run `nvm install lts/erbium` (on windows `nvm install erbium`)
-* Run `nvm use lts/erbium` (on windows `nvm use erbium`)
-* confirm you are using Node 12 by running `node -v` (e.g. `Now using node v12.22.12 (npm v6.14.16)`)
+* Run `nvm install lts/hydrogen` (on windows `nvm install hydrogen`)
+* Run `nvm use lts/hydrogen` (on windows `nvm use hydrogen`)
+* confirm you are using Node 18 by running `node -v` (e.g. `Now using node v18.7.0 (npm v8.9.2)`)
 * clone the repo
 * cd 311-data/
 * cp .example.env .env

Routes.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import {
-  Switch, Route, Redirect, useLocation,
+  Routes, Route, Navigate, useLocation,
 } from 'react-router-dom';
-import { ThemeProvider } from '@material-ui/core/styles';
-import Paper from '@material-ui/core/Paper';
-import Box from '@material-ui/core/Box';
+import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
+import Paper from '@mui/material/Paper';
+import Box from '@mui/material/Box';
 import queryString from 'query-string';
 import theme, { darkTheme } from '@theme/theme';
 import Desktop from '@components/main/Desktop';
@@ -17,42 +17,44 @@ import Research from '@components/main/Research';
 import Contact from '@components/contact/Contact';
 import ContentBottom from '@components/common/ContentBottom';
 
-export default function Routes() {
+export default function AppRoutes() {
   const { pathname, search } = useLocation();
   const values = queryString.parse(search);
 
   return (
     <>
       {/* Dark Theme - Map. */}
-      <ThemeProvider theme={darkTheme}>
-        <Paper elevation={0}>
-          <Box visibility={pathname !== '/map' ? 'hidden' : 'visible'}>
-            <Desktop initialState={values} />
-          </Box>
-        </Paper>
-      </ThemeProvider>
+      <StyledEngineProvider injectFirst>
+        <ThemeProvider theme={darkTheme}>
+          <Paper elevation={0}>
+            <Box visibility={pathname !== '/map' ? 'hidden' : 'visible'}>
+              <Desktop initialState={values} />
+            </Box>
+          </Paper>
+        </ThemeProvider>
+      </StyledEngineProvider>
 
       {/* Default theme - Everything else. */}
-      <ThemeProvider theme={theme}>
-        <Paper elevation={0}>
-          <Switch>
-            <Route path="/dashboard-overview" component={DashboardOverview} />
-            <Route
-              path="/dashboard-comparison"
-              component={DashboardComparison}
-            />
-            <Route path="/privacy" component={Privacy} />
-            <Route path="/faqs" component={Faqs} />
-            <Route path="/research" component={Research} />
-            <Route path="/about" component={About} />
-            <Route path="/contact" component={Contact} />
-            <Route path="/">
-              <Redirect to={`map${search}`} />
-            </Route>
-          </Switch>
-          <ContentBottom />
-        </Paper>
-      </ThemeProvider>
+      <StyledEngineProvider injectFirst>
+        <ThemeProvider theme={theme}>
+          <Paper elevation={0}>
+            <Routes>
+              <Route path="/dashboard-overview" element={<DashboardOverview />} />
+              <Route
+                path="/dashboard-comparison"
+                element={<DashboardComparison />}
+              />
+              <Route path="/privacy" element={<Privacy />} />
+              <Route path="/faqs" element={<Faqs />} />
+              <Route path="/research" element={<Research />} />
+              <Route path="/about" element={<About />} />
+              <Route path="/contact" element={<Contact />} />
+              <Route path="/" element={<Navigate to={`map${search}`} />} />
+            </Routes>
+            <ContentBottom />
+          </Paper>
+        </ThemeProvider>
+      </StyledEngineProvider>
     </>
   );
 }

components/Dashboards/DashboardComparison.jsx

@@ -4,7 +4,7 @@ import ContentBody from '@components/common/ContentBody';
 // import ddbh from '@utils/duckDbHelpers.js';
 // import DbContext from '@db/DbContext';
 
-const DashboardComparison = () => {
+function DashboardComparison() {
   const isMapLoading = useSelector(state => state.data.isMapLoading);
 
   if (isMapLoading) return null;
@@ -15,6 +15,6 @@ const DashboardComparison = () => {
       <h1>Welcome to the future of Dashboard Comparison</h1>
     </ContentBody>
   );
-};
+}
 
 export default DashboardComparison;

components/Dashboards/layouts/QuadLayout.jsx

@@ -1,25 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Grid } from '@material-ui/core';
+import { Grid } from '@mui/material';
 
-const QuadLayout = ({
+function QuadLayout({
   quadrant1, quadrant2, quadrant3, quadrant4,
-}) => (
-  <Grid container spacing={3}>
-    <Grid item xs={12} sm={6} md={3}>
-      {quadrant1}
+}) {
+  return (
+    <Grid container spacing={3}>
+      <Grid item xs={12} sm={6} md={3}>
+        {quadrant1}
+      </Grid>
+      <Grid item xs={12} sm={6} md={3}>
+        {quadrant2}
+      </Grid>
+      <Grid item xs={12} sm={6} md={3}>
+        {quadrant3}
+      </Grid>
+      <Grid item xs={12} sm={6} md={3}>
+        {quadrant4}
+      </Grid>
     </Grid>
-    <Grid item xs={12} sm={6} md={3}>
-      {quadrant2}
-    </Grid>
-    <Grid item xs={12} sm={6} md={3}>
-      {quadrant3}
-    </Grid>
-    <Grid item xs={12} sm={6} md={3}>
-      {quadrant4}
-    </Grid>
-  </Grid>
-);
+  );
+}
 
 QuadLayout.propTypes = {
   quadrant1: PropTypes.element.isRequired,

components/Dashboards/widgets/TotalByDayOfWeek.jsx

@@ -1,20 +1,22 @@
 import React from 'react';
 import PropTypes from 'proptypes';
 
-const TotalByDayOfWeek = ({ data }) => (
-  <>
-    <div>Total Requests by Day of The Week</div>
-    {
+function TotalByDayOfWeek({ data }) {
+  return (
+    <>
+      <div>Total Requests by Day of The Week</div>
+      {
       // Observable code goes here
       // https://observablehq.com/d/8236de092b1f9523#cell-237
-    }
-    <ul>
-      {data?.map(request => (
-        <li key={request.SRNumber}>{request.SRNumber}</li>
-      ))}
-    </ul>
-  </>
-);
+      }
+      <ul>
+        {data?.map(request => (
+          <li key={request.SRNumber}>{request.SRNumber}</li>
+        ))}
+      </ul>
+    </>
+  );
+}
 
 TotalByDayOfWeek.propTypes = {
   data: PropTypes.arrayOf(PropTypes.shape({})).isRequired,

components/DateSelector/DateRanges.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const DateRanges = ({
+function DateRanges({
   options, onSelect, dates, classes,
-}) => {
+}) {
   function highlightIfSelected(optionDays, selectedDays) {
     if (dates.length > 0) {
       const [from, to, start, end] = [
@@ -38,7 +38,7 @@ const DateRanges = ({
         : null}
     </div>
   );
-};
+}
 
 const {
   func, arrayOf, shape, string,