From a1fb0dd2ca25161552e810a21431880532b149cb Mon Sep 17 00:00:00 2001 From: NunoSempere Date: Mon, 20 Jun 2022 00:23:45 -0400 Subject: [PATCH] feat: deal with react 18 update bugs --- .../advancedOptions/comparisonsChanger.js | 3 +- .../components/graph/graph.js | 19 ++++++------ .../components/resultsTable.js | 29 ++++++++++--------- packages/webpage-refactor/package.json | 4 +-- packages/webpage-refactor/yarn.lock | 29 +++++++++---------- 5 files changed, 42 insertions(+), 42 deletions(-) diff --git a/packages/webpage-refactor/components/advancedOptions/comparisonsChanger.js b/packages/webpage-refactor/components/advancedOptions/comparisonsChanger.js index 46958e5..f511001 100644 --- a/packages/webpage-refactor/components/advancedOptions/comparisonsChanger.js +++ b/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 ( diff --git a/packages/webpage-refactor/components/graph/graph.js b/packages/webpage-refactor/components/graph/graph.js index 345d480..50c8c68 100644 --- a/packages/webpage-refactor/components/graph/graph.js +++ b/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 () => { - await callEffect({ + useEffect(() => { + callEffect({ listOfElements, links, isListOrdered, listAfterMergeSort, }); - return () => console.log("cleanup"); }, [listOfElements, links, isListOrdered, listAfterMergeSort]); - useEffect(async () => { - cs.edges().on("click", (event) => { - let edge = event.target; - alert(JSON.stringify(edge.json())); - }); - }); + useEffect(() => { + if (cs != null) { + cs.edges().on("click", (event) => { + let edge = event.target; + alert(JSON.stringify(edge.json())); + }); + } + }, [cs]); return (
diff --git a/packages/webpage-refactor/components/resultsTable.js b/packages/webpage-refactor/components/resultsTable.js index 6779a76..a5364df 100644 --- a/packages/webpage-refactor/components/resultsTable.js +++ b/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 () => { - if (isListOrdered && listAfterMergeSort.length > 0) { - // both comparisons aren't strictly necessary, - // but it bit me once, so I'm leaving it - let tableContentsResult = await fullResultsTable({ - listAfterMergeSort, - links, - }); - console.log(tableContentsResult); - setTableContents(tableContentsResult); - setIsTableComputed(true); - } - return () => console.log("cleanup"); + useEffect(() => { + let iAsync = async () => { + if (isListOrdered && listAfterMergeSort.length > 0) { + // both comparisons aren't strictly necessary, + // but it bit me once, so I'm leaving it + let tableContentsResult = await fullResultsTable({ + listAfterMergeSort, + links, + }); + console.log(tableContentsResult); + setTableContents(tableContentsResult); + setIsTableComputed(true); + } + return () => console.log("cleanup"); + }; + iAsync(); }, [isListOrdered, listAfterMergeSort, links]); return !(isListOrdered && isTableComputed) ? ( diff --git a/packages/webpage-refactor/package.json b/packages/webpage-refactor/package.json index f3b670c..a1545f3 100644 --- a/packages/webpage-refactor/package.json +++ b/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", diff --git a/packages/webpage-refactor/yarn.lock b/packages/webpage-refactor/yarn.lock index 9574f82..9c00b6e 100644 --- a/packages/webpage-refactor/yarn.lock +++ b/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: - version "17.0.1" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6" - integrity sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug== +react-dom@^18.0.1: + version "18.2.0" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d" + integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g== dependencies: loose-envify "^1.1.0" - object-assign "^4.1.1" - scheduler "^0.20.1" + scheduler "^0.23.0" 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: - 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.0.1: + version "18.2.0" + resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" + 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: - version "0.20.2" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91" - integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ== +scheduler@^0.23.0: + version "0.23.0" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe" + 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"