stub home and rooms sidebar components
This commit is contained in:
parent
c0aff888f5
commit
101531e727
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 './Login.scss';
|
||||
import authServices from '../../services/authServices';
|
||||
import FormError from '../FormError/FormError';
|
||||
import authServices from '../../../services/authServices';
|
||||
import FormError from '../../Error/FormError/FormError';
|
||||
|
||||
const Login = (props) => {
|
||||
const [username, setUsername] = useState('');
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import './Signup.scss';
|
||||
import authServices from '../../services/authServices';
|
||||
import FormError from '../FormError/FormError';
|
||||
import authServices from '../../../services/authServices';
|
||||
import FormError from '../../Error/FormError/FormError';
|
||||
|
||||
const Signup = (props) => {
|
||||
const [ username, setUsername ] = useState('');
|
|
@ -1,5 +0,0 @@
|
|||
@import '../../../public/stylesheets/partials/variables';
|
||||
|
||||
span.FormError {
|
||||
color: map-get($colors, "error");;
|
||||
}
|
12
packages/server/play-node-go/src/components/Logo/Logo.js
Normal file
12
packages/server/play-node-go/src/components/Logo/Logo.js
Normal file
|
@ -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 Signup from '../../components/Signup/Signup';
|
||||
import Login from '../../components/Login/Login';
|
||||
import Signup from '../../components/Form/Signup/Signup';
|
||||
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 [ showForm, setShowForm ] = useState('');
|
||||
|
||||
return (
|
||||
<nav>
|
||||
{props.state.user ? <></> : <>
|
||||
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 (
|
||||
<nav>
|
||||
{props.state.user ? ifUser : ifNoUser}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import React, { useState } from 'react';
|
||||
import './MainWrapper.scss';
|
||||
|
||||
import NavBar from '../NavBar/NavBar';
|
||||
import Sidebar from '../Sidebar/Sidebar';
|
||||
import Account from '../../pages/Account/Account';
|
||||
import Game from '../../pages/Game/Game';
|
||||
|
@ -14,11 +15,14 @@ const MainWrapper = (props) => {
|
|||
if (props.page === 'game') return selectPage(props)
|
||||
return (
|
||||
<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}/>
|
||||
<main>
|
||||
{selectPage(props)}
|
||||
</main>
|
||||
</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 FindGameForm from '../../components/Form/FindGame/FindGame';
|
||||
import NewGameButton from '../../components/Button/NewGame/NewGame';
|
||||
import ArchiveButton from '../../components/Button/Archive/Archive';
|
||||
|
||||
const RoomSidebar = () => {
|
||||
return (
|
||||
<>
|
||||
<FindGameForm />
|
||||
<NewGameButton />
|
||||
<ArchiveButton />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue