patch useContext dependencies in Game component

packages/play-node-go/src/io.js

@@ -1,43 +1,48 @@
-import socketIOClient from 'socket.io-client';
-import config from './config';
+import socketIOClient from "socket.io-client";
+import config from "./config";
 
 const launch = (nsp, dispatch) => {
   const socket = socketIOClient(`${config.socketAddress}/${nsp}`);
-  
-  socket.on('connected', () => {
-    dispatch({ type:'SOCKET', message:'CONNECTED', body:{nsp: socket.nsp} });
-  });
-  socket.on('connect_error', err => {
-    dispatch({ type: 'ERR', message:'SOCKET_ERROR', body: { socketError: err }});
-  });
-  socket.on('error', err => {
-    dispatch({ type: 'ERR', message:'SOCKET_ERROR', body: { socketError: err } });
-  });
-  
-  socket.on('room_connected', (data) => {
-    dispatch({ type: 'ROOMS', message: 'CONNECT_ROOM', body: data });
-  });
-  
-  socket.on('new_user', (data) => {
-    console.log('new_user received')
-    dispatch({ type: 'ROOMS', message: 'NEW_USER', body: data })
-  })
 
-  socket.on('game_connected', (data) => {
-    console.log(data)
-    console.log('game_connected received')
-    dispatch({ type: 'GAMES', message: 'UPDATE_BOARD', body: data })
-  })
-  
-  socket.on('update_board', (data) => {
-    console.log(data)
-    console.log('update_board received')
-    dispatch({ type: 'GAMES', message: 'UPDATE_BOARD', body: data })
-  })
+  socket.on("connected", () => {
+    dispatch({
+      type: "SOCKET",
+      message: "CONNECTED",
+      body: { nsp: socket.nsp },
+    });
+  });
+  socket.on("connect_error", (err) => {
+    dispatch({
+      type: "ERR",
+      message: "SOCKET_ERROR",
+      body: { socketError: err },
+    });
+  });
+  socket.on("error", (err) => {
+    dispatch({
+      type: "ERR",
+      message: "SOCKET_ERROR",
+      body: { socketError: err },
+    });
+  });
+
+  socket.on("room_connected", (data) => {
+    dispatch({ type: "ROOMS", message: "CONNECT_ROOM", body: data });
+  });
+
+  socket.on("new_user", (data) => {
+    dispatch({ type: "ROOMS", message: "NEW_USER", body: data });
+  });
+
+  socket.on("game_connected", (data) => {
+    dispatch({ type: "GAMES", message: "UPDATE_BOARD", body: data });
+  });
+
+  socket.on("update_board", (data) => {
+    dispatch({ type: "GAMES", message: "UPDATE_BOARD", body: data });
+  });
 
   return socket;
-}
+};
 
-export {
-  launch
-}
+export { launch };

packages/play-node-go/src/pages/Game/Game.js

@@ -11,6 +11,8 @@ const Game = (props) => {
   const gameId = parseInt(useParams().id) || 0;
   const [playerBlackMeta, setPlayerBlackMeta] = useState({});
   const [playerWhiteMeta, setPlayerWhiteMeta] = useState({});
+  const playerState = state?.meta?.playerState;
+  const game = state.active?.game;
 
   useEffect(() => {
     const fetchGameAPI = async () => {
@@ -42,14 +44,9 @@ const Game = (props) => {
   }, [state.active.game, dispatch, state.user]);
 
   useEffect(() => {
-    if (!state.meta) return;
-    const {
-      playerBlack,
-      playerBlackRank,
-      playerWhite,
-      playerWhiteRank,
-    } = state.active.game;
-    const { bCaptures, wCaptures } = state.meta.playerState;
+    if (!game || !playerState) return;
+    const { playerBlack, playerBlackRank, playerWhite, playerWhiteRank } = game;
+    const { bCaptures, wCaptures } = playerState;
     setPlayerBlackMeta({
       player: playerBlack,
       rank: playerBlackRank,
@@ -62,7 +59,7 @@ const Game = (props) => {
       captures: wCaptures,
       stones: "white",
     });
-  }, [state?.meta?.playerState, state.active?.game]);
+  }, [playerState, game]);
 
   return (
     <div className="Game" data-testid="Game">

packages/play-node-go/src/reducers/socket/reducer.socket.js

@@ -1,69 +1,65 @@
-import { stateReducer } from '../reducer';
-const io = require('../../io');
+import { stateReducer } from "../reducer";
+const io = require("../../io");
 
 export const socketReducer = (state, action) => {
-  switch(action.message) {
+  switch (action.message) {
+    case "CONNECTED":
+      return { ...state, connect: { type: "home", location: action.body.nsp } };
 
-    case 'CONNECTED':
-      console.log(action.body.nsp)
-      return {...state, connect: { type: 'home', location: action.body.nsp } }
-
-    case 'LAUNCH': {
-      const {nsp, dispatch} = action.body;
+    case "LAUNCH": {
+      const { nsp, dispatch } = action.body;
       const launchedSocket = io.launch(nsp, dispatch);
-      return {...state, socket: launchedSocket};
+      return { ...state, socket: launchedSocket };
     }
 
-    case 'CONNECT_ROOM': {
-      const {user, room, dispatch} = action.body;
+    case "CONNECT_ROOM": {
+      const { user, room, dispatch } = action.body;
       let priorSocket = state.socket;
       if (!priorSocket.nsp) {
-        priorSocket = io.launch('', dispatch)
+        priorSocket = io.launch("", dispatch);
       }
       if (priorSocket.nsp !== `/${room}`) {
-        priorSocket.emit('connect_room', {user, room});
+        priorSocket.emit("connect_room", { user, room });
         priorSocket.close();
       }
       const socket = io.launch(room, dispatch);
-      return {...state, socket}
+      return { ...state, socket };
     }
 
-    case 'CONNECT_GAME': {
+    case "CONNECT_GAME": {
       return connectGame(state, action);
     }
 
-    case 'MAKE_MOVE': {
+    case "MAKE_MOVE": {
       return makeMove(state, action);
     }
 
     default:
       return state;
   }
-}
+};
 
-function connectGame (state, action) {
+function connectGame(state, action) {
   const { user, game, dispatch } = action.body;
   const priorSocket = state.socket;
   let updatedState;
-  if ( !priorSocket.nsp || priorSocket.nsp !== `/${game.room}` ) {
+  if (!priorSocket.nsp || priorSocket.nsp !== `/${game.room}`) {
     const connectRoomAction = {
-      type: 'SOCKET',
-      message: 'CONNECT_ROOM',
-      body: { user, room: game.room, dispatch}
-    }
+      type: "SOCKET",
+      message: "CONNECT_ROOM",
+      body: { user, room: game.room, dispatch },
+    };
     updatedState = stateReducer(state, connectRoomAction);
-    
   }
-  if (!updatedState) updatedState = {...state};
+  if (!updatedState) updatedState = { ...state };
   const socket = updatedState.socket;
-  socket.emit('connect_game', {user, game});
-  return {...updatedState};
+  socket.emit("connect_game", { user, game });
+  return { ...updatedState };
 }
 
-function makeMove (state, action) {
+function makeMove(state, action) {
   // const { user, game, room, board, move } = action.body;
   const socket = state.socket;
-  console.log(action)
-  socket.emit('make_move', {...action.body});
+  socket.emit("make_move", { ...action.body });
   return state;
-}
+}