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

@@ -32,5 +32,5 @@ module.exports = {
     "jsx-a11y/click-events-have-key-events": "off",
     "jsx-a11y/no-static-element-interactions": "off",
   },
-  ignorePatterns: ["build/*"],
+  ignorePatterns: ["build/*", ".eslintrc.js"],
 };

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/parser": "^4.15.2",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/parser": "^7.0.0",
+    "@typescript-eslint/typescript-estree": "^7.0.2",
+    "eslint": "^8.56.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/AuthAPIClient.ts

@@ -102,6 +102,7 @@ const register = async (
     });
     user = result.data?.register ?? null;
     if (user) {
+      // eslint-disable-next-line no-alert
       window.alert(
         "Success! Please check your email for a link to verify your account.",
       );

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

@@ -31,7 +31,7 @@ const create = async ({
   formData,
 }: {
   formData: FormData;
-}): Promise<EntityResponse> => {
+}): Promise<EntityResponse | null> => {
   const bearerToken = `Bearer ${getLocalStorageObjProperty(
     AUTHENTICATED_USER_KEY,
     "accessToken",
@@ -42,11 +42,13 @@ const create = async ({
     });
     return data;
   } catch (error) {
-    return error;
+    // eslint-disable-next-line no-console
+    console.error(error);
+    return null;
   }
 };
 
-const get = async (): Promise<EntityResponse[]> => {
+const get = async (): Promise<EntityResponse[] | null> => {
   const bearerToken = `Bearer ${getLocalStorageObjProperty(
     AUTHENTICATED_USER_KEY,
     "accessToken",
@@ -57,11 +59,13 @@ const get = async (): Promise<EntityResponse[]> => {
     });
     return data;
   } catch (error) {
-    return error;
+    // eslint-disable-next-line no-console
+    console.error(error);
+    return null;
   }
 };
 
-const getFile = async (uuid: string): Promise<string> => {
+const getFile = async (uuid: string): Promise<string | null> => {
   const bearerToken = `Bearer ${getLocalStorageObjProperty(
     AUTHENTICATED_USER_KEY,
     "accessToken",
@@ -73,11 +77,13 @@ const getFile = async (uuid: string): Promise<string> => {
 
     return data.fileURL;
   } catch (error) {
-    return error;
+    // eslint-disable-next-line no-console
+    console.error(error);
+    return null;
   }
 };
 
-const getCSV = async (): Promise<string> => {
+const getCSV = async (): Promise<string | null> => {
   const bearerToken = `Bearer ${getLocalStorageObjProperty(
     AUTHENTICATED_USER_KEY,
     "accessToken",
@@ -92,7 +98,9 @@ const getCSV = async (): Promise<string> => {
 
     return data;
   } catch (error) {
-    return error;
+    // eslint-disable-next-line no-console
+    console.error(error);
+    return null;
   }
 };
 
@@ -103,7 +111,7 @@ const update = async (
   }: {
     entityData: FormData;
   },
-): Promise<EntityResponse> => {
+): Promise<EntityResponse | null> => {
   const bearerToken = `Bearer ${getLocalStorageObjProperty(
     AUTHENTICATED_USER_KEY,
     "accessToken",
@@ -114,7 +122,9 @@ const update = async (
     });
     return data;
   } catch (error) {
-    return error;
+    // eslint-disable-next-line no-console
+    console.error(error);
+    return null;
   }
 };
 

frontend/src/APIClients/SimpleEntityAPIClient.ts

@@ -30,7 +30,7 @@ const create = async ({
   formData,
 }: {
   formData: SimpleEntityRequest;
-}): Promise<SimpleEntityResponse> => {
+}): Promise<SimpleEntityResponse | null> => {
   const bearerToken = `Bearer ${getLocalStorageObjProperty(
     AUTHENTICATED_USER_KEY,
     "accessToken",
@@ -41,11 +41,13 @@ const create = async ({
     });
     return data;
   } catch (error) {
-    return error;
+    // eslint-disable-next-line no-console
+    console.error(error);
+    return null;
   }
 };
 
-const get = async (): Promise<SimpleEntityResponse[]> => {
+const get = async (): Promise<SimpleEntityResponse[] | null> => {
   const bearerToken = `Bearer ${getLocalStorageObjProperty(
     AUTHENTICATED_USER_KEY,
     "accessToken",
@@ -56,11 +58,13 @@ const get = async (): Promise<SimpleEntityResponse[]> => {
     });
     return data;
   } catch (error) {
-    return error;
+    // eslint-disable-next-line no-console
+    console.error(error);
+    return null;
   }
 };
 
-const getCSV = async (): Promise<string> => {
+const getCSV = async (): Promise<string | null> => {
   const bearerToken = `Bearer ${getLocalStorageObjProperty(
     AUTHENTICATED_USER_KEY,
     "accessToken",
@@ -74,7 +78,9 @@ const getCSV = async (): Promise<string> => {
     });
     return data;
   } catch (error) {
-    return error;
+    // eslint-disable-next-line no-console
+    console.error(error);
+    return null;
   }
 };
 
@@ -85,7 +91,7 @@ const update = async (
   }: {
     entityData: SimpleEntityRequest;
   },
-): Promise<SimpleEntityResponse> => {
+): Promise<SimpleEntityResponse | null> => {
   const bearerToken = `Bearer ${getLocalStorageObjProperty(
     AUTHENTICATED_USER_KEY,
     "accessToken",
@@ -100,7 +106,9 @@ const update = async (
     );
     return data;
   } catch (error) {
-    return error;
+    // eslint-disable-next-line no-console
+    console.error(error);
+    return null;
   }
 };
 

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,18 @@ const Login = (): React.ReactElement => {
   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 ((await isVerified) === false) {
+      // eslint-disable-next-line no-alert
+      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";