more cleanup

Author: Dereje1

client/src/components/header/header.js

@@ -70,8 +70,7 @@ export class Header extends React.Component {
     const { getUser: getUserStatus } = this.props;
     await getUserStatus();
     const { user } = this.props;
-    user.profile.remove = true;
-    clientEmitter(USER_LOGGED_OUT, user.profile);
+    clientEmitter(USER_LOGGED_OUT,{ ...user.profile, remove: true});
     window.location.assign('/auth/logout');
   };
 

client/src/components/oponnent/opponent.js

@@ -251,11 +251,11 @@ export class Opponent extends React.Component {
           multiPlayer={multiPlayer}
           usersLoggedIn={usersLoggedIn}
         />
-        <canvas
+        {multiPlayer && <canvas
           ref={this.canvasOpponent}
           width={game.canvas.canvasMajor.width / 2}
           height={game.canvas.canvasMajor.height / 2}
-        />
+        />}
         {this.audioPlayer()}
       </div>
     );

client/src/index.js

@@ -1,16 +1,28 @@
 /* default CRA imports */
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import './index.css';
-/* custom imports */
 import { Provider } from 'react-redux';
-import {store} from './store';
-import Router from './routes/index';
+import { store } from './store';
+import Header from './components/header/header';
+import Profile from './components/profile/profile';
+import Footer from './components/footer/footer';
+import Game from './components/game/game'
 
 
 ReactDOM.render(
   <Provider store={store}>
-    <Router />
+    <BrowserRouter>
+      <React.Fragment>
+        <Header />
+        <Switch>
+          <Route path="/" exact component={Game} />
+          <Route path="/profile" component={Profile} />
+        </Switch>
+        <Footer />
+      </React.Fragment>
+    </BrowserRouter>
   </Provider>,
   document.getElementById('root'),
 );

client/src/routes/index.js

@@ -4,7 +4,7 @@ import { socket as socketConstants } from './constants/index';
 
 const {
   serverEmit: {
-    SERVER_RESET, ACCEPTED_INVITATION, GAME_STARTED, OPPONENT_SCREEN,
+    ACCEPTED_INVITATION, GAME_STARTED, OPPONENT_SCREEN,
   },
   clientEmit: { SEND_LOGGED_IN_USER },
   GAME_COUNTDOWN,
@@ -13,7 +13,7 @@ const {
 
 const { dispatch } = store;
 
-export const socketConnection = io(CONNECTION);
+const socketConnection = io(CONNECTION);
 
 export const clientEmitter = (event, dataToEmit) => {
   socketConnection.emit(event, dataToEmit);
@@ -65,6 +65,7 @@ OPPONENT_SCREEN: triggered by: UPDATED_CLIENT_SCREEN
 FINISH_GAME: triggered by: GAME_OVER
 */
 
+// used for client side manipulation of incoming special events before dispatching
 const socketActionMap = {
   SERVER_RESET: () => serverReset(),
   ACCEPTED_INVITATION: (data) => {
@@ -83,17 +84,16 @@ const socketActionMap = {
 
 export const handleServerSocketResponses = (event, ...args) => {
   if (!Object.keys(socketConstants.serverEmit).includes(event)) {
-    console.log(`No action map found for event = ${event}`);
+    console.log(`No dispatch handler found for incoming event = ${event}`);
     return;
   }
   const [data, callback] = args;
-  const specialEvents = [SERVER_RESET, ACCEPTED_INVITATION, GAME_STARTED, OPPONENT_SCREEN]
 
-  if (specialEvents.includes(event)) {
+  if (Object.keys(socketActionMap).includes(event)) {
     return socketActionMap[event](data, callback);
-  } else {
-    dispatch({ type: `socket/${event}`, payload: data });
   }
+
+  return dispatch({ type: `socket/${event}`, payload: data });
 }
 
 socketConnection.onAny((event, ...args) => handleServerSocketResponses(event, ...args));

client/src/sockethandler.js

@@ -11,10 +11,6 @@ exports[`The Opponent component will render the oponent window 1`] = `
     setDifficulty={[Function]}
     socketState={Object {}}
   />
-  <canvas
-    height={300}
-    width={150}
-  />
   <audio
     src={
       Object {