stub home and rooms sidebar components

This commit is contained in:
Sorrel Bri 2020-01-18 12:11:22 -08:00 committed by sorrelbri
parent 54abeb65fc
commit 9dc91de5ed
35 changed files with 226 additions and 60 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -1,7 +1,7 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import './Login.scss'; 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 Login = (props) => {
const [username, setUsername] = useState(''); const [username, setUsername] = useState('');

View file

@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import './Signup.scss'; 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 Signup = (props) => {
const [ username, setUsername ] = useState(''); const [ username, setUsername ] = useState('');

View file

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

View file

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

View file

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

View file

@ -1,19 +1,30 @@
import React, { useState } from 'react'; 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 HomeSidebar = (props) => {
const [ showForm, setShowForm ] = useState(''); 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 ( return (
<nav> <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> </nav>
); );
} }

View file

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

View file

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

View file

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

View file

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

View file

@ -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();
});

View file

@ -1,8 +1,14 @@
import React from 'react'; 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 = () => { const RoomSidebar = () => {
return ( return (
<> <>
<FindGameForm />
<NewGameButton />
<ArchiveButton />
</> </>
); );
} }