Header + OnlineToggle

webapp/src/App.css

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

webapp/src/App.js

@@ -1,17 +1,21 @@
 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"
 
-function App() {
+import { pollingReducer, pollingDefaults } from './reducer/polling';
 
+function App() {
+  const [polling, dispatchPolling] = useReducer(pollingReducer, pollingDefaults)
+
+  console.log('polling', polling)
   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,7 +23,6 @@ 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 />} />
         <Route path="/about" element={<About />} />
       </Routes>

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/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,32 @@
+export function pollingReducer(polling, action) {
+  switch (action.type) {
+
+    case "toggleOnOff":
+      return {
+        ...polling,
+        enabled: !polling.enabled
+      };
+
+    case "games":
+      return {
+        ...polling,
+        games: action.value
+      };
+
+    case "leaderboard":
+      return {
+        ...polling,
+        leaderboard: action.value
+      };
+
+    default:
+      throw Error("Unknown action: " + action.type);
+  }
+}
+
+export const pollingDefaults = {
+  enabled: true,
+
+  games: false,
+  leaderboard: false,
+};