React: make Poll into a hook

webapp/src/App.js

@@ -9,10 +9,7 @@ import {
 import Header from "./components/Header"
 import Leaderboard from "./components/Leaderboard"
 import GameProposal from "./components/GameProposal"
-import DataPolling from './components/DataPolling';
-
-//import { UserProvider } from "../contexts/UserProvider"
-//import { GameProposalProvider } from './context/GameProposal';
+import DataPolling from './components/OfflineToggle';
 
 function App() { 
 

webapp/src/components/DataPolling/index.jsx

@@ -1,16 +0,0 @@
-import React from "react"
-import { AppData } from "../../context/data"
-import { AppContext } from "../../context/app"
-
-export default function DataPolling() {
-    const [appData, dispatchData] = React.useContext(AppData)
-    //const [appCtx, dispatchAppData] = React.useContext(AppContext)
-
-    return <div className={DataPolling.name}>
-        polling
-        <button onClick={() => dispatchData({type: "togglePolling"})}>
-            { appData.disablePolling === true ? "off" : "on" }
-        </button>
-        { appData.fetching }
-        </div>
-}

webapp/src/components/GameProposal/index.jsx

@@ -5,7 +5,7 @@ import Reject from './Reject'
 import Cancel from './GameProposalCancel'
 
 import { AppData } from "../../context/data"
-
+//import { AppContext } from "../../context/app"
 
 export default function GameProposal() {
   const [data] = React.useContext(AppData)

webapp/src/components/OfflineToggle/index.jsx

@@ -0,0 +1,12 @@
+import React from "react"
+import { AppData } from "../../context/data"
+
+export default function OfflineToggle() {
+    const [appData, dispatchData] = React.useContext(AppData)
+
+    return <div className="OfflineToggle">
+        <button onClick={() => dispatchData({type: "toggleOfflineMode"})}>
+            { appData.offlineMode === true ? "offline" : "online" }
+        </button>
+        </div>
+}

webapp/src/context/data/Poll.js

@@ -9,8 +9,8 @@ import { useState, useCallback, useEffect,  } from "react"
     - stop
 */
 
-export default function Poll(url, interval_sec, disabled) {
-    const [cache, setCache] = useState(null)
+export default function Poll(url, interval_sec, offlineMode) {
+    const [dataCache, setDataCache] = useState(null)
     const [fetching, setFetching] = useState(false)
     const [timeoutID, setTimeoutID] = useState(null)
 
@@ -23,27 +23,24 @@ export default function Poll(url, interval_sec, disabled) {
                 setFetching(false)
                 return response.json()
             })
-            .then((freshData) => setCache(freshData))
+            .then((freshData) => setDataCache(freshData))
             .catch((err) => console.log(err.message))
     }, [url])
 
     useEffect(() => {
-        if (cache == null) {
+        if (dataCache == null) {
             fecthData()  // <<-- run immediatly on startup
         }
-        else if (disabled === true) {
+        else if (offlineMode === true) {
             clearTimeout(timeoutID) // cancel already scheduled fetch
-            setTimeoutID(null)
+            setTimeoutID(null)      // & stop interval fetching
         }
         else if (timeoutID === null) {
             const timeoutID = setTimeout(fecthData, interval_sec * 1000)
             setTimeoutID(timeoutID)
             console.log("Fetch '" +url +"' scheduled in " +interval_sec +" sec")
         }
-    }, [url, cache, fecthData, timeoutID, disabled, interval_sec]);
+    }, [url, dataCache, fecthData, timeoutID, offlineMode, interval_sec]);
 
-    return {
-        data: cache,
-        fetching
-    }
+    return [ dataCache, fetching ]
 }

webapp/src/context/data/index.jsx

@@ -12,19 +12,14 @@ export const AppDataProvider = ({ children }) => {
 
   const [data, dispatchData] = React.useReducer(reducer, initialState)
 
-  const games = Poll('api/gamestate', 30, data.disablePolling)
-  const leaderboard = Poll('api/leaderboard', 60, data.disablePolling)
-  
-  data.games       = games.data
-  data.leaderboard = leaderboard.data
-  
-  var fetching = []
-  if (games.fetching === true)
-    fetching =  [...fetching, "games"]
-  if (leaderboard.fetching === true)
-    fetching =  [...fetching, "leaderboard"]
-  
-  data.fetching = fetching
+  const [games,       gamesFetching       ] = Poll('api/gamestate'  , 30, data.offlineMode)
+  const [leaderboard, leaderboardFetching ] = Poll('api/leaderboard', 60, data.offlineMode)
+
+  data.games         = games
+  data.gamesFetching = gamesFetching
+
+  data.leaderboard         = leaderboard
+  data.leaderboardFetching = leaderboardFetching
   
   return (
     <AppData.Provider value={[data, dispatchData]}>

webapp/src/context/data/reducer.js

@@ -1,9 +1,9 @@
 export const reducer = (state, action) => {
   switch (action.type) {
 
-    case "togglePolling":
+    case "toggleOfflineMode":
       return { ...state,
-        disablePolling: !state.disablePolling // on/off
+        offlineMode: !state.offlineMode // on/off
       }
 
     default:
@@ -14,8 +14,10 @@ export const reducer = (state, action) => {
   
 export const initialState = { 
   games: null,
-  leaderboard: null,
+  gamesFetching: false,
 
-  disablePolling: false,
-  fetching: []
+  leaderboard: null,
+  leaderboardFetching: false,
+  
+  offlineMode: false
 }