Upgrade Dependencies - React 18

.node-version

@@ -1 +1 @@
-12
+v16.17.0

.nvmrc

@@ -0,0 +1 @@
+lts/gallium

package.json

@@ -1,26 +1,33 @@
 {
   "name": "jsnes-web",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "license": "Apache-2.0",
   "private": true,
   "dependencies": {
-    "bootstrap": "4.2.1",
-    "jsnes": "git://github.com/bfirsh/jsnes.git",
-    "node-sass": "^4.13.1",
-    "prop-types": "^15.7.2",
+    "bootstrap": "5.2.0",
+    "jsnes": "git+ssh://[email protected]/bfirsh/jsnes.git",
+    "prop-types": "^15.8.1",
     "raven-js": "^3.27.2",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
-    "react-ga": "^2.5.7",
-    "react-router-dom": "^5.0.0",
-    "reactstrap": "^7.1.0",
-    "ringbufferjs": "^1.1.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-ga": "^3.3.1",
+    "react-router-dom": "^6.3.0",
+    "reactstrap": "^9.1.3",
+    "ringbufferjs": "^1.1.0",
+    "sass": "^1.54.5"
   },
   "devDependencies": {
-    "canvas": "^2.6.1",
+    "canvas": "^2.9.3",
     "prettier": "^1.16.4",
     "prettier-check": "^2.0.0",
-    "react-scripts": "3.4.1"
+    "react-scripts": "5.0.1",
+    "@svgr/webpack": "^6.3.1"
+  },
+  "overrides": {
+    "@svgr/webpack": "$@svgr/webpack"
+  },
+  "resolutions": {
+    "@svgr/webpack": "^6.3.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import GoogleAnalytics from "react-ga";
-import { BrowserRouter, Route } from "react-router-dom";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
 import ListPage from "./ListPage";
 import RunPage from "./RunPage";
 import config from "./config";
@@ -31,10 +31,12 @@ class App extends Component {
     return (
       <BrowserRouter>
         <div className="App">
-          <Route exact path="/" component={ListPage} />
-          <Route exact path="/run" component={RunPage} />
-          <Route exact path="/run/:slug" component={RunPage} />
-          <Route path="/" render={this.recordPageview} />
+          <Routes>
+            <Route exact path="/" element={<ListPage />} />
+            <Route path="/run/:slug" element={<RunPage />} />
+            <Route path="/run" element={<RunPage />} />
+            <Route path="/" element={this.recordPageview} />
+          </Routes>
         </div>
       </BrowserRouter>
     );

src/ListPage.css

@@ -1,3 +1,15 @@
+.ListPage {
+  padding-bottom: 1.5rem!important;
+}
+
+.ListPage .list-group-item {
+  position: relative;
+  display: block;
+  padding: 0.75rem 1.25rem;
+  background-color: #000;
+  border: 1px solid #dee2e6;
+}
+
 .ListPage .list-group-item .delete {
   color: red;
   margin-left: 0.8em;

src/ListPage.js

@@ -43,7 +43,7 @@ class ListPage extends Component {
                       className="list-group-item"
                     >
                       {config.ROMS[key]["name"]}
-                      <span className="float-right">&rsaquo;</span>
+                      <span className="float-end">&rsaquo;</span>
                     </Link>
                   ))}
               </ListGroup>
@@ -77,7 +77,7 @@ class ListPage extends Component {
                           >
                             &times;
                           </span>
-                          <span className="float-right">&rsaquo;</span>
+                          <span className="float-end">&rsaquo;</span>
                         </Link>
                       ))}
                   </ListGroup>

src/ListPage.test.js

@@ -1,16 +1,15 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import { StaticRouter, Route } from "react-router-dom";
+import {createRoot} from "react-dom/client";
+import { Routes, Route } from "react-router-dom";
 import ListPage from "./ListPage";
 
 describe("ListPage", () => {
   it("renders without crashing", () => {
     const div = document.createElement("div");
-    ReactDOM.render(
-      <StaticRouter location="/" context={{}}>
+    const root = createRoot(div)
+    root.render(
+      <Routes location="/" context={{}}>
         <Route exact path="/" component={ListPage} />
-      </StaticRouter>,
-      div
+      </Routes>
     );
   });
 });

src/RunPage.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import { Button, Progress } from "reactstrap";
-import { Link } from "react-router-dom";
+import { Link, useLocation, useParams } from "react-router-dom";
 
 import config from "./config";
 import ControlsModal from "./ControlsModal";
@@ -10,6 +10,12 @@ import { loadBinary } from "./utils";
 
 import "./RunPage.css";
 
+function withParams(Component) {
+  return props => (
+    <Component {...props} params={useParams()} location={useLocation()} />
+  );
+}
+
 /*
  * The UI for the emulator. Also responsible for loading ROM from URL or file.
  */
@@ -44,9 +50,9 @@ class RunPage extends Component {
               </Link>
             </li>
           </ul>
-          <ul className="navbar-nav ml-auto mr-auto">
+          <ul className="navbar-nav ms-auto me-auto">
             <li className="navitem">
-              <span className="navbar-text mr-3">{this.state.romName}</span>
+              <span className="navbar-text me-3">{this.state.romName}</span>
             </li>
           </ul>
           <ul className="navbar-nav" style={{ width: "200px" }}>
@@ -55,7 +61,7 @@ class RunPage extends Component {
                 outline
                 color="primary"
                 onClick={this.toggleControlsModal}
-                className="mr-3"
+                className="me-3"
               >
                 Controls
               </Button>
@@ -134,8 +140,9 @@ class RunPage extends Component {
   }
 
   load = () => {
-    if (this.props.match.params.slug) {
-      const slug = this.props.match.params.slug;
+    console.log("load");
+    if (this.props.params.slug) {
+      const slug = this.props.params.slug;
       const isLocalROM = /^local-/.test(slug);
       const romHash = slug.split("-")[1];
       const romInfo = isLocalROM
@@ -205,4 +212,4 @@ class RunPage extends Component {
   };
 }
 
-export default RunPage;
+export default withParams(RunPage);

src/RunPage.test.js

@@ -1,16 +1,16 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import { StaticRouter, Route } from "react-router-dom";
+import {createRoot} from "react-dom/client";
+import { Routes, Route } from "react-router-dom";
 import RunPage from "./RunPage";
 
 describe("RunPage", () => {
   it("renders without crashing", () => {
     const div = document.createElement("div");
-    ReactDOM.render(
-      <StaticRouter location="/roms/foo.nes" context={{}}>
+    const root = createRoot(div);
+
+    root.render(
+      <Routes location="/roms/foo.nes" context={{}}>
         <Route exact path="/run/:rom" component={RunPage} />
-      </StaticRouter>,
-      div
+      </Routes>
     );
   });
 });

src/index.js

@@ -1,6 +1,6 @@
 import Raven from "raven-js";
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import App from "./App";
 import config from "./config";
 import "./index.scss";
@@ -10,5 +10,7 @@ if (config.SENTRY_URI) {
 }
 
 Raven.context(function() {
-  ReactDOM.render(<App />, document.getElementById("root"));
+  const container = document.getElementById("root");
+  const root = createRoot(container);
+  root.render(<App />);
 });

src/index.scss

@@ -12,9 +12,12 @@ $link-decoration: underline;
 $link-hover-color: $gray-500;
 $link-hover-decoration: underline;
 
-$theme-colors: map-merge($theme-colors, (
-  primary: $white,
-));
+$theme-colors: map-merge(
+  $theme-colors,
+  (
+    primary: $white
+  )
+);
 
 $list-group-bg: $black;
 $list-group-border-color: $gray-300;
@@ -39,8 +42,47 @@ $close-text-shadow: none;
   }
 }
 
-html, body, #root {
+html,
+body,
+#root {
   height: 100%;
+  color: #f8f9fa;
+}
+
+a:hover {
+  color: #adb5bd;
+}
+
+.navbar-text,
+.navbar-text a,
+.nav-link {
+  color: #f8f9fa;
+}
+
+.nav-link:focus {
+  color: #adb5bd !important;
+}
+
+.navbar-text a:focus,
+.navbar-text a:active,
+.navbar-text a:hover,
+.nav-link:hover {
+  color: #adb5bd;
+}
+.nav-link {
+  display: block;
+  padding: 0.5rem 1rem;
+}
+
+.navbar-nav .nav-link {
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+  flex-direction: row;
+}
+
+.navbar-expand {
+  padding-left: 16px;
+  padding-right: 16px;
 }
 
 .nav-link {
@@ -49,19 +91,35 @@ html, body, #root {
 
 .list-group-item {
   text-decoration: none;
+  color: #f8f9fa;
+}
+
+.list-group-item:hover {
+  text-decoration: none;
 }
 
 .table thead th {
   border-bottom: 2px solid white;
   border-top: none;
 }
 
+.table th,
+.table td {
+  padding: 0.75rem;
+  vertical-align: top;
+  border-top: 1px solid #212529;
+}
+
 .close {
   opacity: 1;
 }
 
 img.controller-icon {
-	width: 40px;
-	height: 40px;
+  width: 40px;
+  height: 40px;
   margin-top: -20px;
 }
+
+h1 {
+  font-size: 2.5rem;
+}