stub socket connection to game id namespace

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

@@ -64,7 +64,7 @@ function App() {
             <MainWrapper page="room" state={state} dispatch={dispatch}/>
           </Route>
 
-          <Route path="/games">
+          <Route path="/games/:id">
             <MainWrapper page="game" state={state} dispatch={dispatch}/>
           </Route>
         

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

@@ -1,12 +1,74 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import socketIOClient from 'socket.io-client';
+import config from '../../config';
+import gamesServices from '../../services/api/gamesServices';
 import './Game.scss';
 
 import Development from '../../components/Display/Development/Development';
 
-const Game = () => {
+const Game = (props) => {
+  const { state, dispatch } = props;
+  const gameId = parseInt(useParams().id) || 0;
+  const [ socket, setSocket ] = useState(false)
+
+  const fetchGameAPI = async () => {
+    console.log(gameId)
+    const response = await gamesServices.getGameService(gameId);
+    console.log(response)
+    if (response) {
+      const action = {
+        type: 'GAMES',
+        message: 'SET_ACTIVE',
+        body: response
+      }
+      return dispatch(action);
+    }
+  }
+  
+  useEffect(() => {
+    fetchGameAPI();
+  }, [])
+
+  // ! [start] gameSocket
+
+  const roomSocketConnect = (roomSocket) => {
+    roomSocket.on('connect', socket => {
+      roomSocket.emit('joined game', gameId)
+      roomSocket.on('success', () => setSocket(true))
+    });
+    roomSocket.on('connect_error', err => {
+      setSocket(false)
+      console.log(err);
+    });
+    roomSocket.on('error', err => {
+      setSocket(false)
+      console.log(err);
+    });
+  }
+
+  useEffect(() => {
+    if (!state.active) return;
+    const roomSocket = socketIOClient(`${config.socketAddress}/${state.active.game.room}`)
+    roomSocketConnect(roomSocket);
+  }, [state.active])
+
+  useEffect(() => {
+    const data = {
+      user: state.user,
+      game: state.joinGame
+    };
+    console.log('emitting request')
+    console.log(data)
+    // socket.emit('join_game_request', data)
+  }, [state.joinGame])
+
+  // ! [end]
+
   return (  
     <div className="Game" data-testid="Game">
       <p>Game</p>
+      <span className="Room__connection">{socket ? '✓' : ' ⃠'}</span>
       <Development />
     </div>
   );

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

@@ -1,9 +1,14 @@
 import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom'
 import { render } from '@testing-library/react';
 import Game from './Game';
 
 test('renders Game without crashing', () => {
-  const { getByTestId } = render(<Game />);
+  const { getByTestId } = render(
+    <Router>
+      <Game />
+    </Router>
+  );
   const GameDiv = getByTestId('Game');
   expect(GameDiv).toBeInTheDocument();
 });

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

@@ -14,7 +14,7 @@ const Room = (props) => {
   const state = props.state;
   const dispatch = props.dispatch;
   const roomId = parseInt(useParams().id) || 0;
-  const [ socketData, setSocketData ] = useState(false);
+  const [ socket, setSocket ] = useState(false);
 
   const fetchRoomAPI = async () => {
     const response = await roomsServices.getRoomService(roomId);
@@ -39,17 +39,20 @@ const Room = (props) => {
     roomSocket.emit('connect');
     // ! dispatch data
     roomSocket.on('connect', socket => {
-      setSocketData(true)
+      setSocket(true)
     });
     roomSocket.on('join_game_request', data => {
+      // !
       console.log(data)
     })
     roomSocket.on('connect_error', err => {
-      setSocketData(false)
+      setSocket(false)
+      // !
       console.log(err);
     });
     roomSocket.on('error', err => {
-      setSocketData(false)
+      setSocket(false)
+      // !
       console.log(err);
     });
   }
@@ -103,7 +106,7 @@ const Room = (props) => {
     <div className="Room" data-testid="Room">
       <div className="Room__heading">
         <h2>{state.currentRoom ? state.currentRoom.name : 'Loading'}</h2>
-        <span className="Room__connection">{socketData ? '✓' : ' ⃠'}</span>
+        <span className="Room__connection">{socket ? '✓' : ' ⃠'}</span>
         {state.errors.joinGame ? <ActionError error={state.errors.joinGame}/> : <></>}
       </div>
 

packages/play-node-go/play-node-go/src/reducers/games/stateReducer.games.js

@@ -21,6 +21,8 @@ export const gamesReducer = (state: state, action: action):state => {
       const id = action.body;
       return {...state, joinGame: id};
 
+    case 'SET_ACTIVE':
+      return {...state, active: action.body};
       
     default:
       return state;

packages/play-node-go/play-node-go/src/reducers/games/stateReducer.games.test.js

@@ -9,6 +9,38 @@ const gamesData = [
   }
 ];
 
+const activeGameData = {
+  game: {
+    id: 1,
+    application: "node-go",
+    application_version: "0.1.0",
+    board_size: 19,
+    komi: 6.5,
+    handicap: 0,
+    open: false,
+    win_type: null,
+    player_black: "user-one",
+  player_black_rank: "UR",
+  player_white: "user-two",
+  player_white_rank: "UR",
+  black_captures: null,
+  white_captures: null,
+  score: null,
+  description: null,
+  event: null,
+  round: null,
+  name: null,
+  room: 1,
+  main_time: "untimed",
+  time_period: 1,
+  period_length: 0,
+  overtime: "untimed",
+  overtime_period: 0,
+  overtime_length: 0
+  },
+  record: []
+}
+
 it('default returns state unaltered', () => {
   const state = initState();
   const action = {type: 'GAMES', message: '', body: gamesData};
@@ -19,4 +51,10 @@ it('set games returns state with games', () => {
   const state = initState();
   const action = {type: 'GAMES', message: 'SET_GAMES', body: gamesData};
   expect(stateReducer(state, action)).toEqual({...state, games: gamesData});
+})
+
+it('active game returns state with active game details', () => {
+  const state = initState();
+  const action = {type: 'GAMES', message: 'SET_ACTIVE', body: activeGameData};
+  expect(stateReducer(state, action)).toEqual({...state, active: activeGameData});
 })

packages/play-node-go/play-node-go/src/services/api/gamesServices.js

@@ -0,0 +1,24 @@
+import config from '../../config';
+
+const apiAddress = config.apiAddress;
+const gamesAddress = `${apiAddress}/games`
+
+var headers = new Headers();
+headers.append('Content-Type', 'application/json');
+headers.append('Accept', 'application/json');
+headers.append('Sec-Fetch-Site', 'cross-site')
+
+const getGameService = async (gameIndex) => {
+  const response = await fetch(`${gamesAddress}/${gameIndex}`, 
+    {method: 'GET', credentials: 'include', headers: headers}
+  )
+  .then(res => res.text())
+  .then(text => JSON.parse(text))
+  .catch(err => err);
+
+  return response;
+}
+  
+export default {
+  getGameService
+}

packages/play-node-go/play-node-go/src/services/api/roomsServices.js

@@ -25,6 +25,7 @@ const getRoomService = async (roomIndex) => {
   )
   .then(res => res.text())
   .then(text => JSON.parse(text))
+  
   .then(obj => {
     obj.games = obj.roomGames.map(game => {
       delete Object.assign(game, {boardSize: game.board_size }).board_size;
@@ -33,6 +34,7 @@ const getRoomService = async (roomIndex) => {
       delete Object.assign(game, {playerWhite: game.player_white }).player_white;
       delete Object.assign(game, {playerWhiteRank: game.player_white_rank }).player_white_rank;
       delete Object.assign(game, {winType: game.win_type }).win_type;
+
       return game;
     })
     return obj;