leaderboard api polling

webapp/src/App.css

@@ -1,7 +1,3 @@
 .App {
   text-align: center;
 }
-
-.Container {
-  margin-top: 25px;
-}

webapp/src/App.js

@@ -1,17 +1,25 @@
 import './App.css';
-import React from 'react'
+import React, { useReducer } from 'react'
 import { BrowserRouter, Routes, Route } from "react-router-dom"
 
-import Header from "./components/Header"
+import Header from "./container/Header"
 import Leaderboard from "./components/Leaderboard"
 import Game from "./components/Game"
 import About from "./components/About"
 
+import Polling from './reducer/polling';
+import { LeaderboardApi } from './api/leaderboard';
+// import { UserApi } from './api/user';
+
 function App() {
+  const [polling, dispatchPolling] = useReducer(Polling.reducer, Polling.initialState)
+ 
+  const leaderboard = LeaderboardApi(polling, dispatchPolling).get();
+  // const user = UserApi(polling, dispatchPolling).get();
 
   return <div className="App">
     <BrowserRouter>
-      <Header />
+      <Header polling={polling} dispatchPolling={dispatchPolling} />
       <Routes>
         {/* https://stackoverflow.com/questions/40541994/multiple-path-names-for-a-same-component-in-react-router */}
         <Route path="/game" element={<Game />} />
@@ -19,8 +27,7 @@ function App() {
         <Route path="/game/proposal" element={<Game />} />
         <Route path="/game/active" element={<Game />} />
         <Route path="/game/archive" element={<Game />} />
-
+        <Route path="/leaderboard" element={<Leaderboard leaderboard={leaderboard} />} />
-        <Route path="/leaderboard" element={<Leaderboard />} />
         <Route path="/about" element={<About />} />
       </Routes>
     </BrowserRouter>

webapp/src/api/leaderboard.js

@@ -0,0 +1,24 @@
+import usePolling from "../util/Polling"
+
+const uri = '/api/leaderboard';
+
+export function LeaderboardApi(polling, dispatchPolling) {
+
+    const useGet = () => {
+        const mode = (polling.enabled === true)
+            ? { interval_sec: 300 }     // update leaderbord stats every 5 min
+            : { interval_stop: true }   // user has fliped OfflineToggel
+
+        const [leaderboard, isFetching] = usePolling(uri, mode);
+
+        if (polling.leaderboard !== isFetching) {
+            dispatchPolling({ type: 'setLeaderboard', value: isFetching });
+        }
+
+        return leaderboard;
+    }
+
+    return {
+        get: useGet
+    }
+}

webapp/src/components/Game/GameSelector.jsx

@@ -32,6 +32,8 @@ export default function GameSelector() {
   if (!data.games)
     return <div>Loading..</div>
 
+  console.log("Games", data.games)
+
   return (
     <div className='game-selector'>
       {isProposalPath && <Proposal games={data.games} onClick={onClick_proposal} />}

webapp/src/components/Header.jsx

@@ -1,30 +0,0 @@
-import './Header.css';
-import React from "react"
-import { NavLink } from "react-router-dom";
-import OnlineToggle from './OnlineTgl';
-import { AppData } from "../context/data"
-import Wobler from './Wobler';
-
-export default function Header() {
-  const [data] = React.useContext(AppData)
-
-  return (
-    <div className='app-header'>
-      <h1 >
-        CordaCheckers
-      </h1>
-      <OnlineToggle />
-      <nav>
-        <NavLink to="/about">
-          About
-        </NavLink>
-        <NavLink to="/game">
-          <Wobler text="Game" dance={data.gamesFetching} />
-        </NavLink>
-        <NavLink to="/leaderboard">
-          <Wobler text="Leaderboard" dance={data.leaderboardFetching} />
-        </NavLink>
-      </nav>
-    </div>
-  )
-}

webapp/src/components/Leaderboard/index.jsx

@@ -1,31 +1,30 @@
 import React from "react"
 import './index.css';
-import { AppData } from "../../context/data"
 
-export default function Leaderboard() {
+export default function Leaderboard({ leaderboard }) {
-  const [data] = React.useContext(AppData)
 
-  if (data.leaderboard == null) 
+  if (leaderboard == null)
     return <p>Loading...</p>
 
-//  var listItems = Object.keys(data).map(playerName => {
+  //  var listItems = Object.keys(data).map(playerName => {
-//    var rank = data[playerName];
+  //    var rank = data[playerName];
-//
+  //
-//    return <li key={playerName}>
+  //    return <li key={playerName}>
-//      {playerName}: played {rank.gamesPlayed}, won {rank.gamesWon}, draw {rank.gamesDraw}
+  //      {playerName}: played {rank.gamesPlayed}, won {rank.gamesWon}, draw {rank.gamesDraw}
-//      </li>
+  //      </li>
-//  });
+  //  });
-//  return <ul>{listItems}</ul>;
+  //  return <ul>{listItems}</ul>;
 
-  const tableRows = Object.keys(data.leaderboard).map(playerName => {
+  const tableRows = Object.keys(leaderboard).map(playerName => {
-    var rank = data.leaderboard[playerName];
+    var rank = leaderboard[playerName];
 
-    return <tr key={playerName} className={data.isCurrentUser(playerName) && 'username'}>
+    // TODO tr:  className={data.isCurrentUser(playerName) && 'username'}
+    return <tr key={playerName} >
       <td>{playerName}</td>
       <td>{rank.gamesPlayed}</td>
       <td>{rank.gamesWon}</td>
       <td>{rank.gamesDraw}</td>
-      </tr>
+    </tr>
   });
 
   return <div className="Leaderboard">
@@ -39,8 +38,8 @@ export default function Leaderboard() {
         </tr>
       </thead>
       <tbody>
-        { tableRows }
+        {tableRows}
       </tbody>
     </table>
-    </div>
+  </div>
 };

webapp/src/components/OnlineTgl/index.jsx

@@ -1,12 +0,0 @@
-import "./index.css"
-import React from "react"
-import { AppData } from "../../context/data"
-
-export default function OnlineTgl() {
-    const [/*appData*/, dispatchData] = React.useContext(AppData)
-
-    return <div className="OnlineTgl">
-            <input className="tgl tgl-flip" id="cb5" type="checkbox" defaultChecked onClick={() => dispatchData({type: "toggleOfflineMode"})}/>
-            <label className="tgl-btn" data-tg-off="offline" data-tg-on="online" htmlFor="cb5"/>
-        </div>
-}

webapp/src/components/OnlineToggle.jsx

@@ -0,0 +1,11 @@
+import "./OnlineToggle.css"
+import React from "react"
+
+export default function OnlineToggle({ isOnline, onClick }) {
+    return (
+        <div className="OnlineToggle">
+            <input className="tgl tgl-flip" id="cb5" type="checkbox" checked={isOnline} onChange={onClick} />
+            <label className="tgl-btn" data-tg-off="offline" data-tg-on="online" htmlFor="cb5" />
+        </div>
+    )
+}

webapp/src/container/Header.css

@@ -1,13 +1,13 @@
-.OnlineTgl {
+.OnlineToggle {
     transform: scale(.5); 
     margin-left: -19px;
 }
 
-.app-header {
+.Header {
     display: flex;
 }
 
-.app-header nav {
+.Header nav {
     align-items: center;
     justify-content: center;
     display: flex;
@@ -16,7 +16,7 @@
     padding-top: 10px;
 }
 
-.app-header a {
+.Header a {
     color: lightgray;
     text-decoration: none;
     transition: .25s ease;
@@ -27,7 +27,7 @@
     padding: 0.25rem 1rem;
 }
 
-.app-header .active {
+.Header .active {
     color: white;
     border-radius: 2px;
     background-color: cadetblue;
@@ -35,17 +35,17 @@
     padding: 0.25rem 1rem;
 }
 
-.app-header a:hover:not(.active) {
+.Header a:hover:not(.active) {
     color: cadetblue;
 
     box-shadow: 0 1.5px 0 0 currentcolor;
 }
 
-[data-darkreader-scheme="dark"] .app-header a {
+[data-darkreader-scheme="dark"] .Header a {
     color: darkslategrey;
 }
 
-[data-darkreader-scheme="dark"] .app-header .active {
+[data-darkreader-scheme="dark"] .Header .active {
     color: white;
     box-shadow: 0 1.5px 0 0 currentcolor;
 }

webapp/src/container/Header.jsx

@@ -0,0 +1,35 @@
+import './Header.css';
+import React from "react"
+import { NavLink } from "react-router-dom";
+import OnlineToggle from '../components/OnlineToggle';
+import Wobler from '../components/Wobler';
+
+export default function Header({ polling, dispatchPolling }) {
+
+  return (
+    <div className='Header'>
+      <h1 >
+        CordaCheckers
+      </h1>
+
+      <OnlineToggle
+        isOnline={polling.enabled}
+        onClick={() => dispatchPolling({ type: "toggleOnOff" })}
+      />
+
+      <nav>
+        <NavLink to="/about">
+          About
+        </NavLink>
+
+        <NavLink to="/game">
+          <Wobler text="Game" dance={polling.games} />
+        </NavLink>
+
+        <NavLink to="/leaderboard">
+          <Wobler text="Leaderboard" dance={polling.leaderboard} />
+        </NavLink>
+      </nav>
+    </div>
+  )
+}

webapp/src/reducer/polling.js

@@ -0,0 +1,49 @@
+import { useLocalStorage } from '../util/PersistentStorage'
+
+const Persistent = (() => {
+  const [getEnabled, setEnabled] = useLocalStorage('polling.enabled', true);
+
+  return {
+    getEnabled,
+    setEnabled
+  }
+})(); // <<--- execute
+
+export const pollingGetInitialState = () => {
+  return {
+    enabled: Persistent.getEnabled() === 'true',
+
+    games: false,
+    leaderboard: false
+  }
+};
+
+export function pollingReducer(state, action) {
+  switch (action.type) {
+
+    case 'toggleOnOff': return {
+      ...state,
+      enabled: Persistent.setEnabled(!state.enabled)
+    };
+
+    case 'setGames': return {
+      ...state,
+      games: action.value
+    };
+
+    case 'setLeaderboard': return {
+      ...state,
+      leaderboard: action.value
+    };
+
+    default:
+      throw Error('Unknown action.type:' + action.type);
+  }
+}
+
+const Polling = {
+  initialState: pollingGetInitialState(), // <<--- execute
+  reducer: pollingReducer
+}
+
+export default Polling

webapp/src/util/PersistentStorage.js

@@ -0,0 +1,31 @@
+export function useLocalStorage(name, initialValue) {
+
+    const get = () => localStorage.getItem(name);
+    const del = () => localStorage.removeItem(name);
+    const set = (value) => { 
+        localStorage.setItem(name, value); 
+        return value;
+    }
+
+    if (get() === null) {
+        set(initialValue);
+    }
+
+    return [get, set, del]
+}
+
+export function useSessionStorage(name, initialValue) {
+
+    const get = () => sessionStorage.getItem(name);
+    const del = () => sessionStorage.removeItem(name);
+    const set = (value) => { 
+        sessionStorage.setItem(name, value); 
+        return value;
+    }
+
+    if (get() === null) {
+        set(initialValue);
+    }
+
+    return [get, set, del]
+}

webapp/src/util/Polling.js

@@ -0,0 +1,53 @@
+import { useState, useCallback, useEffect, } from "react"
+
+/*
+  - uri: string
+  - mode:
+    - null  - default, return cashed value while polling fresh one from server)
+    - interval_sec
+    - interval_stop
+*/
+
+export default function usePolling(url, mode) {
+    const [cache, setCache] = useState(null);
+    const [isFetching, setFetching] = useState(false);
+    const [delayID, setDelayID] = useState(null);
+
+    const fetchData = useCallback(() => {
+        setDelayID(null);
+        setFetching(true);
+
+        fetch(url)
+            .then((response) => response.json())
+            .then((freshData) => {
+                setCache(freshData);
+                setFetching(false);
+            })
+            .catch((err) => {
+                console.warn(err.message);
+                setFetching(false);
+            })
+    }, [url])
+
+    useEffect(() => {
+        if (cache === null && isFetching === false) {
+            fetchData();
+        }
+
+        if (mode?.interval_sec && delayID === null) {
+            const timeoutID = setTimeout(fetchData, mode.interval_sec * 1000)
+            setDelayID(timeoutID)
+            console.log("Fetch '" + url + "' scheduled in " + mode.interval_sec + " sec")
+        }
+        else if (mode?.interval_stop) {
+            clearTimeout(delayID);  // cancel already scheduled fetch
+            setDelayID(null);       
+        }
+
+    }, [url, mode, isFetching, cache, fetchData, delayID]);
+
+    return [
+        cache, // API response
+        isFetching  // true / false
+    ]
+}