decoupled show Auth form logic from Home sidebar for use in other sidebars on Auth errors

2020-02-04 19:21:31 -08:00 · 2020-02-04 19:21:31 -08:00 · d0d4f2429c
commit d0d4f2429c
parent 8999b3ab3b
16 changed files with 135 additions and 62 deletions
--- a/play-node-go/public/index.html
+++ b/play-node-go/public/index.html
@ -11,6 +11,7 @@
    />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/reset.css">
+    <link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet">
    <title>Node Go</title>
  </head>
  <body>
--- a/play-node-go/public/stylesheets/partials/_mixins.scss
+++ b/play-node-go/public/stylesheets/partials/_mixins.scss
@ -8,4 +8,10 @@
  flex-direction: $direction;
  align-items: center;
  justify-content: space-around;
+}
+
+@mixin gameViewLabel {
+  color: rgb(255,240,230);
+  background-color: rgba(0,0,0,0.7);
+  padding: 0.25em;
 }
--- a/play-node-go/public/stylesheets/partials/_variables.scss
+++ b/play-node-go/public/stylesheets/partials/_variables.scss
@ -18,6 +18,12 @@ $break-points: (

 $colors: (
  "error": #aa3333,
+  "nav_bar": #6f3e68,
+  "nav_link": #dae1b7,
+  "sidebar": #3c013f,
+  "sidebar_link": #f2ce3d,
+  "main": #95acae,
+  "home": #444444
  );

 $backgrounds: (
--- a/play-node-go/src/components/Button/Game/Game.scss
+++ b/play-node-go/src/components/Button/Game/Game.scss
@ -1,3 +1,4 @@
+@import '../../../../public/stylesheets/partials/mixins';

 div.GameButton {
  align-items: stretch;
@ -112,7 +113,7 @@ div.table__player-area {
 }

 div.GameButton__player-data {
-  background-color: rgba(255,255,255,0.65);
+  @include gameViewLabel;
  display: flex;
  justify-content: space-around;
  max-width: 100%;
@ -127,7 +128,10 @@ div.GameButton__player-data {
 }

 .GameButton__link {
-  background-color: rgba(255, 255, 255, 0.95);
+  @include gameViewLabel;
  margin: 0 auto;
-  padding: .5vw;
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
 }
--- a/play-node-go/src/components/Form/Auth/Auth.js
+++ b/play-node-go/src/components/Form/Auth/Auth.js
@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+
+import Login from '../Login/Login';
+import Signup from '../Signup/Signup';
+
+const Auth = (props) => {
+  const [ showForm, setShowForm ] = useState('login')
+  const { state, dispatch } = props;
+
+  return (
+    <>
+      <p 
+        className="auth-label" 
+        onClick={()=>{setShowForm('login')}}
+      >Login</p>
+      {
+        showForm === 'login' 
+        ? <Login dispatch={dispatch} state={state}/> 
+        : <></>
+      }
+
+      <p 
+        className="auth-label" 
+        onClick={()=>{setShowForm('signup')}}
+      >Signup</p>
+      {
+        showForm === 'signup' 
+        ? <Signup dispatch={dispatch} state={state}/> 
+        : <></>
+      }
+    </>
+  );
+}
+
+export default Auth;
--- a/play-node-go/src/components/GameUI/PlayerArea/PlayerArea.scss
+++ b/play-node-go/src/components/GameUI/PlayerArea/PlayerArea.scss
@ -1,4 +1,5 @@
@import '../../../../public/stylesheets/partials/variables';
+@import '../../../../public/stylesheets/partials/mixins';

 div.player-container {
  display: flex;
@ -92,10 +93,8 @@ div.player-container__name-space {
  align-items: center;
  
  h4 {
+    @include gameViewLabel;
    font-size: 120%;
-    color: rgb(255,240,230);
-    background-color: rgba(0,0,0,0.7);
-    padding: 0.25em;
    z-index: 1;
  }
 }
--- a/play-node-go/src/index.scss
+++ b/play-node-go/src/index.scss
@ -3,17 +3,17 @@

 html * {
  margin: 0;
+  font-size: 14px;
  
  @media #{map-get($break-points, "500")} {
-    font-size: 14px;
+    // font-size: 14px;
  }
 }

 body {
  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+  font-family: 'Oswald', sans-serif;
+  font-weight: 800;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
@ -32,11 +32,12 @@ body {

  // ! dev settings
  aside {
-    background-color: map-get($dev-colors, "e");
+    background-color: map-get($colors, "sidebar");
  }
  
  main {
-    background-color: map-get($dev-colors, "d");
+    background-color: map-get($colors, "main");
+    font-weight: 100;
  }
 }

--- a/play-node-go/src/pages/Home/Home.scss
+++ b/play-node-go/src/pages/Home/Home.scss
@ -1,6 +1,12 @@
+@import '../../../public/stylesheets/partials/variables';
+@import '../../../public/stylesheets/partials/mixins';
+
 div.Home {
+  @include fullspan;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: flex-start;
+  background-color: map-get($colors, "home");
+  overflow: scroll;
 }
--- a/play-node-go/src/pages/Home/HomeSidebar.js
+++ b/play-node-go/src/pages/Home/HomeSidebar.js
@ -1,13 +1,12 @@
 import React, { useState } from 'react';

-import Signup from '../../components/Form/Signup/Signup';
-import Login from '../../components/Form/Login/Login';
+import Auth from '../../components/Form/Auth/Auth';
 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 { state, dispatch } = props;

  const ifUser = <>
    <FindRoomForm />
@ -15,32 +14,12 @@ const HomeSidebar = (props) => {
    <LibraryButton />
  </>

-  const ifNoUser = <>
-    <p 
-      className="auth-label" 
-      onClick={()=>{setShowForm('login')}}
-    >Login</p>
-    {
-      showForm === 'login' 
-      ? <Login dispatch={props.dispatch} state={props.state}/> 
-      : <></>
-    }
-    
-    <p 
-      className="auth-label" 
-      onClick={()=>{setShowForm('signup')}}
-    >Signup</p>
-    {
-      showForm === 'signup' 
-      ? <Signup dispatch={props.dispatch} state={props.state}/> 
-      : <></>
-    }
-  </>
+  const ifNoUser = <Auth state={state} dispatch={state} />

  return (  
    <nav>
      {
-        props.state.user.username 
+        state.user.username 
        ? ifUser 
        : ifNoUser
      }
--- a/play-node-go/src/pages/Layout/MainWrapper/MainWrapper.js
+++ b/play-node-go/src/pages/Layout/MainWrapper/MainWrapper.js
@ -10,34 +10,35 @@ import News from '../../News/News';
 import Room from '../../Room/Room';

 const MainWrapper = (props) => {
+  const { state, page, dispatch } = props;

-  const setWrapperWithSidebarAndPage = props => {
-    if (props.page === 'game') return selectPage(props)
+  const setWrapperWithSidebarAndPage = () => {
+    if (page === 'game') return selectPage()
    return (
      <div className="main-wrapper" data-testid="main-wrapper">
-        <NavBar user={props.state.user}/>
+        <NavBar state={state}/>
        <div className="content-wrapper">
-          <Sidebar page={props.page} state={props.state} dispatch={props.dispatch}/>
+          <Sidebar page={page} state={state} dispatch={dispatch}/>
          <main>
-            {selectPage(props)}
+            {selectPage()}
          </main>
        </div>
      </div>
    )
  }

-  const selectPage = props =>{
-    switch (props.page) {
+  const selectPage = () =>{
+    switch (page) {
      case 'account':
-        return <Account state={props.state} dispatch={props.dispatch}/>
+        return <Account state={state} dispatch={dispatch}/>
      case 'game':
-        return <Game state={props.state} dispatch={props.dispatch}/>
+        return <Game state={state} dispatch={dispatch}/>
      case 'home':
-        return <Home state={props.state} dispatch={props.dispatch}/>
+        return <Home state={state} dispatch={dispatch}/>
      case 'news':
-        return <News state={props.state} dispatch={props.dispatch}/>
+        return <News state={state} dispatch={dispatch}/>
      case 'room':
-        return <Room state={props.state} dispatch={props.dispatch}/>
+        return <Room state={state} dispatch={dispatch}/>
      default:
        return <></>
    }
@ -45,7 +46,7 @@ const MainWrapper = (props) => {

  return (
    <>
-      { setWrapperWithSidebarAndPage(props) }
+      { setWrapperWithSidebarAndPage() }
    </>
  );
 }
--- a/play-node-go/src/pages/Layout/NavBar/NavBar.js
+++ b/play-node-go/src/pages/Layout/NavBar/NavBar.js
@ -12,11 +12,11 @@ const NavBar = (props) => {
      </Link>

      <Link to="/home" >
-        <div className="NavBar__menu-item NavBar__home">Find a Game</div>
+        <div className="NavBar__menu-item NavBar__home"><p>Find a Game</p></div>
      </Link>
      
      <Link to="/news">
-        <div className="NavBar__menu-item NavBar__news">News</div>
+        <div className="NavBar__menu-item NavBar__news"><p>News</p></div>
      </Link>

      <Link to="/account">
--- a/play-node-go/src/pages/Layout/NavBar/NavBar.scss
+++ b/play-node-go/src/pages/Layout/NavBar/NavBar.scss
@ -1,5 +1,22 @@
+@import '../../../../public/stylesheets/partials/_variables.scss';
+
 div.NavBar {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
+  align-items: center;
+  background-color: map-get($colors, "nav_bar");
+  color: map-get($colors, "nav_link");
+
+  p {
+    font-size: 1.4em;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  a{
+    color: inherit;
+  }
 }
--- a/play-node-go/src/pages/Layout/Sidebar/Sidebar.js
+++ b/play-node-go/src/pages/Layout/Sidebar/Sidebar.js
@ -7,17 +7,17 @@ import NewsSidebar from '../../News/NewsSidebar';
 import RoomSidebar from '../../Room/RoomSidebar';

 const Sidebar = (props) => {
-
-  const displayComponent = props =>{
-    switch (props.page) {
+  const {page, state, dispatch} = props
+  const displayComponent = () =>{
+    switch (page) {
      case 'account':
-        return <AccountSidebar state={props.state} dispatch={props.dispatch}/>
+        return <AccountSidebar state={state} dispatch={dispatch}/>
      case 'home':
-        return <HomeSidebar state={props.state} dispatch={props.dispatch}/>
+        return <HomeSidebar state={state} dispatch={dispatch}/>
      case 'news':
-        return <NewsSidebar state={props.state} dispatch={props.dispatch}/>
+        return <NewsSidebar state={state} dispatch={dispatch}/>
      case 'room':
-        return <RoomSidebar state={props.state} dispatch={props.dispatch}/>
+        return <RoomSidebar state={state} dispatch={dispatch}/>
      default:
        return <></>
    }
@ -25,7 +25,7 @@ const Sidebar = (props) => {

  return (
    <aside className="Sidebar" data-testid="Sidebar">
-      {displayComponent(props)}
+      {displayComponent()}
    </aside>
  );
 }
--- a/play-node-go/src/pages/Layout/Sidebar/Sidebar.scss
+++ b/play-node-go/src/pages/Layout/Sidebar/Sidebar.scss
@ -0,0 +1,5 @@
+@import '../../../../public/stylesheets/partials/variables';
+
+aside {
+  color: map-get($colors, "sidebar_link")
+}
--- a/play-node-go/src/pages/Room/Room.js
+++ b/play-node-go/src/pages/Room/Room.js
@ -14,7 +14,6 @@ import Loading from '../../components/Display/Loading/Loading';
 const Room = (props) => {
  const { state, dispatch } = props;
  const roomId = parseInt(useParams().id) || 0;
-  // const socket = socketIOClient(`${config.socketAddress}/${roomId}`);

  const fetchRoomAPI = async () => {
    const response = await roomsServices.getRoomService(roomId);
--- a/play-node-go/src/pages/Room/RoomSidebar.js
+++ b/play-node-go/src/pages/Room/RoomSidebar.js
@ -1,11 +1,25 @@
 import React from 'react';
+
+import Auth from '../../components/Form/Auth/Auth';
 import FindGameForm from '../../components/Form/FindGame/FindGame';
 import NewGameButton from '../../components/Button/NewGame/NewGame';
 import RoomArchiveButton from '../../components/Button/RoomArchive/RoomArchive';

-const RoomSidebar = () => {
+const RoomSidebar = props => {
+  const {state, dispatch} = props;
+
+  const showAuth = () => {
+    if (state.errors.joinGame) {
+      return (
+        <Auth state={state} dispatch={dispatch} />
+      )
+    }
+    return <></>
+  }
+
  return (  
    <nav>
+      {showAuth()}
      <FindGameForm />
      <NewGameButton />
      <RoomArchiveButton />