stub home and rooms sidebar components

packages/server/packages/play-node-go/play-node-go/src/components/Button/Archive/Archive.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import './Archive.scss';
+
+const ArchiveButton = () => {
+  return (
+    <>
+      Archive
+    </>
+  );
+}
+
+export default ArchiveButton;

packages/server/packages/play-node-go/play-node-go/src/components/Button/Library/Library.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import './Library.scss';
+
+const LibraryButton = () => {
+  return (
+    <>
+      Library
+    </>
+  );
+}
+
+export default LibraryButton;

packages/server/packages/play-node-go/play-node-go/src/components/Button/NewGame/NewGame.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import './NewGame.scss';
+
+const NewGameButton = () => {
+  return (
+    <>
+      New Game
+    </>
+  );
+}
+
+export default NewGameButton;

packages/server/packages/play-node-go/play-node-go/src/components/Button/NewRoom/NewRoom.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import './NewRoom.scss';
+
+const NewRoomButton = () => {
+  return (  
+    <>
+      New Room
+    </>
+  );
+}
+
+export default NewRoomButton;

packages/server/packages/play-node-go/play-node-go/src/components/Error/FormError/FormError.scss

@@ -0,0 +1,5 @@
+@import '../../../../public/stylesheets/partials/variables';
+
+span.FormError {
+  color: map-get($colors, "error");;
+}

packages/server/packages/play-node-go/play-node-go/src/components/Form/FindGame/FindGame.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import './FindGame.scss';
+
+const FindGameForm = () => {
+  return (
+    <>
+      Find Game
+    </>
+  );
+}
+
+export default FindGameForm;

packages/server/packages/play-node-go/play-node-go/src/components/Form/FindRoom/FindRoom.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import './FindRoom.scss';
+
+const FindRoomForm = () => {
+  return (
+    <>
+      Find Room
+    </>
+    );
+}
+ 
+export default FindRoomForm;

packages/server/packages/play-node-go/play-node-go/src/components/Form/Login/Login.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import './Login.scss';
-import authServices from '../../services/authServices';
+import authServices from '../../../services/authServices';
-import FormError from '../FormError/FormError';
+import FormError from '../../Error/FormError/FormError';
 
 const Login = (props) => {
   const [username, setUsername] = useState('');

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import './Signup.scss';
-import authServices from '../../services/authServices';
+import authServices from '../../../services/authServices';
-import FormError from '../FormError/FormError';
+import FormError from '../../Error/FormError/FormError';
 
 const Signup = (props) => {
   const [ username, setUsername ] = useState('');

packages/server/packages/play-node-go/play-node-go/src/components/FormError/FormError.scss

@@ -1,5 +0,0 @@
-@import '../../../public/stylesheets/partials/variables';
-
-span.FormError {
-  color: map-get($colors, "error");;
-}

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

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

packages/server/packages/play-node-go/play-node-go/src/components/MainWrapper/MainWrapper.scss

@@ -1,39 +0,0 @@
-@import '../../../public/stylesheets/partials/mixins';
-
-div.main-wrapper {
-  display: flex;
-  justify-content: flex-start;
-  @include fullspan;
-  
-  aside {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    max-width: 20vw;
-    a {
-      display: block;
-    }
-  }
-
-  main {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-grow: 4;
-  }
-}
-
-div.Game {
-  display: flex;
-  justify-content: space-between;
-  @include fullspan;
-  aside {
-    @include flexAround(column);
-    flex-grow: 1;
-  }
-  
-  div.game-area {
-    @include flexAround(column);
-    flex-grow: 2;
-  }
-}

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

@@ -1,19 +1,30 @@
 import React, { useState } from 'react';
 
-import Signup from '../../components/Signup/Signup';
+import Signup from '../../components/Form/Signup/Signup';
-import Login from '../../components/Login/Login';
+import Login from '../../components/Form/Login/Login';
+import NewRoomButton from '../../components/Button/NewRoom/NewRoom';
+import FindRoomForm from '../../components/Form/FindRoom/FindRoom';
+import LibraryButton from '../../components/Button/Library/Library';
 
 const HomeSidebar = (props) => {
   const [ showForm, setShowForm ] = useState('');
 
+  const ifUser = <>
+    <FindRoomForm />
+    <NewRoomButton />
+    <LibraryButton />
+  </>
+
+  const ifNoUser = <>
+    <p onClick={()=>{setShowForm('login')}}>Login</p>
+    {showForm === 'login' ? <Login dispatch={props.dispatch} state={props.state}/> : <></>}
+    <p onClick={()=>{setShowForm('signup')}}>Signup</p>
+    {showForm === 'signup' ? <Signup dispatch={props.dispatch} state={props.state}/> : <></>}
+  </>
+
   return (  
     <nav>
-      {props.state.user ? <></> : <>
+      {props.state.user ? ifUser : ifNoUser}
-        <p onClick={()=>{setShowForm('login')}}>Login</p>
-        {showForm === 'login' ? <Login dispatch={props.dispatch} state={props.state}/> : <></>}
-        <p onClick={()=>{setShowForm('signup')}}>Signup</p>
-        {showForm === 'signup' ? <Signup dispatch={props.dispatch} state={props.state}/> : <></>}
-      </>}
     </nav>
   );
 }

packages/server/packages/play-node-go/play-node-go/src/pages/Layout/MainWrapper/MainWrapper.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import './MainWrapper.scss';
 
+import NavBar from '../NavBar/NavBar';
 import Sidebar from '../Sidebar/Sidebar';
 import Account from '../../pages/Account/Account';
 import Game from '../../pages/Game/Game';
@@ -14,10 +15,13 @@ const MainWrapper = (props) => {
     if (props.page === 'game') return selectPage(props)
     return (
       <div className="main-wrapper" data-testid="main-wrapper">
-        <Sidebar page={props.page} state={props.state} dispatch={props.dispatch}/>
+        <NavBar user={props.state.user}/>
-        <main>
+        <div className="content-wrapper">
-          {selectPage(props)}
+          <Sidebar page={props.page} state={props.state} dispatch={props.dispatch}/>
-        </main>
+          <main>
+            {selectPage(props)}
+          </main>
+        </div>
       </div>
     )
   }

packages/server/packages/play-node-go/play-node-go/src/pages/Layout/MainWrapper/MainWrapper.scss

@@ -0,0 +1,51 @@
+@import '../../../public/stylesheets/partials/mixins';
+
+div.main-wrapper {
+  display: flex;
+  justify-content: flex-start;
+  flex-flow: column nowrap;
+  @include fullspan;
+  
+  div.NavBar {
+    max-height: 10vh;
+    min-height: 5vh;
+  }
+
+  div.content-wrapper {
+    display: flex;
+    justify-content: flex-start;
+    @include fullspan;
+
+    aside {
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      max-width: 20vw;
+      a {
+        display: block;
+      }
+    }
+    
+    main {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-grow: 4;
+    }
+  }
+}
+
+div.Game {
+  display: flex;
+  justify-content: space-between;
+  @include fullspan;
+  aside {
+    @include flexAround(column);
+    flex-grow: 1;
+  }
+  
+  div.game-area {
+    @include flexAround(column);
+    flex-grow: 2;
+  }
+}

packages/server/packages/play-node-go/play-node-go/src/pages/Layout/NavBar/NavBar.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import './NavBar.scss';
+import Logo from '../Logo/Logo';
+
+const NavBar = (props) => {
+
+  return (
+    <div className="NavBar" data-testid="NavBar">
+      <Link to="/" >
+        <div className="NavBar__logo"><Logo /></div>
+      </Link>
+
+      <Link to="/" >
+        <div className="NavBar__home">Find a Game</div>
+      </Link>
+      
+      <Link to="/news">
+        <div className="NavBar__news">News</div>
+      </Link>
+
+      <Link to="/account">
+        <div className="NavBar__acount">{props.user ? props.user.username : <></>}</div>
+      </Link>
+    </div>
+  );
+}
+
+export default NavBar;

packages/server/packages/play-node-go/play-node-go/src/pages/Layout/NavBar/NavBar.scss

@@ -0,0 +1,5 @@
+div.NavBar {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+}

packages/server/packages/play-node-go/play-node-go/src/pages/Layout/NavBar/NavBar.test.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { render } from '@testing-library/react';
+import NavBar from './NavBar';
+import { initState } from '../../reducers/init/stateReducer.init';
+
+test('renders NavBar without crashing', () => {
+  const { getByTestId } = render(
+  <Router>
+    <NavBar state={initState()}/>
+  </Router>
+  );
+  const NavBarDiv = getByTestId('NavBar');
+  expect(NavBarDiv).toBeInTheDocument();
+});

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

@@ -1,8 +1,14 @@
 import React from 'react';
+import FindGameForm from '../../components/Form/FindGame/FindGame';
+import NewGameButton from '../../components/Button/NewGame/NewGame';
+import ArchiveButton from '../../components/Button/Archive/Archive';
 
 const RoomSidebar = () => {
   return (  
     <>
+      <FindGameForm />
+      <NewGameButton />
+      <ArchiveButton />
     </>
   );
 }