Upgrade to React 18

thewca · Jul 1, 2022 · 65a6f4c · 65a6f4c
1 parent 7e036f2
commit 65a6f4c
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 34 deletions.
diff --git a/tnoodle-ui/package.json b/tnoodle-ui/package.json
@@ -9,9 +9,9 @@
         "axios": "^0.27.2",
         "bootstrap": "^4.6.0",
         "lodash": "^4.17.21",
-        "react": "^17.0.2",
+        "react": "^18.1.0",
         "react-bootstrap": "^2.3.1",
-        "react-dom": "^17.0.2",
+        "react-dom": "^18.1.0",
         "react-icons": "^4.3.1",
         "react-redux": "^8.0.1",
         "react-scripts": "5.0.1",
@@ -60,7 +60,7 @@
         "@types/jest": "^27.4.1",
         "@types/lodash": "^4.14.182",
         "@types/node": "^17.0.31",
-        "@types/react": "^17.0.39",
+        "@types/react": "^18.0.8",
         "@types/react-dom": "^18.0.3",
         "prettier": "^2.6.2",
         "typescript": "^4.6.4"

diff --git a/tnoodle-ui/src/index.tsx b/tnoodle-ui/src/index.tsx
@@ -1,18 +1,17 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
 import App from "./App";
 import "./index.css";
 import store from "./main/redux/Store";
 import reportWebVitals from "./reportWebVitals";
 
-ReactDOM.render(
-    <React.StrictMode>
-        <Provider store={store}>
-            <App />
-        </Provider>
-    </React.StrictMode>,
-    document.getElementById("root")
+const root = createRoot(document.getElementById("root") as HTMLDivElement);
+
+root.render(
+    <Provider store={store}>
+        <App />
+    </Provider>
 );
 
 // If you want to start measuring performance in your app, pass a function

diff --git a/tnoodle-ui/src/main/components/SideBar.tsx b/tnoodle-ui/src/main/components/SideBar.tsx
@@ -27,6 +27,7 @@ import {
 import { defaultWcif } from "../util/wcif.util";
 import Loading from "./Loading";
 import "./SideBar.css";
+import Wcif from "../model/Wcif";
 
 const SideBar = () => {
     const [loadingUser, setLoadingUser] = useState(false);
@@ -93,7 +94,7 @@ const SideBar = () => {
     };
 
     const getAndCacheBestMbldAttempt = useCallback(
-        (wcif) => {
+        (wcif: Wcif) => {
             tnoodleApi.fetchBestMbldAttempt(wcif).then((response) => {
                 let attempted = response.data.attempted;
                 dispatch(
@@ -110,7 +111,7 @@ const SideBar = () => {
     );
 
     const getAndCacheSuggestedFmcTranslations = useCallback(
-        (wcif) => {
+        (wcif: Wcif) => {
             tnoodleApi.fetchSuggestedFmcTranslations(wcif).then((response) => {
                 dispatch(
                     addCachedObject({
@@ -128,7 +129,7 @@ const SideBar = () => {
     // In case we use competitionId from query params, it's not fetched.
     // We add it to the list.
     const maybeAddCompetition = useCallback(
-        (competitionId, competitionName) => {
+        (competitionId: string, competitionName: string) => {
             if (!competitions) {
                 return;
             }
@@ -149,7 +150,7 @@ const SideBar = () => {
     );
 
     const updateWcif = useCallback(
-        (wcif) => {
+        (wcif: Wcif) => {
             dispatch(setEditingStatus(false));
             dispatch(setWcif(wcif));
             dispatch(setCompetitionId(wcif.id));
@@ -160,7 +161,7 @@ const SideBar = () => {
     );
 
     const handleCompetitionSelection = useCallback(
-        (competitionId) => {
+        (competitionId: string) => {
             setQueryParameter("competitionId", competitionId);
 
             // For quick switching between competitions.

diff --git a/tnoodle-ui/tsconfig.json b/tnoodle-ui/tsconfig.json
@@ -14,7 +14,8 @@
         "resolveJsonModule": true,
         "isolatedModules": true,
         "noEmit": true,
-        "jsx": "react-jsx"
+        "jsx": "react-jsx",
+        "types": ["react/next", "react-dom/next"]
     },
     "include": ["src"]
 }
diff --git a/tnoodle-ui/yarn.lock b/tnoodle-ui/yarn.lock
@@ -2675,7 +2675,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@>=16.9.11", "@types/react@^17.0.39":
+"@types/react@*", "@types/react@>=16.9.11":
   version "17.0.40"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.40.tgz#dc010cee6254d5239a138083f3799a16638e6bad"
   integrity sha512-UrXhD/JyLH+W70nNSufXqMZNuUD2cXHu6UjCllC6pmOQgBX4SGXOH8fjRka0O0Ee0HrFxapDD8Bwn81Kmiz6jQ==
@@ -2693,6 +2693,15 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/react@^18.0.8":
+  version "18.0.8"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.8.tgz#a051eb380a9fbcaa404550543c58e1cf5ce4ab87"
+  integrity sha512-+j2hk9BzCOrrOSJASi5XiOyBbERk9jG5O73Ya4M0env5Ixi6vUNli4qy994AINcEF+1IEHISYFfIT4zwr++LKw==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/resolve@1.17.1":
   version "1.17.1"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6"
@@ -8234,14 +8243,13 @@ react-dev-utils@^12.0.1:
     strip-ansi "^6.0.1"
     text-table "^0.2.0"
 
-react-dom@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
-  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+react-dom@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.1.0.tgz#7f6dd84b706408adde05e1df575b3a024d7e8a2f"
+  integrity sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    scheduler "^0.20.2"
+    scheduler "^0.22.0"
 
 react-error-overlay@^6.0.11:
   version "6.0.11"
@@ -8355,13 +8363,12 @@ react-transition-group@^4.4.2:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
-  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+react@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890"
+  integrity sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 readable-stream@^2.0.1:
   version "2.3.7"
@@ -8688,13 +8695,12 @@ saxes@^5.0.1:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@^0.20.2:
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
-  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+scheduler@^0.22.0:
+  version "0.22.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.22.0.tgz#83a5d63594edf074add9a7198b1bae76c3db01b8"
+  integrity sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 schema-utils@2.7.0:
   version "2.7.0"