decoupled show Auth form logic from Home sidebar for use in other sidebars on Auth errors
This commit is contained in:
parent
72fb0ae243
commit
a29431e67d
16 changed files with 135 additions and 62 deletions
|
@ -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>
|
||||
|
|
|
@ -9,3 +9,9 @@
|
|||
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;
|
||||
}
|
|
@ -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: (
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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;
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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() }
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
@import '../../../../public/stylesheets/partials/variables';
|
||||
|
||||
aside {
|
||||
color: map-get($colors, "sidebar_link")
|
||||
}
|
|
@ -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);
|
||||
|
|
|
@ -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 />
|
||||
|
|
Loading…
Reference in a new issue