refacor sockets on server and client to utilize dispatch for socket meessages

play-node-go/src/App.js

@@ -1,5 +1,4 @@
 import React, {useState, useEffect, useReducer} from 'react';
-import socketIOClient from 'socket.io-client';
 import config from './config';
 import { Switch, Route, BrowserRouter as Router, Redirect } from 'react-router-dom';
 import MainWrapper from './pages/Layout/MainWrapper/MainWrapper';
@@ -8,14 +7,11 @@ import { initState } from './reducers/init/stateReducer.init';
 import indexServices from './services/api/indexServices';
 import './App.scss';
 
-export const socket = socketIOClient(config.socketAddress);
+import socketIOClient from 'socket.io-client';
+const socket = socketIOClient(config.socketAddress);
 
 
 function App() {
-  const [fetchData, setFetchData] = useState();
-  const [socketData, setSocketData] = useState();
-  const [error, setError] = useState([]);
-
   const [ state, dispatch ] = useReducer(
     stateReducer,
     {},
@@ -39,11 +35,8 @@ function App() {
   }, [])
 
   const socketConnect = () => {
-    socket.removeAllListeners();
+    if (state.connect) return;
-    socket.emit('connect');
+    dispatch({type:'SOCKET', message: 'LAUNCH', body:{socket, dispatch}});
-    socket.on('connected', data => setSocketData('socket connected'));
-    socket.on('connect_error', err => setError([...error, err]));
-    socket.on('error', err => setError([...error, err]))
   }
 
   useEffect(() => {
@@ -53,7 +46,7 @@ function App() {
   return (
     <Router>
       
-      <div data-testid="App" className="App">        
+      <div data-testid="App" className="App">
         <Switch>
 
           <Route path="/account">
@@ -84,9 +77,7 @@ function App() {
 
         </Switch>
         <h1>React Boilerplate</h1>
-        {fetchData ? <p>{fetchData}</p> : <></>}
+        <p>{state.connect ? '✓' : ' ⃠'}</p>
-        {socketData ? <p>{socketData}</p> : <></>}
-        {/* {error ? error.map(err => <p>{err}</p>): <></>} */}
       </div>
     </Router>
   );

play-node-go/src/io.js

@@ -0,0 +1,30 @@
+import socketIOClient from 'socket.io-client';
+import config from './config';
+
+
+const launch = (socket, dispatch) => {
+
+  socket.on('connected', () => {
+    dispatch({type:'SOCKET', message:'CONNECTED', body:{}});
+  });
+  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: 'ROOM', message: 'CONNECT_ROOM', body: data});
+  });
+
+  socket.on('new_user', (data) => {
+    console.log(data)
+  })
+
+  return socket;
+}
+
+export {
+  launch
+}

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

@@ -11,10 +11,9 @@ import ActionError from '../../components/Error/ActionError/ActionError';
 import Development from '../../components/Display/Development/Development';
 
 const Room = (props) => {
-  const state = props.state;
+  const { state, dispatch} = props;
-  const dispatch = props.dispatch;
   const roomId = parseInt(useParams().id) || 0;
-  const [ socket, setSocket ] = useState(false);
+  const socket = socketIOClient(`${config.socketAddress}/${roomId}`);
 
   const fetchRoomAPI = async () => {
     const response = await roomsServices.getRoomService(roomId);
@@ -33,44 +32,20 @@ const Room = (props) => {
   }, [])
 
   // ! [start] roomSocket
-  const roomSocket = socketIOClient(`${config.socketAddress}/${roomId}`)
 
   const roomSocketConnect = () => {
-    roomSocket.emit('connect');
+    const action = {
-    // ! dispatch data
+      type: 'SOCKET',
-    roomSocket.on('connect', socket => {
+      message: 'CONNECT_ROOM',
-      setSocket(true)
+      body: {user: state.user, room: roomId, socket}
-    });
+    }
-    roomSocket.on('join_game_request', data => {
+    dispatch(action)
-      // !
-      console.log(data)
-    })
-    roomSocket.on('connect_error', err => {
-      setSocket(false)
-      // !
-      console.log(err);
-    });
-    roomSocket.on('error', err => {
-      setSocket(false)
-      // !
-      console.log(err);
-    });
   }
 
   useEffect(() => {
     roomSocketConnect();
   }, [])
 
-  useEffect(() => {
-    const data = {
-      user: state.user,
-      game: state.joinGame
-    };
-    console.log('emitting request')
-    console.log(data)
-    roomSocket.emit('join_game_request', data)
-  }, [state.joinGame])
-
   // ! [end]
 
   const renderGames = () => {

play-node-go/src/reducers/init/stateReducer.init.js

@@ -1,6 +1,7 @@
 //@ flow
 
 import type { state } from '../stateReducer';
+const socket = require('../../io');
 
 export const initState = (): state => {
   return {
@@ -9,6 +10,7 @@ export const initState = (): state => {
     currentRoom: {},
     messages: {},
     games: {},
-    joinGame: {}
+    joinGame: {},
+    socket: {}
   };
 }

play-node-go/src/reducers/socket/stateReducer.socket.js

@@ -0,0 +1,30 @@
+// @flow
+import type { state, action } from '../stateReducer';
+import { stateReducer } from '../stateReducer';
+const io = require('../../io');
+
+export const socketReducer = (state: state, action: action):state => {
+  switch(action.message) {
+
+    case 'CONNECTED':
+      return {...state, connect: 'home'}
+
+    case 'LAUNCH': {
+      const {socket, dispatch} = action.body;
+      const launchedSocket = io.launch(socket, dispatch);
+      return {...state, socket: launchedSocket};
+    }
+
+    case 'CONNECT_ROOM': {
+      const {socket, ...data} = action.body;
+      // if (Object.entries(state.socket)) {
+      //   state.socket.close();
+      // }
+      socket.emit('connect_room', data);
+      return {...state, socket, connect:''};
+    }
+    
+    default:
+      return state;
+  }
+}

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

@@ -6,11 +6,13 @@ import { indexReducer } from './index/stateReducer.index';
 import { roomsReducer } from './rooms/stateReducer.rooms';
 import { messagesReducer } from './messages/stateReducer.messages';
 import { gamesReducer } from './games/stateReducer.games';
+import { socketReducer } from './socket/stateReducer.socket';
 
 export type state = {
   user: {},
   errors: {},
-  messages: []
+  messages: [],
+  state: {}
 }
 
 export type action = {
@@ -40,6 +42,9 @@ export const stateReducer = (state: state, action: action): state => {
     case 'ROOMS':
       return roomsReducer(errorStrippedState, action);
 
+    case 'SOCKET':
+      return socketReducer(errorStrippedState, action);
+
     case 'ERR':
       return errorReducer(errorStrippedState, action);
 

server/controllers/api/apiGame.js

@@ -2,15 +2,14 @@ const roomQueries = require('../../data/queries/room');
 const messageQueries = require('../../data/queries/message');
 const gameQueries = require('../../data/queries/game');
 const moveQueries = require('../../data/queries/move');
-const { enableGameSocket } = require('../../socket');
 
 const show = async (req, res, next) => {
   try {
     const gameId = req.params.id;
     if (!gameId) throw('missing game parameter')
-    const game = await gameQueries.findGameById(gameId);
-    enableGameSocket(game.room);
     
+    // TODO Promise.all()
+    const game = await gameQueries.findGameById(gameId);    
     const record = await moveQueries.findGameRecord(gameId);
     res.status(200).json({game, record})
   }

server/controllers/api/apiRoom.js

@@ -1,7 +1,7 @@
 const roomQueries = require('../../data/queries/room');
 const messageQueries = require('../../data/queries/message');
 const gameQueries = require('../../data/queries/game');
-const {enableRoomSocket} = require('../../socket');
+const socket = require('../../socket');
 
 const getAll = async (req, res, next) => {
   try {
@@ -21,7 +21,7 @@ const show = async (req, res, next) => {
     if (!roomId) throw('missing room parameter')
     
     // TODO eventually add check for user's private rooms
-    enableRoomSocket(roomId);
+    socket.roomSocket(roomId);
 
     const currentRoom = await roomQueries.findRoomById(roomId);
     const messages = await messageQueries.findMessageByRoom(roomId);
@@ -30,6 +30,7 @@ const show = async (req, res, next) => {
     res.status(200).json(body);
   }
   catch (err) {
+    console.log(err)
     res.status(500).json(err);
   }
 }

server/socket.js

@@ -4,68 +4,29 @@ const io = socketIO({ cookie: false });
 
 const gameQueries = require('./data/queries/game');
 
-io.on('connection', ()=> {
+io.on('connection', socket=> {
-  io.emit('connected', {message: 'socket connected'});
+  socket.emit('connected', {message: 'socket connected'});
+
+  socket.on('connect_room', data => {
+    const { user, room } = data;
+    const roomIo = io.of(room);
+    roomIo.emit('new_user', user)
+    // roomIo.on('connection', roomSocket => {
+    // })
+  });
 })
 
-const enableRoomSocket = () => {
+const roomSocket = (roomId) => {
-  const roomSocket = io.of(roomId);
+  const roomIo = io.of(roomId)
-  roomSocket.on('connection', (socket) => {
+  roomIo.on('connection', socket => {
-    
+    console.log('connected')
-    //! Join Game Request queries db for game, ensures unique player joining
+    socket.on('connect_room', data => {
-    socket.on('join_game_request', async data => {
+      console.log(data)
-      const gameRequest = await logJoinGameRequest(data);
-
-      if (gameRequest.err) {
-        roomSocket.emit('join_game_request_error', gameRequest.err);
-      }
-
-      roomSocket.emit('join_game_request', gameRequest);
-    });
-
-  });
-  return roomSocket;
-}
-
-const enableGameSocket = (roomId) => {
-  const gameSocket = io.of(roomId);
-  let game;
-  gameSocket.on('connection', (socket) => {
-    socket.on('joined game', (gameId) => {
-      game = `game-${gameId}`;
-      console.log(gameId)
-      socket.join(game);
-      // socket
-      // .to(game)
-      io.sockets.in(game).emit('success', game)
     })
-    
+  })
-  });
-  // console.log(game)
-  // gameSocket
-  // .to(game)
-  // .emit(`success`, game)
-  // socket.on('hey', () => console.log('hey'))
-
-
-  return gameSocket;
 }
 
 module.exports = {
   io,
-  enableRoomSocket,
+  roomSocket
-  enableGameSocket
 }
-
-async function logJoinGameRequest (data) {
-  const {user, game} = data;
-  const requestedGame = await gameQueries.findGameById(game.id);
-  
-  if (requestedGame.user_black === user.id) {
-    return { err: 'players must be unique' }
-  }
-
-  const requestingUser = {...user};
-  delete requestingUser.email;
-  return { requestingUser, requestedGame }
-}