feat: deal with react 18 update bugs

packages/webpage-refactor/components/advancedOptions/comparisonsChanger.js

@@ -63,9 +63,8 @@ export function ComparisonsChanger({
     }
   };
 
-  useEffect(async () => {
+  useEffect(() => {
     setValue(JSON.stringify(links, null, 4));
-    return () => console.log("cleanup");
   }, [links]);
 
   return (

packages/webpage-refactor/components/graph/graph.js

@@ -191,22 +191,23 @@ export function Graph({
     // necessary for themes like spread, which have
     // a confusing animation at the beginning
   };
-  useEffect(async () => {
+  useEffect(() => {
-    await callEffect({
+    callEffect({
       listOfElements,
       links,
       isListOrdered,
       listAfterMergeSort,
     });
-    return () => console.log("cleanup");
   }, [listOfElements, links, isListOrdered, listAfterMergeSort]);
 
-  useEffect(async () => {
+  useEffect(() => {
-    cs.edges().on("click", (event) => {
+    if (cs != null) {
-      let edge = event.target;
+      cs.edges().on("click", (event) => {
-      alert(JSON.stringify(edge.json()));
+        let edge = event.target;
-    });
+        alert(JSON.stringify(edge.json()));
-  });
+      });
+    }
+  }, [cs]);
   return (
     <div className="">
       <div className={visibility + "grid grid-cols-1 place-items-center "}>

packages/webpage-refactor/components/resultsTable.js

@@ -67,19 +67,22 @@ export function ResultsTable({ isListOrdered, listAfterMergeSort, links }) {
   const [isTableComputed, setIsTableComputed] = useState(false);
   const [tableContents, setTableContents] = useState([]);
 
-  useEffect(async () => {
+  useEffect(() => {
-    if (isListOrdered && listAfterMergeSort.length > 0) {
+    let iAsync = async () => {
-      // both comparisons aren't strictly necessary,
+      if (isListOrdered && listAfterMergeSort.length > 0) {
-      // but it bit me once, so I'm leaving it
+        // both comparisons aren't strictly necessary,
-      let tableContentsResult = await fullResultsTable({
+        // but it bit me once, so I'm leaving it
-        listAfterMergeSort,
+        let tableContentsResult = await fullResultsTable({
-        links,
+          listAfterMergeSort,
-      });
+          links,
-      console.log(tableContentsResult);
+        });
-      setTableContents(tableContentsResult);
+        console.log(tableContentsResult);
-      setIsTableComputed(true);
+        setTableContents(tableContentsResult);
-    }
+        setIsTableComputed(true);
-    return () => console.log("cleanup");
+      }
+      return () => console.log("cleanup");
+    };
+    iAsync();
   }, [isListOrdered, listAfterMergeSort, links]);
 
   return !(isListOrdered && isTableComputed) ? (

packages/webpage-refactor/package.json

@@ -20,10 +20,10 @@
     "cytoscape-spread": "^3.0.0",
     "next": "latest",
     "path": "^0.12.7",
-    "react": "^17.0.1",
+    "react": "^18.0.1",
     "react-code-blocks": "^0.0.9-0",
     "react-compound-slider": "^3.3.1",
-    "react-dom": "17.0.1",
+    "react-dom": "^18.0.1",
     "react-markdown": "^6.0.2",
     "remark-gfm": "^1.0.0",
     "simple-react-cytoscape": "^1.0.4",

packages/webpage-refactor/yarn.lock

@@ -3414,14 +3414,13 @@ react-compound-slider@^3.3.1:
     d3-array "^2.8.0"
     warning "^4.0.3"
 
-react-dom@17.0.1:
+react-dom@^18.0.1:
-  version "17.0.1"
+  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
-  integrity sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug==
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
+    scheduler "^0.23.0"
-    scheduler "^0.20.1"
 
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
@@ -3473,13 +3472,12 @@ react-transition-group@^4.4.2:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react@^17.0.1:
+react@^18.0.1:
-  version "17.0.2"
+  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
-  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 readable-stream@^2.1.4:
   version "2.3.7"
@@ -3634,13 +3632,12 @@ safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
-scheduler@^0.20.1:
+scheduler@^0.23.0:
-  version "0.20.2"
+  version "0.23.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
-  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 seedrandom@^3.0.5:
   version "3.0.5"