stub home and rooms sidebar components
This commit is contained in:
parent
54abeb65fc
commit
9dc91de5ed
35 changed files with 226 additions and 60 deletions
|
@ -0,0 +1,12 @@
|
||||||
|
import React from 'react';
|
||||||
|
import './Archive.scss';
|
||||||
|
|
||||||
|
const ArchiveButton = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
Archive
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ArchiveButton;
|
|
@ -0,0 +1,12 @@
|
||||||
|
import React from 'react';
|
||||||
|
import './Library.scss';
|
||||||
|
|
||||||
|
const LibraryButton = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
Library
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default LibraryButton;
|
|
@ -0,0 +1,12 @@
|
||||||
|
import React from 'react';
|
||||||
|
import './NewGame.scss';
|
||||||
|
|
||||||
|
const NewGameButton = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
New Game
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default NewGameButton;
|
|
@ -0,0 +1,12 @@
|
||||||
|
import React from 'react';
|
||||||
|
import './NewRoom.scss';
|
||||||
|
|
||||||
|
const NewRoomButton = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
New Room
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default NewRoomButton;
|
|
@ -0,0 +1,5 @@
|
||||||
|
@import '../../../../public/stylesheets/partials/variables';
|
||||||
|
|
||||||
|
span.FormError {
|
||||||
|
color: map-get($colors, "error");;
|
||||||
|
}
|
|
@ -0,0 +1,12 @@
|
||||||
|
import React from 'react';
|
||||||
|
import './FindGame.scss';
|
||||||
|
|
||||||
|
const FindGameForm = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
Find Game
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default FindGameForm;
|
|
@ -0,0 +1,12 @@
|
||||||
|
import React from 'react';
|
||||||
|
import './FindRoom.scss';
|
||||||
|
|
||||||
|
const FindRoomForm = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
Find Room
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default FindRoomForm;
|
|
@ -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('');
|
|
@ -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('');
|
|
@ -1,5 +0,0 @@
|
||||||
@import '../../../public/stylesheets/partials/variables';
|
|
||||||
|
|
||||||
span.FormError {
|
|
||||||
color: map-get($colors, "error");;
|
|
||||||
}
|
|
|
@ -0,0 +1,12 @@
|
||||||
|
import React from 'react';
|
||||||
|
import './Logo.scss';
|
||||||
|
|
||||||
|
const Logo = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
Logo
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Logo;
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -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('');
|
||||||
|
|
||||||
return (
|
const ifUser = <>
|
||||||
<nav>
|
<FindRoomForm />
|
||||||
{props.state.user ? <></> : <>
|
<NewRoomButton />
|
||||||
|
<LibraryButton />
|
||||||
|
</>
|
||||||
|
|
||||||
|
const ifNoUser = <>
|
||||||
<p onClick={()=>{setShowForm('login')}}>Login</p>
|
<p onClick={()=>{setShowForm('login')}}>Login</p>
|
||||||
{showForm === 'login' ? <Login dispatch={props.dispatch} state={props.state}/> : <></>}
|
{showForm === 'login' ? <Login dispatch={props.dispatch} state={props.state}/> : <></>}
|
||||||
<p onClick={()=>{setShowForm('signup')}}>Signup</p>
|
<p onClick={()=>{setShowForm('signup')}}>Signup</p>
|
||||||
{showForm === 'signup' ? <Signup dispatch={props.dispatch} state={props.state}/> : <></>}
|
{showForm === 'signup' ? <Signup dispatch={props.dispatch} state={props.state}/> : <></>}
|
||||||
</>}
|
</>
|
||||||
|
|
||||||
|
return (
|
||||||
|
<nav>
|
||||||
|
{props.state.user ? ifUser : ifNoUser}
|
||||||
</nav>
|
</nav>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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,11 +15,14 @@ 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">
|
||||||
|
<NavBar user={props.state.user}/>
|
||||||
|
<div className="content-wrapper">
|
||||||
<Sidebar page={props.page} state={props.state} dispatch={props.dispatch}/>
|
<Sidebar page={props.page} state={props.state} dispatch={props.dispatch}/>
|
||||||
<main>
|
<main>
|
||||||
{selectPage(props)}
|
{selectPage(props)}
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -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;
|
|
@ -0,0 +1,5 @@
|
||||||
|
div.NavBar {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
|
@ -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();
|
||||||
|
});
|
|
@ -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 />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue