webapp/src/api/games.js

@@ -22,13 +22,7 @@ export default function useGamesApi(gamesReducer, config) {
         
         pushNewGame: (reqParams) => doPushing('/api/gameproposal', 'POST', reqParams, {
             onPushing: (isPushingNewGame) => dispatchGames({ type: 'next', isPushingNewGame }),
-            onSuccess: (game) => dispatchGames({ type: 'next', gamesList: [...games.gamesList, game], newGame: emptyNewGame })
+            onSuccess: (game) => dispatchGames({ type: 'next', gamesList: [...games.gamesList, game] })
         }),
     }
-}
-
-const emptyNewGame = {
-    whitePlayer: '', 
-    blackPlayer: '',
-    message2opponent: ''
 }

webapp/src/container/Games.jsx

@@ -16,7 +16,6 @@ import Backward from './games/action/Backward';
 import Forward from './games/action/Forward';
 
 import GameBoard from './games/GameBoard';
-import Message2Opponent from './games/Message2Opponent';
 
 import './Games.css';
 
@@ -28,15 +27,14 @@ export default function Games({ context: { gamesReducer, gamesApi }, players })
       <div className='Games'>
         <div className='left-side'>
           <ViewSelector />
-          <ViewProvider gamesReducer={gamesReducer} players={players} />
+          <ViewProvider players={players} dispatchGames={dispatchGames} />
         </div>
         <div className='right-side'>
-          <ActionPanel gamesApi={gamesApi} players={players} />
+          <ActionPanel players={players} gamesApi={gamesApi} />
           <GameBoard />
-          <Message2Opponent dispatchGames={dispatchGames} />
           {/*
           <GameMessage />
-           */}
+          <Message2Opponent /> */}
         </div>
       </div >
     </GamesContext.Provider>
@@ -56,19 +54,15 @@ function ViewSelector() {
   )
 }
 
-function ViewProvider({ gamesReducer, players }) {
+function ViewProvider({ players, dispatchGames }) {
-  const [/*games*/, dispatchGames] = gamesReducer;
-
   return (
     <div className='ViewProvider'>
       <Routes>
 
         <Route path='new' element={
           <NewGame
-            onSelectPlayer={(whitePlayer, blackPlayer) => {
-              dispatchGames({ type: 'nextNewGame', whitePlayer, blackPlayer })
-            }}
             players={players}
+            onSelectPlayer={(whitePlayer, blackPlayer) => dispatchGames({ type: "next", newGame: { whitePlayer, blackPlayer } })}
           />
         } />
 

webapp/src/container/games/Message2Opponent.jsx

@@ -1,48 +0,0 @@
-import React, { useContext, useRef, useState } from 'react';
-import { useLocation, matchPath } from 'react-router-dom';
-import { GamesContext } from '../../context/games';
-
-export default function Message2Opponent({ dispatchGames }) {
-  const games = useContext(GamesContext);
-  const { pathname } = useLocation();
-  const [value, setValue] = useState('');
-  const syncTimeoutRef = useRef(null);
-
-  if (syncTimeoutRef.current === null) { // <<--- Absorb external value if there is no scheduled sync
-    if (matchPath('/games/new', pathname)) {
-      if (value !== games.newGame.message2opponent)
-        setValue(games.newGame.message2opponent);
-    } else if (value !== '') {
-      setValue('');
-    }
-  }
-
-  /* --- */
-
-  const sync = (message2opponent) => {
-    syncTimeoutRef.current = null;
-
-    if (matchPath('/games/new', pathname))
-      return dispatchGames({ type: 'nextNewGame', message2opponent });
-
-    console.warn('unknown path');
-  }
-
-  const update = (value) => {
-    setValue(value);
-
-    if (syncTimeoutRef.current)
-      clearTimeout(syncTimeoutRef.current); // <<--- Cancel previous sync
-
-    syncTimeoutRef.current = setTimeout(() => sync(value), 500);
-  }
-
-  return (
-    <input className='Message2Opponent'
-      placeholder='Message to opponent'
-      value={value}
-      maxLength={150}
-      onChange={e => update(e.target.value)}
-    />
-  )
-}

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

@@ -29,7 +29,7 @@ export default function Create({ isCurrentUser, pushNewGame }) {
             opponentName,
             opponentColor,
             board: null, // default board configuration
-            message: games.newGame.message2opponent
+            message: 'default NewGame req message'
         }
 
         pushNewGame(reqParams);

webapp/src/hook/Location.js

@@ -1,46 +0,0 @@
-import { useRef, useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
-
-export default function usePrevious(value) {
-    const ref = useRef();
-
-    useEffect(() => {
-        ref.current = value;
-    });
-
-    return ref.current;
-}
-
-/* Usage example
-
-const useLocationChange = (action) => {
-    const location = useLocation();
-    const prevLocation = usePrevious(location);
-
-    useEffect(() => { 
-        action(location, prevLocation);
-    }, [location]);
-}
-
-*/
-
-// runs action(location) on location, i.e. route, change
-export const useLocationChange = (action) => {
-    const location = useLocation();
-    const prevLocation = usePrevious(location);
-
-    useEffect(() => {
-        if (location !== prevLocation)
-            action(location, prevLocation);
-    }, [action, location, prevLocation]);
-}
-
-/*
- * Usage example
- */ 
-// const MyComponent1 = () => {
-//     useLocationChange((location) => {
-//         console.log('handle route change here', location)
-//     });
-//     // other code
-// }

webapp/src/hook/Previous.js

@@ -0,0 +1,24 @@
+import { useRef, useEffect } from 'react';
+
+export default function usePrevious(value) {
+    const ref = useRef();
+    
+    useEffect(() => {
+        ref.current = value;
+    });
+
+    return ref.current;
+}
+
+/* Usage example
+
+const useLocationChange = (action) => {
+    const location = useLocation();
+    const prevLocation = usePrevious(location);
+
+    useEffect(() => { 
+        action(location, prevLocation);
+    }, [location]);
+}
+
+*/

webapp/src/reducer/games.js

@@ -6,8 +6,7 @@ const initialState = {
 
   newGame: {
     whitePlayer: '',
-    blackPlayer: '',
+    blackPlayer: ''
-    message2opponent: '',
   },
 
   // Network
@@ -21,12 +20,6 @@ function reducer(state, action) {
     case 'next':
       return nextState(state, action);
 
-    case 'nextNewGame':
-      return {
-        ...state,
-        newGame: nextState(state.newGame, action)
-      };
-
     default:
       throw Error('GamesReducer: unknown action.type', action.type);
   }