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 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("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("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("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("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("new_user", (data) => {
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("game_connected", (data) => {
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("update_board", (data) => {
dispatch({ type: "GAMES", message: "UPDATE_BOARD", body: data });
});
return socket;
}
};
export {
launch
}
export { launch };

View file

@ -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">

View file

@ -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;
}