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

This commit is contained in:
Sorrel Bri 2020-02-04 19:21:31 -08:00 committed by sorrelbri
parent eb5df6069c
commit d58eb95c76
16 changed files with 135 additions and 62 deletions

View file

@ -11,6 +11,7 @@
/> />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/reset.css"> <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> <title>Node Go</title>
</head> </head>
<body> <body>

View file

@ -9,3 +9,9 @@
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
} }
@mixin gameViewLabel {
color: rgb(255,240,230);
background-color: rgba(0,0,0,0.7);
padding: 0.25em;
}

View file

@ -18,6 +18,12 @@ $break-points: (
$colors: ( $colors: (
"error": #aa3333, "error": #aa3333,
"nav_bar": #6f3e68,
"nav_link": #dae1b7,
"sidebar": #3c013f,
"sidebar_link": #f2ce3d,
"main": #95acae,
"home": #444444
); );
$backgrounds: ( $backgrounds: (

View file

@ -1,3 +1,4 @@
@import '../../../../public/stylesheets/partials/mixins';
div.GameButton { div.GameButton {
align-items: stretch; align-items: stretch;
@ -112,7 +113,7 @@ div.table__player-area {
} }
div.GameButton__player-data { div.GameButton__player-data {
background-color: rgba(255,255,255,0.65); @include gameViewLabel;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
max-width: 100%; max-width: 100%;
@ -127,7 +128,10 @@ div.GameButton__player-data {
} }
.GameButton__link { .GameButton__link {
background-color: rgba(255, 255, 255, 0.95); @include gameViewLabel;
margin: 0 auto; margin: 0 auto;
padding: .5vw; text-decoration: none;
&:hover {
text-decoration: underline;
}
} }

View file

@ -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;

View file

@ -1,4 +1,5 @@
@import '../../../../public/stylesheets/partials/variables'; @import '../../../../public/stylesheets/partials/variables';
@import '../../../../public/stylesheets/partials/mixins';
div.player-container { div.player-container {
display: flex; display: flex;
@ -92,10 +93,8 @@ div.player-container__name-space {
align-items: center; align-items: center;
h4 { h4 {
@include gameViewLabel;
font-size: 120%; font-size: 120%;
color: rgb(255,240,230);
background-color: rgba(0,0,0,0.7);
padding: 0.25em;
z-index: 1; z-index: 1;
} }
} }

View file

@ -3,17 +3,17 @@
html * { html * {
margin: 0; margin: 0;
font-size: 14px;
@media #{map-get($break-points, "500")} { @media #{map-get($break-points, "500")} {
font-size: 14px; // font-size: 14px;
} }
} }
body { body {
margin: 0; margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", font-family: 'Oswald', sans-serif;
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", font-weight: 800;
sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
box-sizing: border-box; box-sizing: border-box;
@ -32,11 +32,12 @@ body {
// ! dev settings // ! dev settings
aside { aside {
background-color: map-get($dev-colors, "e"); background-color: map-get($colors, "sidebar");
} }
main { main {
background-color: map-get($dev-colors, "d"); background-color: map-get($colors, "main");
font-weight: 100;
} }
} }

View file

@ -1,6 +1,12 @@
@import '../../../public/stylesheets/partials/variables';
@import '../../../public/stylesheets/partials/mixins';
div.Home { div.Home {
@include fullspan;
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
align-items: flex-start; align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;
background-color: map-get($colors, "home");
overflow: scroll;
} }

View file

@ -1,13 +1,12 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import Signup from '../../components/Form/Signup/Signup'; import Auth from '../../components/Form/Auth/Auth';
import Login from '../../components/Form/Login/Login';
import NewRoomButton from '../../components/Button/NewRoom/NewRoom'; import NewRoomButton from '../../components/Button/NewRoom/NewRoom';
import FindRoomForm from '../../components/Form/FindRoom/FindRoom'; import FindRoomForm from '../../components/Form/FindRoom/FindRoom';
import LibraryButton from '../../components/Button/Library/Library'; import LibraryButton from '../../components/Button/Library/Library';
const HomeSidebar = (props) => { const HomeSidebar = (props) => {
const [ showForm, setShowForm ] = useState(''); const { state, dispatch } = props;
const ifUser = <> const ifUser = <>
<FindRoomForm /> <FindRoomForm />
@ -15,32 +14,12 @@ const HomeSidebar = (props) => {
<LibraryButton /> <LibraryButton />
</> </>
const ifNoUser = <> const ifNoUser = <Auth state={state} dispatch={state} />
<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}/>
: <></>
}
</>
return ( return (
<nav> <nav>
{ {
props.state.user.username state.user.username
? ifUser ? ifUser
: ifNoUser : ifNoUser
} }

View file

@ -10,34 +10,35 @@ import News from '../../News/News';
import Room from '../../Room/Room'; import Room from '../../Room/Room';
const MainWrapper = (props) => { const MainWrapper = (props) => {
const { state, page, dispatch } = props;
const setWrapperWithSidebarAndPage = props => { const setWrapperWithSidebarAndPage = () => {
if (props.page === 'game') return selectPage(props) if (page === 'game') return selectPage()
return ( return (
<div className="main-wrapper" data-testid="main-wrapper"> <div className="main-wrapper" data-testid="main-wrapper">
<NavBar user={props.state.user}/> <NavBar state={state}/>
<div className="content-wrapper"> <div className="content-wrapper">
<Sidebar page={props.page} state={props.state} dispatch={props.dispatch}/> <Sidebar page={page} state={state} dispatch={dispatch}/>
<main> <main>
{selectPage(props)} {selectPage()}
</main> </main>
</div> </div>
</div> </div>
) )
} }
const selectPage = props =>{ const selectPage = () =>{
switch (props.page) { switch (page) {
case 'account': case 'account':
return <Account state={props.state} dispatch={props.dispatch}/> return <Account state={state} dispatch={dispatch}/>
case 'game': case 'game':
return <Game state={props.state} dispatch={props.dispatch}/> return <Game state={state} dispatch={dispatch}/>
case 'home': case 'home':
return <Home state={props.state} dispatch={props.dispatch}/> return <Home state={state} dispatch={dispatch}/>
case 'news': case 'news':
return <News state={props.state} dispatch={props.dispatch}/> return <News state={state} dispatch={dispatch}/>
case 'room': case 'room':
return <Room state={props.state} dispatch={props.dispatch}/> return <Room state={state} dispatch={dispatch}/>
default: default:
return <></> return <></>
} }
@ -45,7 +46,7 @@ const MainWrapper = (props) => {
return ( return (
<> <>
{ setWrapperWithSidebarAndPage(props) } { setWrapperWithSidebarAndPage() }
</> </>
); );
} }

View file

@ -12,11 +12,11 @@ const NavBar = (props) => {
</Link> </Link>
<Link to="/home" > <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>
<Link to="/news"> <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>
<Link to="/account"> <Link to="/account">

View file

@ -1,5 +1,22 @@
@import '../../../../public/stylesheets/partials/_variables.scss';
div.NavBar { div.NavBar {
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
justify-content: space-between; 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;
}
} }

View file

@ -7,17 +7,17 @@ import NewsSidebar from '../../News/NewsSidebar';
import RoomSidebar from '../../Room/RoomSidebar'; import RoomSidebar from '../../Room/RoomSidebar';
const Sidebar = (props) => { const Sidebar = (props) => {
const {page, state, dispatch} = props
const displayComponent = props =>{ const displayComponent = () =>{
switch (props.page) { switch (page) {
case 'account': case 'account':
return <AccountSidebar state={props.state} dispatch={props.dispatch}/> return <AccountSidebar state={state} dispatch={dispatch}/>
case 'home': case 'home':
return <HomeSidebar state={props.state} dispatch={props.dispatch}/> return <HomeSidebar state={state} dispatch={dispatch}/>
case 'news': case 'news':
return <NewsSidebar state={props.state} dispatch={props.dispatch}/> return <NewsSidebar state={state} dispatch={dispatch}/>
case 'room': case 'room':
return <RoomSidebar state={props.state} dispatch={props.dispatch}/> return <RoomSidebar state={state} dispatch={dispatch}/>
default: default:
return <></> return <></>
} }
@ -25,7 +25,7 @@ const Sidebar = (props) => {
return ( return (
<aside className="Sidebar" data-testid="Sidebar"> <aside className="Sidebar" data-testid="Sidebar">
{displayComponent(props)} {displayComponent()}
</aside> </aside>
); );
} }

View file

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

View file

@ -14,7 +14,6 @@ import Loading from '../../components/Display/Loading/Loading';
const Room = (props) => { const Room = (props) => {
const { state, dispatch } = props; const { state, dispatch } = props;
const roomId = parseInt(useParams().id) || 0; const roomId = parseInt(useParams().id) || 0;
// const socket = socketIOClient(`${config.socketAddress}/${roomId}`);
const fetchRoomAPI = async () => { const fetchRoomAPI = async () => {
const response = await roomsServices.getRoomService(roomId); const response = await roomsServices.getRoomService(roomId);

View file

@ -1,11 +1,25 @@
import React from 'react'; import React from 'react';
import Auth from '../../components/Form/Auth/Auth';
import FindGameForm from '../../components/Form/FindGame/FindGame'; import FindGameForm from '../../components/Form/FindGame/FindGame';
import NewGameButton from '../../components/Button/NewGame/NewGame'; import NewGameButton from '../../components/Button/NewGame/NewGame';
import RoomArchiveButton from '../../components/Button/RoomArchive/RoomArchive'; 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 ( return (
<nav> <nav>
{showAuth()}
<FindGameForm /> <FindGameForm />
<NewGameButton /> <NewGameButton />
<RoomArchiveButton /> <RoomArchiveButton />