front: basic routing

- create some components
- update a bit of npm packages

webapp/package.json

@@ -3,13 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "fsevents": "^2.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
+    "react-router-dom": "^6.16.0",
+    "react-scripts": "^5.0.1",
+    "web-vitals": "^3.5.0"
   },
   "scripts": {
     "start": "react-scripts start",

webapp/src/App.css

@@ -2,15 +2,8 @@
   text-align: center;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+.Container {
+  text-align: center;
 }
 
 .App-header {
@@ -28,11 +21,3 @@
   color: #61dafb;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

webapp/src/App.js

@@ -1,29 +1,27 @@
 import './App.css';
 import Leaderboard from "./Leaderboard";
-import React, { useState, useEffect } from 'react';
+import React from 'react';
+import {
+  BrowserRouter,
+  Routes, //replaces "Switch" used till v5
+  Route,
+} from "react-router-dom";
+import Header from "./Header"
 
 function App() {
-  const [data, setData] = useState(null);
-
-  useEffect(() => {
-    fetch('/api/leaderboard')
-      .then((response) => response.json())
-      .then((data) => {
-        setData(data);
-      })
-      .catch((err) => {
-        console.log(err.message);
-      });
-  }, []);
 
   return (
     <div className="App">
-      <header className="App-header">
-      <h1>Leaderboard</h1>
-      {
-        data ? <Leaderboard hashmap={data} /> : <span>Loading...</span>
-      }
-      </header>
+      <BrowserRouter>
+        <Header/>
+        
+        <div className="Container">
+          <Routes>
+            <Route path="/leaderboard" element={<Leaderboard/>} />
+          </Routes>
+        </div>
+
+      </BrowserRouter>
     </div>
   );
 }

webapp/src/Header.js

@@ -0,0 +1,15 @@
+import { Link } from "react-router-dom";
+
+export default function Header() {
+    return (
+      <div>
+        <h1>CordaCheckers</h1>
+        <nav>
+          <Link to="/leaderboard">Leaderboard</Link> {"| "}
+          <Link to="/gameproposal">Game Proposal</Link> {"| "}
+          <Link to="/game">Games</Link> {"| "}
+          <Link to="about">About</Link>
+        </nav>
+      </div>
+    );
+  }

webapp/src/Leaderboard.js

@@ -1,5 +1,4 @@
-import React from "react";
-
+import React, { useState, useEffect } from 'react';
 //const Leaderboard = ({hashmap}) => {
 
 // var listItems = Object.keys(hashmap).map(playerName => {
@@ -12,20 +11,38 @@ import React from "react";
 
 // return <ul>{listItems}</ul>;
 
-const Leaderboard = ({ hashmap }) => {
+const Leaderboard = () => {
 
-  const tableRows = Object.keys(hashmap).map(playerName => {
-    var rank = hashmap[playerName];
+  const [data, setData] = useState(null);
 
-    return <tr key={playerName}>
-      <td>{playerName}</td>
-      <td>{rank.gamesPlayed}</td>
-      <td>{rank.gamesWon}</td>
-      <td>{rank.gamesDraw}</td>
-    </tr>
+  useEffect(() => {
+    fetch('/api/leaderboard')
+      .then((response) => response.json())
+      .then((data) => {
+        setData(data);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+  }, []);
+
+  if (data == null) 
+    return <span>Loading...</span>
+
+  const tableRows = Object.keys(data).map(playerName => {
+    var rank = data[playerName];
+
+    return (
+      <tr key={playerName}>
+        <td>{playerName}</td>
+        <td>{rank.gamesPlayed}</td>
+        <td>{rank.gamesWon}</td>
+        <td>{rank.gamesDraw}</td>
+      </tr>
+    );
   });
 
-  return <div>
+  return (
     <table>
       <thead>
         <tr>
@@ -39,7 +56,7 @@ const Leaderboard = ({ hashmap }) => {
         { tableRows }
       </tbody>
     </table>
-  </div>
+  );
 };