Install Chakra UI

.github/workflows/lint.yml

@@ -35,7 +35,7 @@ jobs:
         if: steps.changes.outputs.frontend == 'true' || steps.changes.outputs.typescript-backend == 'true'
         uses: actions/setup-node@v2
         with:
-          node-version: "14.15.5"
+          node-version: "18.0.0"
           cache: "yarn"
           cache-dependency-path: |
             frontend/yarn.lock

backend/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:14.15.5-slim
+FROM node:18.0.0-slim
 
 WORKDIR /app
 

backend/package.json

@@ -80,6 +80,6 @@
     "graphql-upload": "^11.0.0"
   },
   "engines": {
-    "node": "14.15.5"
+    "node": "18.0.0"
   }
 }

frontend/.eslintrc.js

@@ -31,6 +31,7 @@ module.exports = {
     "react/no-array-index-key": "off",
     "jsx-a11y/click-events-have-key-events": "off",
     "jsx-a11y/no-static-element-interactions": "off",
+    "@typescript-eslint/no-useless-constructor": "off",
   },
   ignorePatterns: ["build/*"],
 };

frontend/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:14.15.5-slim
+FROM node:18.0.0-slim
 
 WORKDIR /app
 

frontend/package.json

@@ -4,6 +4,9 @@
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.3.16",
+    "@chakra-ui/react": "^2.8.2",
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
     "@rjsf/bootstrap-4": "^2.5.1",
     "@rjsf/core": "^2.5.1",
     "@testing-library/jest-dom": "^5.11.4",
@@ -13,26 +16,27 @@
     "@types/jest": "^26.0.15",
     "@types/json2csv": "^5.0.3",
     "@types/node": "^12.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^18.2.58",
+    "@types/react-dom": "^18.2.19",
     "@types/react-jsonschema-form": "^1.7.4",
     "@types/react-table": "^7.0.29",
     "apollo-upload-client": "^16.0.0",
     "axios": "^0.21.1",
     "bootstrap": "^4.6.0",
+    "framer-motion": "^11.0.5",
     "graphql": "^15.5.0",
     "humps": "^2.0.1",
     "json-schema": "^0.3.0",
     "json2csv": "^5.0.6",
-    "jsonwebtoken": "^8.5.1",
-    "react": "^17.0.1",
+    "jwt-decode": "^4.0.0",
+    "react": "^18.2.0",
     "react-bootstrap": "^1.5.2",
-    "react-dom": "^17.0.1",
+    "react-dom": "^18.2.0",
     "react-google-login": "^5.2.2",
     "react-json-schema": "^1.2.2",
     "react-jsonschema-form": "^1.8.1",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.2",
+    "react-scripts": "^5.0.1",
     "react-table": "^7.7.0",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"
@@ -65,11 +69,13 @@
   },
   "devDependencies": {
     "@types/humps": "^2.0.0",
-    "@types/jsonwebtoken": "^8.5.1",
+    "@types/jwt-decode": "^3.1.0",
     "@types/react-router-dom": "^5.1.7",
     "@types/react-test-renderer": "^17.0.1",
-    "@typescript-eslint/eslint-plugin": "^4.15.2",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
     "@typescript-eslint/parser": "^4.15.2",
+    "@typescript-eslint/typescript-estree": "^7.0.2",
+    "eslint": "^8.57.0",
     "eslint-config-airbnb-typescript": "^12.3.1",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-import": "^2.22.1",
@@ -78,6 +84,6 @@
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "prettier": "^2.2.1",
-    "react-test-renderer": "^17.0.2"
+    "react-test-renderer": "^18.2.0"
   }
 }

frontend/src/APIClients/BaseAPIClient.ts

@@ -1,5 +1,5 @@
 import axios, { AxiosRequestConfig } from "axios";
-import jwt from "jsonwebtoken";
+import { jwtDecode } from "jwt-decode";
 
 import AUTHENTICATED_USER_KEY from "../constants/AuthConstants";
 import { DecodedJWT } from "../types/AuthTypes";
@@ -19,7 +19,7 @@ baseAPIClient.interceptors.request.use(async (config: AxiosRequestConfig) => {
     authHeaderParts.length >= 2 &&
     authHeaderParts[0].toLowerCase() === "bearer"
   ) {
-    const decodedToken = jwt.decode(authHeaderParts[1]) as DecodedJWT;
+    const decodedToken = jwtDecode(authHeaderParts[1]) as DecodedJWT;
 
     if (
       decodedToken &&

frontend/src/APIClients/EntityAPIClient.ts

@@ -42,7 +42,7 @@ const create = async ({
     });
     return data;
   } catch (error) {
-    return error;
+    return error as EntityResponse;
   }
 };
 
@@ -57,7 +57,7 @@ const get = async (): Promise<EntityResponse[]> => {
     });
     return data;
   } catch (error) {
-    return error;
+    return error as EntityResponse[];
   }
 };
 
@@ -73,7 +73,7 @@ const getFile = async (uuid: string): Promise<string> => {
 
     return data.fileURL;
   } catch (error) {
-    return error;
+    return error as string;
   }
 };
 
@@ -92,7 +92,7 @@ const getCSV = async (): Promise<string> => {
 
     return data;
   } catch (error) {
-    return error;
+    return error as string;
   }
 };
 
@@ -114,7 +114,7 @@ const update = async (
     });
     return data;
   } catch (error) {
-    return error;
+    return error as EntityResponse;
   }
 };
 

frontend/src/APIClients/SimpleEntityAPIClient.ts

@@ -41,7 +41,7 @@ const create = async ({
     });
     return data;
   } catch (error) {
-    return error;
+    return error as SimpleEntityResponse;
   }
 };
 
@@ -56,7 +56,7 @@ const get = async (): Promise<SimpleEntityResponse[]> => {
     });
     return data;
   } catch (error) {
-    return error;
+    return error as SimpleEntityResponse[];
   }
 };
 
@@ -74,7 +74,7 @@ const getCSV = async (): Promise<string> => {
     });
     return data;
   } catch (error) {
-    return error;
+    return error as string;
   }
 };
 
@@ -100,7 +100,7 @@ const update = async (
     );
     return data;
   } catch (error) {
-    return error;
+    return error as SimpleEntityResponse;
   }
 };
 

frontend/src/App.tsx

@@ -32,9 +32,8 @@ const App = (): React.ReactElement => {
     AUTHENTICATED_USER_KEY,
   );
 
-  const [authenticatedUser, setAuthenticatedUser] = useState<AuthenticatedUser>(
-    currentUser,
-  );
+  const [authenticatedUser, setAuthenticatedUser] =
+    useState<AuthenticatedUser>(currentUser);
 
   // Some sort of global state. Context API replaces redux.
   // Split related states into different contexts as necessary.

frontend/src/components/auth/Login.tsx

@@ -42,17 +42,17 @@
   const isVerified = data?.isVerified;
 
   const onLogInClick = async () => {
-    if (!isVerified) {
-      window.alert(
-        "Failed to log in. Please check your email for a link to verify your account.",
-      );
-    }
     const user: AuthenticatedUser = await authAPIClient.login(
       email,
       password,
       login,
     );
     setAuthenticatedUser(user);
+    if (isVerified === false) {
+      window.alert(
+        "Failed to log in. Please check your email for a link to verify your account.",
+      );
+    }
   };
 
   const onSignUpClick = () => {

frontend/src/components/auth/Signup.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState, useEffect } from "react";
+import React, { useContext, useState } from "react";
 import { Redirect } from "react-router-dom";
 import { useMutation, useQuery } from "@apollo/client";
 

frontend/src/components/crud/SimpleEntityDisplayTableContainer.tsx

@@ -130,40 +130,41 @@ const SIMPLE_ENTITIESCSV = gql`
   }
 `;
 
-const SimpleEntityDisplayTableContainer: React.FC = (): React.ReactElement | null => {
-  const [entities, setEntities] = useState<EntityData[] | null>(null);
-
-  const apolloClient = useApolloClient();
-
-  useQuery(SIMPLE_ENTITIES, {
-    fetchPolicy: "cache-and-network",
-    onCompleted: (data) => {
-      setEntities(
-        data.simpleEntities.map((d: SimpleEntityResponse) => convert(d)),
-      );
-    },
-  });
-
-  const downloadEntitiesCSV = async () => {
-    if (entities) {
-      const { data } = await apolloClient.query({
-        query: SIMPLE_ENTITIESCSV,
-      });
-      downloadCSV(data.simpleEntitiesCSV, "export.csv");
-      // Use the following lines to download CSV using frontend CSV generation instead of API
-      // const csvString = await generateCSV<EntityData>({ data: entities });
-      // downloadCSV(csvString, "export.csv");
-    }
+const SimpleEntityDisplayTableContainer: React.FC =
+  (): React.ReactElement | null => {
+    const [entities, setEntities] = useState<EntityData[] | null>(null);
+
+    const apolloClient = useApolloClient();
+
+    useQuery(SIMPLE_ENTITIES, {
+      fetchPolicy: "cache-and-network",
+      onCompleted: (data) => {
+        setEntities(
+          data.simpleEntities.map((d: SimpleEntityResponse) => convert(d)),
+        );
+      },
+    });
+
+    const downloadEntitiesCSV = async () => {
+      if (entities) {
+        const { data } = await apolloClient.query({
+          query: SIMPLE_ENTITIESCSV,
+        });
+        downloadCSV(data.simpleEntitiesCSV, "export.csv");
+        // Use the following lines to download CSV using frontend CSV generation instead of API
+        // const csvString = await generateCSV<EntityData>({ data: entities });
+        // downloadCSV(csvString, "export.csv");
+      }
+    };
+
+    return (
+      <>
+        <button type="button" onClick={downloadEntitiesCSV}>
+          Download CSV
+        </button>
+        {entities && <SimpleEntityDisplayTable data={entities} />}
+      </>
+    );
   };
 
-  return (
-    <>
-      <button type="button" onClick={downloadEntitiesCSV}>
-        Download CSV
-      </button>
-      {entities && <SimpleEntityDisplayTable data={entities} />}
-    </>
-  );
-};
-
 export default SimpleEntityDisplayTableContainer;

frontend/src/index.tsx

@@ -1,11 +1,12 @@
 import axios from "axios";
-import jwt from "jsonwebtoken";
+import { jwtDecode } from "jwt-decode";
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
 import { createUploadLink } from "apollo-upload-client";
 import { setContext } from "@apollo/client/link/context";
 
+import { ChakraProvider } from "@chakra-ui/react";
 import AUTHENTICATED_USER_KEY from "./constants/AuthConstants";
 import { AuthenticatedUser, DecodedJWT } from "./types/AuthTypes";
 import {
@@ -36,7 +37,7 @@ const authLink = setContext(async (_, { headers }) => {
   >(AUTHENTICATED_USER_KEY, "accessToken");
 
   if (token) {
-    const decodedToken = jwt.decode(token) as DecodedJWT;
+    const decodedToken = jwtDecode(token) as DecodedJWT;
 
     // refresh if decodedToken has expired
     if (
@@ -74,13 +75,14 @@ const apolloClient = new ApolloClient({
   cache: new InMemoryCache(),
 });
 
-ReactDOM.render(
-  <React.StrictMode>
+const root = createRoot(document.getElementById("root") as HTMLElement);
+
+root.render(
+  <ChakraProvider>
     <ApolloProvider client={apolloClient}>
       <App />
     </ApolloProvider>
-  </React.StrictMode>,
-  document.getElementById("root"),
+  </ChakraProvider>,
 );
 
 // If you want to start measuring performance in your app, pass a function

frontend/src/react-app-env.d.ts

@@ -1 +1,2 @@
 /// <reference types="react-scripts" />
+declare module "react-dom/client";

frontend/src/utils/LocalStorageUtils.ts

@@ -31,9 +31,8 @@ export const setLocalStorageObjProperty = <O extends Record<string, string>>(
   property: string,
   value: string,
 ): void => {
-  const object: Record<string, string> | null = getLocalStorageObj<O>(
-    localStorageKey,
-  );
+  const object: Record<string, string> | null =
+    getLocalStorageObj<O>(localStorageKey);
 
   if (!object) return;