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
}