GamesContext: initial implementation

webapp/src/App.js

@@ -10,27 +10,29 @@ import Games from './container/Games';
 import Leaderboard from './container/Leaderboard';
 
 import usePollingReducer from './reducer/polling';
-//import useGamesReducer from './reducer/games';
+import useGamesReducer from './reducer/games';
 
 import useUserApi from './api/user';
 import useLeaderboardApi from './api/leaderboard';
-//import useGamesApi from './api/games';
+import useGamesApi from './api/games';
 
 export default function App() {
   const pollingReducer = usePollingReducer();
-  //const gamesReducer = useGamesReducer();
 
-  //const games = useGamesApi(gamesReducer).list(pollingReducer);
   const leaderboard = useLeaderboardApi().poll(pollingReducer);
   const user = useUserApi().get();
 
+  const [games, dispatchGames] = useGamesReducer();
+  const gamesApi = useGamesApi(dispatchGames);
+  gamesApi.list(pollingReducer);
+
   return (
     <BrowserRouter>
       <Header pollingReducer={pollingReducer} />
       <Routes>
         <Route path='/' element={<About />} />
         <Route path='/about' element={<About />} />
-        <Route path='/games/*' element={<Games />} />
+        <Route path='/games/*' element={<Games games={games} dispatchGames={dispatchGames} gamesApi={gamesApi} />} />
         <Route path='/leaderboard' element={<Leaderboard leaderboard={leaderboard} user={user} />} />
       </Routes>
     </BrowserRouter>

webapp/src/api/games.js

@@ -1,22 +1,23 @@
-import usePolling from "../util/Polling"
+import usePolling from '../util/Polling';
 
-export default function useGamesApi(gamesState) {
-    const [games, setGames] = gamesState;
+export default function useGamesApi(dispatchGames) {
 
     const useList = (pollingReducer) => {
         const [polling, dispatchPolling] = pollingReducer;
 
+        const onResponce = (json) => {
+            dispatchGames({ type: 'next', list: json });
+        }
+
         const mode = (polling.enabled === true)
-            ? { interval_sec: 30 }      // update games list every half a minue
+            ? { interval_sec: 30 }      // fetch gamesList every half a minue
             : { interval_stop: true }   // user has fliped OfflineToggel
 
-        const isPolling = usePolling('/api/games', setGames, mode);
+        const isPolling = usePolling('/api/games', onResponce, mode);
 
         if (isPolling !== polling.games) {
             dispatchPolling({ type: 'next', games: isPolling });
         }
-
-        return games;
     }
 
     return {

webapp/src/api/user.js

@@ -10,6 +10,7 @@ export default function useUserApi() {
         }
 
         usePolling('/api/user', onResponce); // <<-- fetch once
+
         return user;
     }
 

webapp/src/container/Games.jsx

@@ -1,6 +1,6 @@
 import './Games.css';
-import React from "react"
-import { NavLink, Routes, Route } from "react-router-dom";
+import React from 'react';
+import { NavLink, Routes, Route } from 'react-router-dom';
 
 import NewGame from './games/view/NewGame';
 import GameProposals from './games/view/GameProposals';
@@ -19,23 +19,30 @@ import Forward from './games/action/Forward';
 
 import GameBoard from './games/GameBoard';
 
-export default function Games({ gamesReducer, user }) {
+import { GamesContext, GamesDispatchContext, GamesApiContext } from '../context/games';
+
+export default function Games({ games, dispatchGames, gamesApi }) {
 
   return (
     <div className="Games">
-      <div className='left-side'>
-        <ViewSelector />
-        <ViewProvider />
-      </div>
-      <div className='right-side'>
-        <ActionPanel />
-        <GameBoard />
-        {/*
-        <GameMessage />
-        <GameBoard />
-        <Message2Opponent /> */}
-      </div>
-    </div>
+      <GamesContext.Provider value={games} >
+        <GamesDispatchContext.Provider value={dispatchGames} >
+          <GamesApiContext.Provider value={gamesApi} >
+            <div className='left-side'>
+              <ViewSelector />
+              <ViewProvider />
+            </div>
+            <div className='right-side'>
+              <ActionPanel />
+              <GameBoard />
+              {/*
+          <GameMessage />
+          <Message2Opponent /> */}
+            </div>
+          </GamesApiContext.Provider>
+        </GamesDispatchContext.Provider>
+      </GamesContext.Provider>
+    </div >
   )
 };
 

webapp/src/container/games/view/NewGame.jsx

@@ -1,6 +1,11 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import { GamesContext } from '../../../context/games';
 
 export default function NewGame() {
+    const games = useContext(GamesContext);
+
+    console.log("NewGame", games);
+
     return (
         <div>View: NewGame</div>
     )

webapp/src/context/games.jsx

@@ -1,17 +1,20 @@
-import React from "react"
-import { reducer, initialState } from "./reducer"
+import { createContext } from 'react';
 
-export const Games = React.createContext({
-  state: initialState,
-  dispatch: () => null
-})
+export const GamesContext = createContext(null);
+export const GamesDispatchContext = createContext(null);
+export const GamesApiContext = createContext(null);
 
-export const GamesProvider = ({ children }) => {
-  const [state, dispatch] = React.useReducer(reducer, initialState)
+// export const Games = React.createContext({
+//   state: initialState,
+//   dispatch: () => null
+// })
 
-  return (
-    <Games.Provider value={[ state, dispatch ]}>
-    	{ children }
-    </Games.Provider>
-  )
-}
+// export const GamesProvider = ({ children }) => {
+//   const [state, dispatch] = React.useReducer(reducer, initialState)
+
+//   return (
+//     <Games.Provider value={[ state, dispatch ]}>
+//     	{ children }
+//     </Games.Provider>
+//   )
+// }

webapp/src/reducer/games.js

@@ -12,7 +12,7 @@ export function gamesReducer(state, action) {
       return nextState(state, action);
 
     default:
-      throw Error('GameReducer: unknown action.type', action.type);
+      throw Error('GamesReducer: unknown action.type', action.type);
   }
 }
 

webapp/src/reducer/user.js

@@ -1,6 +1,5 @@
 import { useReducer } from 'react';
 import { localeCompare } from '../util/Locale';
-//import { nextState } from '../util/StateHelper';
 
 export const userInitialState = {
   username: '',
@@ -14,11 +13,9 @@ export function userReducer(state, action) {
   switch (action.type) {
 
     case 'parse':
-      const apiData = parse(action.json);
-
       return {
         ...state,
-        ...apiData
+        username: action.json.username
       };
 
     default:
@@ -29,10 +26,3 @@ export function userReducer(state, action) {
 export default function useUserReducer() {
   return useReducer(userReducer, userInitialState);
 }
-
-function parse(json) {
-  console.log("userreducer.parse", json);
-  return {
-    username: json.username
-  }
-}