patch useContext dependencies in Game component

This commit is contained in:
sorrelbri 2020-06-06 17:08:40 -07:00
parent 97242a2235
commit 77ced54c6f
3 changed files with 75 additions and 77 deletions

View file

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

View file

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

View file

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