initial implementation

webapp/src/api/games.js

@@ -1,4 +1,4 @@
-import usePolling from '../hook/Polling';
+import { usePolling, doPushing } from '../hook/api';
 
 export default function useGamesApi(gamesReducer, config) {
     const [games, dispatchGames] = gamesReducer;
@@ -16,14 +16,13 @@ export default function useGamesApi(gamesReducer, config) {
         return games;
     }
 
-    const usePushNewGame = () => {
-        const onSuccess = (game) => {
-            dispatchGames({ type: 'next', game });
-        }
-    }
 
     return {
         pollGamesList: usePollingGamesList,
-        pushNewGame: usePushNewGame
+        
+        pushNewGame: (reqParams) => doPushing('/api/gameproposal', 'POST', reqParams, {
+            onPushing: (isPushingNewGame) => dispatchGames({ type: 'next', isPushingNewGame }),
+            onSuccess: (game) => dispatchGames({ type: 'next', gamesList: [...games.gamesList, game] })
+        }),
     }
 }

webapp/src/api/leaderboard.js

@@ -1,4 +1,4 @@
-import usePolling from "../hook/Polling";
+import { usePolling } from "../hook/api";
 
 export default function useLeaderboardApi(leaderboardReducer, config) {
     const [leaderboard, dispatchLeaderboard] = leaderboardReducer;

webapp/src/api/user.js

@@ -1,4 +1,4 @@
-import usePolling from "../hook/Polling";
+import { usePolling } from "../hook/api";
 
 export default function useUserApi(userReducer) {
     const [user, dispatchUser] = userReducer;

webapp/src/container/Games.jsx

@@ -30,7 +30,7 @@ export default function Games({ context: { gamesReducer, gamesApi }, players })
           <ViewProvider players={players} dispatchGames={dispatchGames} />
         </div>
         <div className='right-side'>
-          <ActionPanel players={players}/>
+          <ActionPanel players={players} gamesApi={gamesApi} />
           <GameBoard />
           {/*
           <GameMessage />
@@ -81,12 +81,13 @@ function ViewProvider({ players, dispatchGames }) {
   )
 }
 
-function ActionPanel({ players }) {
+function ActionPanel({ players, gamesApi }) {
   return (
     <div className='ActionPanel'>
       <Routes>
         <Route path='new' element={
           <Create isCurrentUser={players.isCurrentUser}
+            pushNewGame={(reqParams) => gamesApi.pushNewGame(reqParams)}
           />
         } />
         <Route path='proposal' element={[<Accept key={1} />, <Reject key={2} />, <Cancel key={3} />]} />

webapp/src/container/games/action/Create.jsx

@@ -1,36 +1,45 @@
 import React, { useContext } from 'react';
 import { GamesContext } from '../../../context/games';
 import Wobler from '../../../components/Wobler';
+import { Color } from '../../../components/Checkers';
 
 
+export default function Create({ isCurrentUser, pushNewGame }) {
+    const games = useContext(GamesContext);
 
-export default function Create({ isCurrentUser, onClick }) {
-    const newGameCtx = useContext(GamesContext).newGame;
+    const hasPlayers = checkPlayers(games.newGame);
+    const hasCurrentUser = checkCurrentUser(games.newGame, isCurrentUser);
 
-    const hasPlayers = checkPlayers(newGameCtx);
-    const hasCurrentUser = checkCurrentUser(newGameCtx, isCurrentUser);
-
-    const prepareRequest = () => {
+    const prepareNewGameRequest = () => {
         if (!hasPlayers)
             return alert("Black and White players must be selected for the game");
 
         if (!hasCurrentUser)
             return alert("You must be one of the selected players");
 
-        if (newGameCtx.pushing)
+        if (games.isPushingNewGame)
             return; // current request is still being processed
 
-        //onClick
-        console.log("send request");
+        /*
+         * Prepare & send NewGame request
+         */
+        const [opponentName, opponentColor] =  getOpponent(games.newGame, isCurrentUser);
+
+        const reqParams = {
+            opponentName,
+            opponentColor,
+            board: null, // default board configuration
+            message: 'default NewGame req message'
+        }
+
+        pushNewGame(reqParams);
     }
 
     return (
-        <button className={'Create'
-            + (hasPlayers && hasCurrentUser ? ' ready' : '')
-        }
-            onClick={prepareRequest}
+        <button className={'Create' + (hasPlayers && hasCurrentUser ? ' ready' : '')}
+            onClick={prepareNewGameRequest}
         >
-            <Wobler text="Create" dance={newGameCtx.pushing} />
+            <Wobler text="Create" dance={games.isPushingNewGame} />
         </button>
     )
 }
@@ -42,4 +51,16 @@ function checkPlayers({ whitePlayer, blackPlayer }) {
 
 function checkCurrentUser({ whitePlayer, blackPlayer }, isCurrentUser) {
     return isCurrentUser(whitePlayer) || isCurrentUser(blackPlayer);
+}
+
+function getOpponent({whitePlayer, blackPlayer}, isCurrentUser) {
+    if (isCurrentUser(whitePlayer)) {
+        return [blackPlayer, Color.black];
+    }
+
+    if (isCurrentUser(blackPlayer)) {
+        return [whitePlayer, Color.white];
+    }
+
+    return ['', ''];
 }

webapp/src/hook/api.js

@@ -8,22 +8,21 @@ import { useState, useRef, useCallback, useEffect, } from "react"
     - interval_stop
 */
 
-export default function usePolling(uri, onResponce, mode = null) {
+export function usePolling(uri, onSuccess, mode = null) {
     const [isPolling, setPolling] = useState(false);
 
     const initialPollRef = useRef(true);
     const initialPoll = initialPollRef.current;
-    
+
     const intervalTimerIdRef = useRef(null);
     const intervalTimerId = intervalTimerIdRef.current;
 
-
     const pollData = useCallback(() => {
         setPolling(true);
         initialPollRef.current = false;
 
         fetch(uri)
-            .then((responce) => {
+            .then((response) => {
                 setPolling(false);
 
                 if (typeof mode?.interval_sec === 'number') {
@@ -31,15 +30,15 @@ export default function usePolling(uri, onResponce, mode = null) {
                     intervalTimerIdRef.current = setTimeout(pollData, mode.interval_sec * 1000);
                 }
 
-                return responce.json();
+                return response.json();
             })
             .then((json) => {
-                onResponce(json);
+                onSuccess(json);
             })
             .catch((err) => {
                 console.warn(err.message);
             })
-    }, [uri, mode, onResponce, initialPollRef, intervalTimerIdRef]);
+    }, [uri, mode, onSuccess, initialPollRef, intervalTimerIdRef]);
 
     const stopPollInterval = useCallback(() => {
         console.log("Cancel scheduled fetch for", uri);
@@ -51,11 +50,36 @@ export default function usePolling(uri, onResponce, mode = null) {
     useEffect(() => {
         if ((initialPoll || (typeof mode?.interval_sec === 'number' && intervalTimerId === null)) && !isPolling) {
             pollData();
-        } else 
-        if (mode?.interval_stop && intervalTimerId) {
-            stopPollInterval();
-        }
+        } else
+            if (mode?.interval_stop && intervalTimerId) {
+                stopPollInterval();
+            }
     }, [initialPoll, mode, intervalTimerId, isPolling, pollData, stopPollInterval]);
 
     return isPolling;
+}
+
+export async function doPushing(uri, method, data, { onSuccess, onPushing }) {
+    if (onPushing)
+        onPushing(true);
+
+    try {
+        const response = await fetch(uri, {
+            method,
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify(data), // body data type must match "Content-Type" header
+        });
+
+        if (!response.ok)
+            throw new Error(`Error! status: ${response.status}`);
+
+        if (onSuccess)
+            onSuccess(await response.json());
+//  } catch (err) {
+    } finally {
+        if (onPushing)
+            onPushing(false);
+    }
 }