stub sidebar component to display auth form

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

@@ -6,12 +6,17 @@ import { Switch, Route, BrowserRouter as Router } from 'react-router-dom';
 
 import socketIOClient from 'socket.io-client';
 
+import Sidebar from './components/Sidebar/Sidebar';
+
 import Account from './pages/Account/Account';
 import Game from './pages/Game/Game';
 import Home from './pages/Home/Home';
 import News from './pages/News/News';
 import Room from './pages/Room/Room';
 
+import { stateReducer } from './reducers/stateReducer';
+import { initState } from './reducers/init/stateReducer.init';
+
 export const socket = socketIOClient(config.apiAddress);
 
 
@@ -20,6 +25,12 @@ function App() {
   const [socketData, setSocketData] = useState();
   const [error, setError] = useState([]);
 
+  const [ state, dispatch ] = useReducer(
+    stateReducer,
+    {},
+    initState
+  );
+
   useEffect(() => {
     fetch(config.apiAddress)
     .then(res => res.text())
@@ -41,27 +52,33 @@ function App() {
         {fetchData ? <p>{fetchData}</p> : <></>}
         {socketData ? <p>{socketData}</p> : <></>}
         {error ? error.map(err => <p>{err}</p>): <></>}
+        
         <Switch>
 
           <Route path="/account">
-            <Account />
+            <Sidebar page="account" state={state} dispatch={dispatch}/>
+            <Account state={state} dispatch={dispatch}/>
           </Route>
 
           <Route path="/rooms">
-            <Room />
+            <Sidebar page="rooms"/>
+            <Room state={state} dispatch={dispatch}/>
           </Route>
 
           <Route path="/games">
-            <Game />
+            <Sidebar page="games"/>
+            <Game state={state} dispatch={dispatch}/>
           </Route>
         
           <Route path="/news">
-            <News />
+            <Sidebar page="news"/>
+            <News state={state} dispatch={dispatch}/>
           </Route>
         
           <Route path="/">
+            <Sidebar page="home" state={state} dispatch={dispatch}/>
             {/* Add ternary for login */}
-            <Home />
+            <Home state={state} dispatch={dispatch}/>
           </Route>
 
         </Switch>

packages/server/play-node-go/src/components/Sidebar/Sidebar.js

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import './Sidebar.scss';
+
+import AccountSidebar from '../../pages/Account/AccountSidebar';
+import GameSidebar from '../../pages/Game/GameSidebar';
+import HomeSidebar from '../../pages/Home/HomeSidebar';
+import NewsSidebar from '../../pages/News/NewsSidebar';
+import RoomSidebar from '../../pages/Room/RoomSidebar';
+
+const Sidebar = (props) => {
+
+  const displayComponent = props =>{
+    switch (props.page) {
+      case 'account':
+        return <AccountSidebar state={props.state}/>
+      case 'game':
+        return <GameSidebar state={props.state}/>
+      case 'home':
+        return <HomeSidebar state={props.state}/>
+      case 'news':
+        return <NewsSidebar state={props.state}/>
+      case 'room':
+        return <RoomSidebar state={props.state}/>
+      default:
+        return <></>
+    }
+  }
+
+  return (
+    <aside className="Sidebar" data-testid="Sidebar">
+      {displayComponent(props)}
+    </aside>
+  );
+}
+
+export default Sidebar;

packages/server/play-node-go/src/components/Sidebar/Sidebar.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Sidebar from './Sidebar';
+
+test('renders Sidebar without crashing', () => {
+  const { getByTestId } = render(<Sidebar />);
+  const SidebarDiv = getByTestId('Sidebar');
+  expect(SidebarDiv).toBeInTheDocument();
+});

packages/server/play-node-go/src/components/Signup/Signup.js

@@ -2,13 +2,42 @@ import React, { useState } from 'react';
 import './Signup.scss';
 
 const Signup = () => {
-  const [username, setUsername] = useState('');
+  const [ username, setUsername ] = useState('');
-  const [password, setPassword] = useState('');
+  const [ password, setPassword ] = useState('');
-  const [passwordConfirm, setPasswordConfirm] = useState('');
+  const [ confirmPassword, setConfirmPassword ] = useState('');
 
   return (
     <div className="Signup" data-testid="Signup">
+      <form data-testid="Signup__form">
         
+        <label htmlFor="username-input">Username:</label>
+        <input 
+          name="username"
+          id="username-input"
+          type="text"
+          onChange={e => setUsername(e.target.value)}
+          default="username"
+        />
+
+        <label htmlFor="password-input">Password:</label>
+        <input 
+          name="password"
+          id="password-input"
+          type="text"
+          onChange={e => setPassword(e.target.value)}
+          default=""
+        />
+
+        <label htmlFor="confirmPassword-input">confirmPassword:</label>
+        <input 
+          name="confirmPassword"
+          id="confirmPassword-input"
+          type="text"
+          onChange={e => setConfirmPassword(e.target.value)}
+          default=""
+        />
+
+      </form>
     </div>
   );
 }

packages/server/play-node-go/src/pages/Account/AccountSidebar.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+const AccountSidebar = () => {
+  return (  
+    <>
+    </>
+  );
+}
+
+export default AccountSidebar;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+
+const GameSidebar = () => {
+  return (  
+    <>
+    </>
+  );
+}
+
+export default GameSidebar;

packages/server/play-node-go/src/pages/Home/HomeSidebar.js

@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+
+import Signup from '../../components/Signup/Signup';
+import Login from '../../components/Login/Login';
+
+const HomeSidebar = (props) => {
+  const [ showForm, setShowForm ] = useState('');
+
+  return (  
+    <nav>
+      {props.state.user ? <></> : <>
+        <p onClick={()=>{setShowForm('login')}}>Login</p>
+        <p onClick={()=>{setShowForm('signup')}}>Signup</p>
+      </>}
+      {showForm === 'signup' ? <Signup /> : <></>}
+      {showForm === 'login' ? <Login /> : <></>}
+    </nav>
+  );
+}
+
+export default HomeSidebar;

packages/server/play-node-go/src/pages/News/NewsSidebar.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+const NewsSidebar = () => {
+  return (  
+    <>
+    </>
+  );
+}
+
+export default NewsSidebar;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+
+const RoomSidebar = () => {
+  return (  
+    <>
+    </>
+  );
+}
+
+export default RoomSidebar;

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

@@ -0,0 +1,9 @@
+//@ flow
+
+import type { state } from '../stateReducer';
+
+export const initState = (): state => {
+  return {
+    user: null
+  };
+}

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

@@ -0,0 +1,18 @@
+// @flow
+import { initState } from './init/stateReducer.init';
+
+export type state = {
+  user: {}
+}
+
+type action = {
+  type: string
+}
+
+export const stateReducer = (state: state, action: action): state => {
+  switch (action.type) {
+    case 'INIT': return initState();
+  
+    default: return state;
+  }
+}

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

@@ -0,0 +1,8 @@
+import {stateReducer} from './stateReducer';
+
+it('default returns state unaltered', () => {
+  const state = {data: 'example'};
+  const action = {type: ''};
+  expect(stateReducer(state, action)).toBe(state);
+});
+