From c884494618a1d69ddc4e1f1bf7583309110eb329 Mon Sep 17 00:00:00 2001 From: djmil Date: Thu, 19 Oct 2023 15:20:18 +0200 Subject: [PATCH] React: make Poll into a hook --- webapp/src/App.js | 5 +---- webapp/src/components/DataPolling/index.jsx | 16 -------------- webapp/src/components/GameProposal/index.jsx | 2 +- webapp/src/components/OfflineToggle/index.jsx | 12 +++++++++++ webapp/src/context/data/Poll.js | 19 +++++++---------- webapp/src/context/data/index.jsx | 21 +++++++------------ webapp/src/context/data/reducer.js | 12 ++++++----- 7 files changed, 37 insertions(+), 50 deletions(-) delete mode 100644 webapp/src/components/DataPolling/index.jsx create mode 100644 webapp/src/components/OfflineToggle/index.jsx diff --git a/webapp/src/App.js b/webapp/src/App.js index f796e62..26c3b47 100644 --- a/webapp/src/App.js +++ b/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() { diff --git a/webapp/src/components/DataPolling/index.jsx b/webapp/src/components/DataPolling/index.jsx deleted file mode 100644 index 96adfd8..0000000 --- a/webapp/src/components/DataPolling/index.jsx +++ /dev/null @@ -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
- polling - - { appData.fetching } -
-} diff --git a/webapp/src/components/GameProposal/index.jsx b/webapp/src/components/GameProposal/index.jsx index 3e7f25c..01bfaa8 100644 --- a/webapp/src/components/GameProposal/index.jsx +++ b/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) diff --git a/webapp/src/components/OfflineToggle/index.jsx b/webapp/src/components/OfflineToggle/index.jsx new file mode 100644 index 0000000..0f01ead --- /dev/null +++ b/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
+ +
+} diff --git a/webapp/src/context/data/Poll.js b/webapp/src/context/data/Poll.js index 6343d70..935cf7a 100644 --- a/webapp/src/context/data/Poll.js +++ b/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 ] } diff --git a/webapp/src/context/data/index.jsx b/webapp/src/context/data/index.jsx index 1340747..a105335 100644 --- a/webapp/src/context/data/index.jsx +++ b/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 ( diff --git a/webapp/src/context/data/reducer.js b/webapp/src/context/data/reducer.js index f06e879..7b608bc 100644 --- a/webapp/src/context/data/reducer.js +++ b/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 }