Fix web (#900)

robbydyer · Feb 26, 2024 · 68489d7 · 68489d7
1 parent b4511f6
commit 68489d7
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 66 deletions.
diff --git a/script/web-build b/script/web-build
@@ -6,9 +6,7 @@ ROOT="$(dirname $( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd
 cd "${ROOT}"
 source script/common
 IN_DOCKER="${IN_DOCKER:-no}"
-VERSION="${VERSION:-devbuild}"
-DEB_BUILD="${DEB_BUILD:-no}"
-DO_WEB="${SKIP_WEB:-yes}"
+DO_INSTALL="${DO_INSTALL:-yes}"
 
 BUILDARCH="${BUILDARCH:-$(uname -m)}"
 
@@ -17,8 +15,7 @@ img=$(latestpibuilder ${BUILDARCH})
 if [ "${IN_DOCKER}" = "no" ]; then
   docker run -t --rm \
     -e IN_DOCKER=yes \
-    -e BUILDARCH="${BUILDARCH}" \
-    -e VERSION="${VERSION}" \
+    -e DO_INSTALL="${DO_INSTALL}" \
     -v "${ROOT}":/app \
     -w /app \
     ${img} \
@@ -30,7 +27,11 @@ fi
 # Everything below is inside docker
 . ~/.bashrc
 cd /app/web
-npm install
+
+if [ "${DO_INSTALL}" = "yes" ]; then
+  nvm install
+  npm install
+fi
 npm run build
 [ ! -d /app/internal/sportsmatrix/assets ] && mkdir -p /app/internal/sportsmatrix/assets
 [ -d /app/internal/sportsmatrix/assets/web ] && rm -rf /app/internal/sportsmatrix/assets/web

diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -8,8 +8,8 @@
     "@testing-library/user-event": "^14.5.2",
     "ansi-html": "npm:ansi-html-community@^0.0.8",
     "ansi-regex": ">=5.0.1",
-    "bootstrap": "^5.3.3",
-    "browserslist": "^4.23.0",
+    "bootstrap": "^5.3.2",
+    "browserslist": "^4.22.3",
     "btoa": "^1.2.1",
     "color-string": "^1.9.1",
     "dns-packet": "^5.6.1",
@@ -22,23 +22,23 @@
     "is-svg": ">=5.0.0",
     "json-schema": ">=0.4.0",
     "lodash": ">=4.17.21",
-    "nanoid": "^5.0.6",
+    "nanoid": "^5.0.5",
     "node-fetch": ">=3.3.2",
     "node-forge": "^1.3.1",
     "normalize-url": ">=8.0.0",
     "nth-check": "^2.1.1",
     "path-parse": ">=1.0.7",
-    "postcss": "^8.4.35",
+    "postcss": "^8.4.34",
     "react": ">=18.0.0",
-    "react-bootstrap": "^2.10.1",
+    "react-bootstrap": "^2.10.0",
     "react-dev-utils": ">=11.0.4",
     "react-dom": ">=18.0.0",
     "react-router-dom": ">=6.0.0",
     "react-scripts": ">=5.0.1",
     "set-value": ">=4.0.1",
-    "swagger-ui": "^5.11.8",
-    "swagger-ui-dist": "^5.11.8",
-    "swagger-ui-react": "^5.11.8",
+    "swagger-ui": "^5.11.2",
+    "swagger-ui-dist": "^5.11.2",
+    "swagger-ui-react": "^5.11.2",
     "tar": ">=6.2.0",
     "tmpl": ">=1.0.5",
     "url-parse": ">=1.5.9",

diff --git a/web/src/App.js b/web/src/App.js
@@ -7,7 +7,7 @@ import Board from './Board.js';
 import TopNav from './Nav.js';
 import All from './All.js';
 import BasicBoard from './BasicBoard';
-import { BrowserRouter as Router, Route } from 'react-router-dom';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import SwaggerUI from 'swagger-ui-react';
 import "swagger-ui-react/swagger-ui.css";
 import swag from './matrix.swagger.json';
@@ -16,36 +16,38 @@ class App extends React.Component {
   render() {
     return (
       <>
-        <Router>
+        <BrowserRouter>
           <TopNav />
-          <Route path="/" exact component={All} />
-          <Route path="/mlb" render={() => <Sport sport="mlb" id="mlb" key="mlb" withImg="true" />} />
-          <Route path="/ncaaf" render={() => <Sport sport="ncaaf" id="ncaaf" key="ncaaf" withImg="true" />} />
-          <Route path="/nhl" render={() => <Sport sport="nhl" id="nhl" key="nhl" withImg="true" />} />
-          <Route path="/ncaam" render={() => <Sport sport="ncaam" id="ncaam" key="ncaam" withImg="true" />} />
-          <Route path="/nfl" render={() => <Sport sport="nfl" id="nfl" key="nfl" withImg="true" />} />
-          <Route path="/nba" render={() => <Sport sport="nba" id="nba" key="nba" withImg="true" />} />
-          <Route path="/mls" render={() => <Sport sport="mls" id="mls" key="mls" withImg="true" />} />
-          <Route path="/epl" render={() => <Sport sport="epl" id="epl" key="epl" withImg="true" />} />
-          <Route path="/dfl" render={() => <Sport sport="dfl" id="dfl" key="dfl" withImg="true" />} />
-          <Route path="/dfb" render={() => <Sport sport="dfb" id="dfb" key="dfb" withImg="true" />} />
-          <Route path="/uefa" render={() => <Sport sport="uefa" id="uefa" key="uefa" withImg="true" />} />
-          <Route path="/fifa" render={() => <Sport sport="fifa" id="fifa" key="fifa" withImg="true" />} />
-          <Route path="/pga" render={() => <BasicBoard id="pga" name="pga" key="pga" path="stat/pga" withImg="true" />} />
-          <Route path="/img" render={() => <ImageBoard withImg="true" />} />
-          <Route path="/clock" render={() => <BasicBoard id="clock" name="clock" key="clock" withImg="true" />} />
-          <Route path="/sys" render={() => <BasicBoard id="sys" name="sys" key="sys" withImg="true" />} />
-          <Route path="/gcal" render={() => <BasicBoard id="gcal" name="gcal" key="gcal" withImg="true" />} />
-          <Route path="/board" exact component={Board} />
-          <Route path="/docs" exact component={() => <SwaggerUI spec={swag} />} />
-          <Route path="/f1" exact component={() => <Racing sport="f1" id="f1" key="f1" withImg="true" />} />
-          <Route path="/irl" exact component={() => <Racing sport="irl" id="irl" key="irl" withImg="true" />} />
-          <Route path="/ncaaw" render={() => <Sport sport="ncaaw" id="ncaaw" key="ncaaw" withImg="true" />} />
-          <Route path="/wnba" render={() => <Sport sport="wnba" id="wnba" key="wnba" withImg="true" />} />
-          <Route path="/ligue" render={() => <Sport sport="ligue" id="ligue" key="ligue" withImg="true" />} />
-          <Route path="/seriea" render={() => <Sport sport="seriea" id="seriea" key="seriea" withImg="true" />} />
-          <Route path="/laliga" render={() => <Sport sport="laliga" id="laliga" key="laliga" withImg="true" />} />
-        </Router>
+          <Routes>
+            <Route path="/" element={<All />} />
+            <Route path="/mlb" render={() => <Sport sport="mlb" id="mlb" key="mlb" withImg="true" />} />
+            <Route path="/ncaaf" render={() => <Sport sport="ncaaf" id="ncaaf" key="ncaaf" withImg="true" />} />
+            <Route path="/nhl" render={() => <Sport sport="nhl" id="nhl" key="nhl" withImg="true" />} />
+            <Route path="/ncaam" render={() => <Sport sport="ncaam" id="ncaam" key="ncaam" withImg="true" />} />
+            <Route path="/nfl" render={() => <Sport sport="nfl" id="nfl" key="nfl" withImg="true" />} />
+            <Route path="/nba" render={() => <Sport sport="nba" id="nba" key="nba" withImg="true" />} />
+            <Route path="/mls" render={() => <Sport sport="mls" id="mls" key="mls" withImg="true" />} />
+            <Route path="/epl" render={() => <Sport sport="epl" id="epl" key="epl" withImg="true" />} />
+            <Route path="/dfl" render={() => <Sport sport="dfl" id="dfl" key="dfl" withImg="true" />} />
+            <Route path="/dfb" render={() => <Sport sport="dfb" id="dfb" key="dfb" withImg="true" />} />
+            <Route path="/uefa" render={() => <Sport sport="uefa" id="uefa" key="uefa" withImg="true" />} />
+            <Route path="/fifa" render={() => <Sport sport="fifa" id="fifa" key="fifa" withImg="true" />} />
+            <Route path="/pga" render={() => <BasicBoard id="pga" name="pga" key="pga" path="stat/pga" withImg="true" />} />
+            <Route path="/img" render={() => <ImageBoard withImg="true" />} />
+            <Route path="/clock" render={() => <BasicBoard id="clock" name="clock" key="clock" withImg="true" />} />
+            <Route path="/sys" render={() => <BasicBoard id="sys" name="sys" key="sys" withImg="true" />} />
+            <Route path="/gcal" render={() => <BasicBoard id="gcal" name="gcal" key="gcal" withImg="true" />} />
+            <Route path="/board" exact component={Board} />
+            <Route path="/docs" exact component={() => <SwaggerUI spec={swag} />} />
+            <Route path="/f1" exact component={() => <Racing sport="f1" id="f1" key="f1" withImg="true" />} />
+            <Route path="/irl" exact component={() => <Racing sport="irl" id="irl" key="irl" withImg="true" />} />
+            <Route path="/ncaaw" render={() => <Sport sport="ncaaw" id="ncaaw" key="ncaaw" withImg="true" />} />
+            <Route path="/wnba" render={() => <Sport sport="wnba" id="wnba" key="wnba" withImg="true" />} />
+            <Route path="/ligue" render={() => <Sport sport="ligue" id="ligue" key="ligue" withImg="true" />} />
+            <Route path="/seriea" render={() => <Sport sport="seriea" id="seriea" key="seriea" withImg="true" />} />
+            <Route path="/laliga" render={() => <Sport sport="laliga" id="laliga" key="laliga" withImg="true" />} />
+          </Routes>
+        </BrowserRouter>
         <hr />
       </>
     );

diff --git a/web/src/Nav.js b/web/src/Nav.js
@@ -36,7 +36,7 @@ class TopNav extends React.Component {
     render() {
         return (
             <Container fluid>
-                <Navbar expand="sm" bg="dark" variant="dark" hidden={this.props.location.pathname === "/board" ? true : false}>
+                <Navbar expand="sm" bg="dark" variant="dark" hidden={window.location.pathname === "/board" ? true : false}>
                     <Navbar.Brand>SportsMatrix</Navbar.Brand>
                     <Navbar.Toggle aria-controls="basic-navbar-nav"></Navbar.Toggle>
                     <Navbar.Collapse id="basic-navbar-nav">

diff --git a/web/src/index.js b/web/src/index.js
@@ -1,18 +1,9 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 //import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
 import 'bootstrap/dist/css/bootstrap.min.css';
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+import { createRoot } from 'react-dom/client';
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(<App />);