Upgrade things

- Upgrade React - Upgrade javacpp - Support macos-arm64: bytedeco/javacpp-presets#1069
kevinychen · Nov 5, 2023 · ceec4f7 · ceec4f7
1 parent 9633eb2
commit ceec4f7
Show file tree

Hide file tree

Showing 9 changed files with 5,619 additions and 7,621 deletions.
diff --git a/snap-app/package.json b/snap-app/package.json
@@ -4,11 +4,14 @@
   "private": true,
   "dependencies": {
     "classnames": "^2.3.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-github-corner": "^2.5.0",
-    "react-router-dom": "^5.3.0",
-    "react-scripts": "4.0.3"
+    "react-router-dom": "^6.18.0",
+    "react-scripts": "^5.0.1"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
   },
   "scripts": {
     "start": "REACT_APP_LOCAL=true react-scripts start",

diff --git a/snap-app/src/index.js b/snap-app/src/index.js
@@ -1,13 +1,13 @@
 import classNames from "classnames";
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from "react-dom/client";
 import GithubCorner from 'react-github-corner';
 import {
     BrowserRouter as Router,
-    Redirect,
-    Switch,
+    Navigate,
+    Routes,
     Route,
-    Link
+    Link,
 } from 'react-router-dom';
 import FindWords from './findwords';
 import Parser from './parser';
@@ -57,48 +57,24 @@ function Header({ mode }) {
 function App() {
     return <Router>
         <GithubCorner href="https://github.com/kevinychen/snap2" />
-        <Switch>
-            <Route path="/parser">
-                <Header mode="parser" />
-                <Parser />
-            </Route>
-            <Route path="/wordsearch">
-                <Header mode="wordsearch" />
-                <Wordsearch />
-            </Route>
-            <Route path="/solver">
-                <Header mode="solver" />
-                <Solver />
-            </Route>
-            <Route path="/findwords">
-                <Header mode="findwords" />
-                <FindWords />
-            </Route>
-            <Route path="/index.html">
-                <Redirect to="/" />
-            </Route>
-            <Route path="/document.html">
-                <Redirect to="/parser" />
-            </Route>
-            <Route path="/wordsearch.html">
-                <Redirect to="/wordsearch" />
-            </Route>
-            <Route path="/solver.html">
-                <Redirect to="/solver" />
-            </Route>
-            <Route path="/findwords.html">
-                <Redirect to="/findwords" />
-            </Route>
-            <Route path="/">
-                <Index />
-            </Route>
-        </Switch>
+        <Routes>
+            <Route path="/parser" element={<><Header mode="parser" /><Parser /></>} />
+            <Route path="/wordsearch" element={<><Header mode="wordsearch" /><Wordsearch /></>} i/>
+            <Route path="/solver" element={<><Header mode="solver" /><Solver /></>}/>
+            <Route path="/findwords" element={<><Header mode="findwords" /><FindWords /></>} />
+            <Route path="/index.html" element={<Navigate to="/" />} />
+            <Route path="/document.html" element={<Navigate to="/parser" />} />
+            <Route path="/wordsearch.html" element={<Navigate to="/wordsearch" />} />
+            <Route path="/solver.html" element={<Navigate to="/solver" />} />
+            <Route path="/findwords.html" element={<Navigate to="/findwords" />} />
+            <Route path="/" element={<Index />} />
+        </Routes>
     </Router>;
 }
 
-ReactDOM.render(
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
     <React.StrictMode>
         <App />
-    </React.StrictMode>,
-    document.getElementById('root')
+    </React.StrictMode>
 );
diff --git a/snap-app/src/solver/solver.js b/snap-app/src/solver/solver.js
@@ -1,8 +1,16 @@
 import React from "react";
-import { withRouter } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { postJson } from "../fetch";
 import "./solver.css";
 
+export const withRouter = Component => {
+	const Wrapper = props => {
+		const history = useNavigate();
+		return <Component history={history} {...props} />;
+	};
+	return Wrapper;
+};
+
 class Solver extends React.Component {
 
     constructor(props) {
@@ -18,7 +26,7 @@ class Solver extends React.Component {
 
     componentDidMount() {
         window.addEventListener("keyup", this.handleKey);
-        const searchParams = new URLSearchParams(this.props.location.search);
+        const searchParams = new URLSearchParams(this.props.location?.search);
         if (searchParams.get("r") === '1') {
             this.setState({
                 canRearrange: true

diff --git a/snap-app/src/wordsearch/wordsearch.js b/snap-app/src/wordsearch/wordsearch.js
@@ -26,7 +26,7 @@ export default class Wordsearch extends React.Component {
     componentDidMount() {
         const hash = window.location.hash.substr(1);
         if (hash !== '') {
-            this.setState({ ...JSON.parse(Buffer.from(hash, 'base64')) }, this.solve);
+            this.setState({ ...JSON.parse(atob(hash)) }, this.solve);
         }
     }
 
@@ -183,7 +183,7 @@ export default class Wordsearch extends React.Component {
 
     hashLocation() {
         const { grid, wordbank, boggle, highlightingAllWordbank, highlightingDifferentColors } = this.state;
-        window.location.hash = Buffer.from(JSON.stringify({ grid, wordbank, boggle, highlightingAllWordbank, highlightingDifferentColors })).toString('base64');
+        window.location.hash = btoa(JSON.stringify({ grid, wordbank, boggle, highlightingAllWordbank, highlightingDifferentColors }));
     }
 
     hashStringToColor(str) {