Make rooms work

definitely-not-codenames/src/actions/chatActions.js

@@ -7,7 +7,7 @@ const addMessage = message => ({
 
 const startAddMessage = message => dispatch => {
   dispatch(addMessage(message));
-  dispatch(wsSend(message));
+  dispatch(wsSend({type: 'SEND_MESSAGE', payload: {message}}));
 };
 
 export {addMessage, startAddMessage};

definitely-not-codenames/src/actions/roomActions.js

@@ -5,8 +5,13 @@ const setRoom = roomID => ({
   roomID,
 });
 
+const startJoinRoom = roomID => dispatch => {
+  dispatch(wsSend({type: 'JOIN_ROOM', payload: {id: roomID}}));
+  dispatch(setRoom(roomID));
+};
+
 const startGetRoom = () => dispatch => {
   dispatch(wsSend({type: 'CREATE_ROOM'}));
 };
 
-export {setRoom, startGetRoom};
+export {setRoom, startJoinRoom, startGetRoom};

definitely-not-codenames/src/actions/userActions.js

@@ -0,0 +1,6 @@
+const setUser = userID => ({
+  type: 'SET_USER',
+  userID,
+});
+
+export {setUser};

definitely-not-codenames/src/components/GamePage.js

@@ -1,14 +1,32 @@
-import React from "react";
-import { useParams } from "react-router-dom";
-import ChatInput from "./ChatInput";
-import DisplayMessages from "./DisplayMessages";
+import React, {useEffect} from 'react';
+import {useParams} from 'react-router-dom';
+import {useDispatch, useSelector} from 'react-redux';
+import ChatInput from './ChatInput';
+import DisplayMessages from './DisplayMessages';
+import {startJoinRoom} from '../actions/roomActions';
 
 const GamePage = () => {
-  const { id } = useParams();
+  const {roomID} = useParams();
+  const dispatch = useDispatch();
+  const userID = useSelector(state => state.user.id);
+
+  useEffect(() => {
+    if (userID) {
+      dispatch(startJoinRoom(roomID));
+    }
+  }, [dispatch, roomID, userID]);
 
   return (
     <div>
-      <p>GamePage: {id} </p>
+      <p>GamePage</p>
+      <p>
+        Room:
+        {roomID}
+      </p>
+      <p>
+        User:
+        {userID}
+      </p>
       <ChatInput />
       <DisplayMessages />
     </div>

definitely-not-codenames/src/components/HomePage.js

@@ -1,5 +1,5 @@
-import React from "react";
-import RequestRoom from "./RequestRoom";
+import React from 'react';
+import RequestRoom from './RequestRoom';
 
 const HomePage = () => {
   return (

definitely-not-codenames/src/components/RequestRoom.js

@@ -7,12 +7,12 @@ const RequestRoom = () => {
   const history = useHistory();
   const dispatch = useDispatch();
 
-  const roomId = useSelector(state => state.room.room);
+  const roomId = useSelector(state => state.room.id);
   useEffect(() => {
     if (roomId) {
       history.push(`/game/${roomId}`);
     }
-  }, [roomId]);
+  }, [roomId, history]);
 
   const handleClick = () => {
     dispatch(startGetRoom());

definitely-not-codenames/src/middlware/receiver.js

@@ -1,5 +1,6 @@
 import {addMessage} from '../actions/chatActions';
 import {setRoom} from '../actions/roomActions';
+import {setUser} from '../actions/userActions';
 
 const receiver = (dispatch, rawJSON) => {
   let data;
@@ -10,13 +11,19 @@ const receiver = (dispatch, rawJSON) => {
     return;
   }
 
+  // eslint-disable-next-line no-console
+  console.log(data.type);
+
   switch (data.type) {
-    case 'SEND_MESSAGE':
-      dispatch(addMessage(data.message));
+    case 'MESSAGE_RECEIVED':
+      dispatch(addMessage(data.payload.message));
       break;
     case 'ROOM_CREATED':
       dispatch(setRoom(data.payload.id));
       break;
+    case 'USER_CREATED':
+      dispatch(setUser(data.payload.id));
+      break;
     default:
   }
 };

definitely-not-codenames/src/reducers/roomReducer.js

@@ -1,12 +1,12 @@
 import {createReducer} from '@reduxjs/toolkit';
 
 const initialState = {
-  room: false,
+  id: null,
 };
 
 const roomReducer = createReducer(initialState, {
   SET_ROOM: (state, action) => {
-    state.room = action.roomID;
+    state.id = action.roomID;
   },
 });
 

definitely-not-codenames/src/reducers/userReducer.js

@@ -0,0 +1,13 @@
+import {createReducer} from '@reduxjs/toolkit';
+
+const initialState = {
+  id: null,
+};
+
+const userReducer = createReducer(initialState, {
+  SET_USER: (state, action) => {
+    state.id = action.userID;
+  },
+});
+
+export default userReducer;

definitely-not-codenames/src/routers/AppRouter.js

@@ -8,7 +8,7 @@ const AppRouter = () => {
     <BrowserRouter>
       <Switch>
         <Route exact path="/" component={HomePage} />
-        <Route path="/game/:id" component={GamePage} />
+        <Route path="/game/:roomID" component={GamePage} />
       </Switch>
     </BrowserRouter>
   );

definitely-not-codenames/src/store/store.js

@@ -3,11 +3,13 @@ import chatReducer from '../reducers/chatReducer';
 
 import websocketMiddleware from '../middlware/websocket';
 import roomReducer from '../reducers/roomReducer';
+import userReducer from '../reducers/userReducer';
 
 const store = configureStore({
   reducer: {
     chat: chatReducer,
     room: roomReducer,
+    user: userReducer,
   },
   middleware: [...getDefaultMiddleware(), websocketMiddleware],
 });