Upgrade to React 18 (#187)

* Upgrade React, Node, and linter * Change backend port to 8080 (#188) * Change backend port to 8080 * Run backend linter * Restore timer value * Add 8080 --------- Co-authored-by: Owen Sellner <[email protected]> --------- Co-authored-by: Owen Sellner <[email protected]>
uwblueprint · Apr 19, 2024 · e01294e · e01294e
1 parent c8ab20e
commit e01294e
Show file tree

Hide file tree

Showing 16 changed files with 6,596 additions and 8,429 deletions.
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -39,7 +39,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: "20.11.1"
           cache: "yarn"
           cache-dependency-path: |
             frontend/yarn.lock

diff --git a/backend/typescript/Dockerfile b/backend/typescript/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:14.15.5-slim
+FROM node:20.11.1-slim
 
 WORKDIR /app
 

diff --git a/backend/typescript/package.json b/backend/typescript/package.json
@@ -83,6 +83,6 @@
     "graphql-upload": "^11.0.0"
   },
   "engines": {
-    "node": "14.15.5"
+    "node": ">=20.11.1"
   }
 }
diff --git a/backend/typescript/yarn.lock b/backend/typescript/yarn.lock
@@ -551,14 +551,6 @@
     is-promise "4.0.0"
     tslib "~2.1.0"
 
-"@graphql-tools/merge@^8.2.1":
-  version "8.2.1"
-  resolved "https://registry.yarnpkg.com/@graphql-tools/merge/-/merge-8.2.1.tgz#bf83aa06a0cfc6a839e52a58057a84498d0d51ff"
-  integrity sha512-Q240kcUszhXiAYudjuJgNuLgy9CryDP3wp83NOZQezfA6h3ByYKU7xI6DiKrdjyVaGpYN3ppUmdj0uf5GaXzMA==
-  dependencies:
-    "@graphql-tools/utils" "^8.5.1"
-    tslib "~2.3.0"
-
 "@graphql-tools/schema@^7.0.0", "@graphql-tools/schema@^7.1.3":
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/@graphql-tools/schema/-/schema-7.1.3.tgz#d816400da51fbac1f0086e35540ab63b5e30e858"
@@ -567,16 +559,6 @@
     "@graphql-tools/utils" "^7.1.2"
     tslib "~2.1.0"
 
-"@graphql-tools/schema@^8.0.0":
-  version "8.3.1"
-  resolved "https://registry.yarnpkg.com/@graphql-tools/schema/-/schema-8.3.1.tgz#1ee9da494d2da457643b3c93502b94c3c4b68c74"
-  integrity sha512-3R0AJFe715p4GwF067G5i0KCr/XIdvSfDLvTLEiTDQ8V/hwbOHEKHKWlEBHGRQwkG5lwFQlW1aOn7VnlPERnWQ==
-  dependencies:
-    "@graphql-tools/merge" "^8.2.1"
-    "@graphql-tools/utils" "^8.5.1"
-    tslib "~2.3.0"
-    value-or-promise "1.0.11"
-
 "@graphql-tools/utils@^7.1.2", "@graphql-tools/utils@^7.7.0", "@graphql-tools/utils@^7.7.1":
   version "7.7.1"
   resolved "https://registry.yarnpkg.com/@graphql-tools/utils/-/utils-7.7.1.tgz#81f32cb4819b34b3a378d51ab2cd60935977f0b4"
@@ -595,13 +577,6 @@
     camel-case "4.1.2"
     tslib "~2.2.0"
 
-"@graphql-tools/utils@^8.0.0", "@graphql-tools/utils@^8.5.1":
-  version "8.6.1"
-  resolved "https://registry.yarnpkg.com/@graphql-tools/utils/-/utils-8.6.1.tgz#52c7eb108f2ca2fd01bdba8eef85077ead1bf882"
-  integrity sha512-uxcfHCocp4ENoIiovPxUWZEHOnbXqj3ekWc0rm7fUhW93a1xheARNHcNKhwMTR+UKXVJbTFQdGI1Rl5XdyvDBg==
-  dependencies:
-    tslib "~2.3.0"
-
 "@grpc/grpc-js@~1.2.0":
   version "1.2.10"
   resolved "https://registry.yarnpkg.com/@grpc/grpc-js/-/grpc-js-1.2.10.tgz#f316d29a45fcc324e923d593cb849d292b1ed598"
@@ -3611,16 +3586,6 @@ graphql-middleware@^6.0.6:
     "@graphql-tools/delegate" "^7.1.1"
     "@graphql-tools/schema" "^7.1.3"
 
-graphql-rate-limit-directive@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/graphql-rate-limit-directive/-/graphql-rate-limit-directive-2.0.0.tgz#cbebcaeefe5b4a0ac21e5981ccf6a5f2a292242b"
-  integrity sha512-+3HVJngzeWH7J8yTZ92Niu+9r8l7qCyyrXRe99DKvUdvaK3yC1qOVzja4aK7jctz31CECY6UC7Hvy3TJCWWD5Q==
-  dependencies:
-    "@graphql-tools/schema" "^8.0.0"
-    "@graphql-tools/utils" "^8.0.0"
-    graphql "^15.0.0"
-    rate-limiter-flexible "^2.0.0"
-
 graphql-rate-limit@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/graphql-rate-limit/-/graphql-rate-limit-3.3.0.tgz#241e3f6dc4cc3cbd139d63d40e2ce613f8485646"
@@ -3685,11 +3650,6 @@ graphql-upload@^12.0.0:
     isobject "^4.0.0"
     object-path "^0.11.5"
 
-graphql@^15.0.0:
-  version "15.8.0"
-  resolved "https://registry.yarnpkg.com/graphql/-/graphql-15.8.0.tgz#33410e96b012fa3bdb1091cc99a94769db212b38"
-  integrity sha512-5gghUc24tP9HRznNpV2+FIoq3xKkj5dTQqf4v0CpdPbFVwFkWoxOM+o+2OC9ZSvjEMTjfmG9QT+gcvggTwW1zw==
-
 graphql@^15.3.0:
   version "15.5.1"
   resolved "https://registry.yarnpkg.com/graphql/-/graphql-15.5.1.tgz#f2f84415d8985e7b84731e7f3536f8bb9d383aad"
@@ -5799,11 +5759,6 @@ range-parser@~1.2.1:
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
   integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
 
-rate-limiter-flexible@^2.0.0:
-  version "2.3.6"
-  resolved "https://registry.yarnpkg.com/rate-limiter-flexible/-/rate-limiter-flexible-2.3.6.tgz#b1a2549dca91069c8a33d57c08a27262c0356c60"
-  integrity sha512-8DVFOe89rreyut/vzwBI7vgXJynyYoYnH5XogtAKs0F/neAbCTTglXxSJ7fZeZamcFXZDvMidCBvps4KM+1srw==
-
 [email protected]:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.4.0.tgz#a1ce6fb9c9bc356ca52e89256ab59059e13d0332"
@@ -6679,7 +6634,7 @@ tslib@^2.0.3, tslib@~2.2.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.2.0.tgz#fb2c475977e35e241311ede2693cee1ec6698f5c"
   integrity sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==
 
-tslib@^2.1.0, tslib@^2.3.0, tslib@~2.3.0:
+tslib@^2.1.0, tslib@^2.3.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
   integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
@@ -6888,11 +6843,6 @@ validator@^10.11.0:
   resolved "https://registry.yarnpkg.com/validator/-/validator-10.11.0.tgz#003108ea6e9a9874d31ccc9e5006856ccd76b228"
   integrity sha512-X/p3UZerAIsbBfN/IwahhYaBbY68EN/UQBWHtsbXGT5bfrH/p4NQzUCG1kF/rtKaNpnJ7jAu6NGTdSNtyNIXMw==
 
-[email protected]:
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/value-or-promise/-/value-or-promise-1.0.11.tgz#3e90299af31dd014fe843fe309cefa7c1d94b140"
-  integrity sha512-41BrgH+dIbCFXClcSapVs5M6GkENd3gQOJpEfPDNa71LsUGMXDL0jMWpI/Rh7WhX+Aalfz2TTS3Zt5pUsbnhLg==
-
 vary@^1, vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"

diff --git a/frontend/.eslintrc.js b/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"],
 };
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:14.15.5-slim
+FROM node:20.11.1-slim
 
 WORKDIR /app
 

diff --git a/frontend/package.json b/frontend/package.json
@@ -13,8 +13,8 @@
     "@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.69",
+    "@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",
@@ -24,15 +24,15 @@
     "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"
@@ -63,13 +63,19 @@
       "last 1 safari version"
     ]
   },
+  "resolutions": {
+    "@types/react": "^18.2.69",
+    "@types/react-dom": "^18.2.19"
+  },
   "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"
   }
 }
diff --git a/frontend/src/APIClients/BaseAPIClient.ts b/frontend/src/APIClients/BaseAPIClient.ts
@@ -1,6 +1,6 @@
 import axios, { AxiosResponse, AxiosRequestConfig } from "axios";
 import { camelizeKeys, decamelizeKeys } from "humps";
-import jwt from "jsonwebtoken";
+import { jwtDecode } from "jwt-decode";
 
 import AUTHENTICATED_USER_KEY from "../constants/AuthConstants";
 import { setLocalStorageObjProperty } from "../utils/LocalStorageUtils";
@@ -35,7 +35,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 &&

diff --git a/frontend/src/APIClients/EntityAPIClient.ts b/frontend/src/APIClients/EntityAPIClient.ts
@@ -31,7 +31,7 @@ const create = async ({
   formData,
 }: {
   formData: EntityRequest | FormData;
-}): Promise<EntityResponse> => {
+}): Promise<EntityResponse | null> => {
   // auth {
   const bearerToken = `Bearer ${getLocalStorageObjProperty(
     AUTHENTICATED_USER_KEY,
@@ -50,11 +50,11 @@ const create = async ({
     // } no-auth
     return data;
   } catch (error) {
-    return error;
+    return null;
   }
 };
 
-const get = async (): Promise<EntityResponse[]> => {
+const get = async (): Promise<EntityResponse[] | null> => {
   // auth {
   const bearerToken = `Bearer ${getLocalStorageObjProperty(
     AUTHENTICATED_USER_KEY,
@@ -73,11 +73,11 @@ const get = async (): Promise<EntityResponse[]> => {
     // } no-auth
     return data;
   } catch (error) {
-    return error;
+    return null;
   }
 };
 
-const getFile = async (uuid: string): Promise<string> => {
+const getFile = async (uuid: string): Promise<string | null> => {
   // auth {
   const bearerToken = `Bearer ${getLocalStorageObjProperty(
     AUTHENTICATED_USER_KEY,
@@ -96,11 +96,11 @@ const getFile = async (uuid: string): Promise<string> => {
     // } no-auth
     return data.fileURL || data.fileUrl;
   } catch (error) {
-    return error;
+    return null;
   }
 };
 
-const getCSV = async (): Promise<string> => {
+const getCSV = async (): Promise<string | null> => {
   // auth {
   const bearerToken = `Bearer ${getLocalStorageObjProperty(
     AUTHENTICATED_USER_KEY,
@@ -127,7 +127,7 @@ const getCSV = async (): Promise<string> => {
     // } no-auth
     return data;
   } catch (error) {
-    return error;
+    return null;
   }
 };
 
@@ -138,7 +138,7 @@ const update = async (
   }: {
     entityData: EntityRequest | FormData;
   },
-): Promise<EntityResponse> => {
+): Promise<EntityResponse | null> => {
   // auth {
   const bearerToken = `Bearer ${getLocalStorageObjProperty(
     AUTHENTICATED_USER_KEY,
@@ -157,7 +157,7 @@ const update = async (
     // } no-auth
     return data;
   } catch (error) {
-    return error;
+    return null;
   }
 };
 

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -31,9 +31,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.

diff --git a/frontend/src/components/crud/CreateForm.tsx b/frontend/src/components/crud/CreateForm.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 // python {
-import { decamelizeKeys } from "humps";
+// import { decamelizeKeys } from "humps";
 // } python
 import { JSONSchema7 } from "json-schema";
 import { Form } from "@rjsf/bootstrap-4";

diff --git a/frontend/src/components/crud/UpdateForm.tsx b/frontend/src/components/crud/UpdateForm.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 // python {
-import { decamelizeKeys } from "humps";
+// import { decamelizeKeys } from "humps";
 // } python
 import { JSONSchema7 } from "json-schema";
 import { Form } from "@rjsf/bootstrap-4";

diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
@@ -1,9 +1,9 @@
 // graphql {
 import axios from "axios";
-import jwt from "jsonwebtoken";
+import { jwtDecode } from "jwt-decode";
 // } graphql
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 // graphql {
 import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
 import { setContext } from "@apollo/client/link/context";
@@ -41,7 +41,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 (
@@ -80,7 +80,7 @@ const apolloClient = new ApolloClient({
 });
 // } graphql
 
-ReactDOM.render(
+createRoot(document.getElementById("root") as HTMLElement).render(
   // graphql {
   <React.StrictMode>
     <ApolloProvider client={apolloClient}>
@@ -94,7 +94,6 @@ ReactDOM.render(
   //   <App />
   // </React.StrictMode>,
   // } rest
-  document.getElementById("root"),
 );
 
 // If you want to start measuring performance in your app, pass a function

diff --git a/frontend/src/react-app-env.d.ts b/frontend/src/react-app-env.d.ts
@@ -1 +1,2 @@
 /// <reference types="react-scripts" />
+declare module "react-dom/client";
diff --git a/frontend/src/utils/LocalStorageUtils.ts b/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;
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		/// <reference types="react-scripts" />
		declare module "react-dom/client";