From 7314b8c328e9569caac7a1cb5d029fd5dbdbd94e Mon Sep 17 00:00:00 2001
From: djmil <andriy@djmil.dev>
Date: Wed, 8 Nov 2023 19:30:06 +0100
Subject: [PATCH] move Header into App

---
 webapp/src/App.css              | 43 ++++++++++++++++++++++++++++++
 webapp/src/App.js               | 47 +++++++++++++++++++++++++++------
 webapp/src/container/Header.css | 42 -----------------------------
 webapp/src/container/Header.jsx | 36 -------------------------
 4 files changed, 82 insertions(+), 86 deletions(-)
 delete mode 100644 webapp/src/container/Header.css
 delete mode 100644 webapp/src/container/Header.jsx

diff --git a/webapp/src/App.css b/webapp/src/App.css
index 88346b6..4178dc1 100644
--- a/webapp/src/App.css
+++ b/webapp/src/App.css
@@ -1,3 +1,46 @@
+.Header .OnlineToggle {
+  transform: scale(.5); 
+  margin-left: -19px;
+}
+
+.Header {
+  display: flex;
+}
+
+.Header nav {
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  flex-wrap: wrap;
+
+  padding-top: 10px;
+}
+
+.Header a {
+  color: black; 
+  text-decoration: none;
+  transition: .25s ease;
+  width: fit-content;
+
+  margin-left: 5px;
+  margin-right: 5px; 
+  padding: 0.25rem 1rem;
+}
+
+.Header .active {
+  color: white;
+  border-radius: 2px;
+  background-color: cadetblue;
+  opacity: 80%;
+  padding: 0.25rem 1rem;
+}
+
+.Header a:hover:not(.active) {
+  color: cadetblue;
+
+  box-shadow: 0 1.5px 0 0 currentcolor;
+}
+
 [data-darkreader-scheme="dark"] .Header a {
   color: darkslategrey;
 }
diff --git a/webapp/src/App.js b/webapp/src/App.js
index a96c5c1..16d5a50 100644
--- a/webapp/src/App.js
+++ b/webapp/src/App.js
@@ -1,8 +1,10 @@
 import './App.css';
 import React from 'react';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { BrowserRouter, Routes, Route, NavLink } from 'react-router-dom';
+
+import OnlineToggle from './components/OnlineToggle';
+import Wobler from './components/Wobler';
 
-import Header from './container/Header';
 import About from "./components/About"
 import Games from './container/Games';
 import Leaderboard from './container/Leaderboard';
@@ -16,19 +18,19 @@ import useUserApi from './api/user';
 import useLeaderboardApi from './api/leaderboard';
 import useGamesApi from './api/games';
 
-function App() {
+export default function App() {
   const userReducer = useUserReducer();
-  const pollingReducer = usePollingReducer();
+  const pollingFlux = usePollingReducer();
   const leaderboardReducer = useLeaderboardReducer();
   const gamesReducer = useGamesReducer();
 
   const user = useUserApi(userReducer).get();
-  const leaderboard = useLeaderboardApi(leaderboardReducer).poll(pollingReducer);
-  /*const gamesApi = */ useGamesApi(gamesReducer).list(pollingReducer);
+  const leaderboard = useLeaderboardApi(leaderboardReducer).poll(pollingFlux);
+  /*const gamesApi = */ useGamesApi(gamesReducer).list(pollingFlux);
 
   return (
     <BrowserRouter>
-      <Header pollingReducer={pollingReducer} />
+      <Header pollingFlux={pollingFlux} />
       <Routes>
         <Route path="/" element={<About />} />
         <Route path="/about" element={<About />} />
@@ -39,4 +41,33 @@ function App() {
   )
 }
 
-export default App;
+function Header({ pollingFlux }) {
+  const [polling, dispatchPolling] = pollingFlux;
+
+  return (
+    <div className='Header'>
+      <h1>
+        CordaCheckers
+      </h1>
+
+      <OnlineToggle
+        isOnline={polling.enabled}
+        onClick={() => dispatchPolling({ type: "toggleOnOff" })}
+      />
+
+      <nav>
+        <NavLink to="/about">
+          About
+        </NavLink>
+
+        <NavLink to="/games">
+          <Wobler text="Games" dance={polling.games} />
+        </NavLink>
+
+        <NavLink to="/leaderboard">
+          <Wobler text="Leaderboard" dance={polling.leaderboard} />
+        </NavLink>
+      </nav>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/webapp/src/container/Header.css b/webapp/src/container/Header.css
deleted file mode 100644
index 0f4286a..0000000
--- a/webapp/src/container/Header.css
+++ /dev/null
@@ -1,42 +0,0 @@
-.OnlineToggle {
-    transform: scale(.5); 
-    margin-left: -19px;
-}
-
-.Header {
-    display: flex;
-}
-
-.Header nav {
-    align-items: center;
-    justify-content: center;
-    display: flex;
-    flex-wrap: wrap;
-
-    padding-top: 10px;
-}
-
-.Header a {
-    color: black; 
-    text-decoration: none;
-    transition: .25s ease;
-    width: fit-content;
-
-    margin-left: 5px;
-    margin-right: 5px; 
-    padding: 0.25rem 1rem;
-}
-
-.Header .active {
-    color: white;
-    border-radius: 2px;
-    background-color: cadetblue;
-    opacity: 80%;
-    padding: 0.25rem 1rem;
-}
-
-.Header a:hover:not(.active) {
-    color: cadetblue;
-
-    box-shadow: 0 1.5px 0 0 currentcolor;
-}
\ No newline at end of file
diff --git a/webapp/src/container/Header.jsx b/webapp/src/container/Header.jsx
deleted file mode 100644
index 553e540..0000000
--- a/webapp/src/container/Header.jsx
+++ /dev/null
@@ -1,36 +0,0 @@
-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({ pollingReducer }) {
-  const [polling, dispatchPolling] = pollingReducer;
-
-  return (
-    <div className='Header'>
-      <h1 >
-        CordaCheckers
-      </h1>
-
-      <OnlineToggle
-        isOnline={polling.enabled}
-        onClick={() => dispatchPolling({ type: "toggleOnOff" })}
-      />
-
-      <nav>
-        <NavLink to="/about">
-          About
-        </NavLink>
-
-        <NavLink to="/games">
-          <Wobler text="Games" dance={polling.games} />
-        </NavLink>
-
-        <NavLink to="/leaderboard">
-          <Wobler text="Leaderboard" dance={polling.leaderboard} />
-        </NavLink>
-      </nav>
-    </div>
-  )
-}
\ No newline at end of file