stub sidebar component to display auth form

This commit is contained in:
Sorrel Bri 2020-01-16 00:22:27 -08:00
parent 194fc9155e
commit bf7e6a3425
13 changed files with 197 additions and 10 deletions

View file

@ -6,12 +6,17 @@ import { Switch, Route, BrowserRouter as Router } from 'react-router-dom';
import socketIOClient from 'socket.io-client'; import socketIOClient from 'socket.io-client';
import Sidebar from './components/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';
import Home from './pages/Home/Home'; import Home from './pages/Home/Home';
import News from './pages/News/News'; import News from './pages/News/News';
import Room from './pages/Room/Room'; import Room from './pages/Room/Room';
import { stateReducer } from './reducers/stateReducer';
import { initState } from './reducers/init/stateReducer.init';
export const socket = socketIOClient(config.apiAddress); export const socket = socketIOClient(config.apiAddress);
@ -20,6 +25,12 @@ function App() {
const [socketData, setSocketData] = useState(); const [socketData, setSocketData] = useState();
const [error, setError] = useState([]); const [error, setError] = useState([]);
const [ state, dispatch ] = useReducer(
stateReducer,
{},
initState
);
useEffect(() => { useEffect(() => {
fetch(config.apiAddress) fetch(config.apiAddress)
.then(res => res.text()) .then(res => res.text())
@ -41,27 +52,33 @@ function App() {
{fetchData ? <p>{fetchData}</p> : <></>} {fetchData ? <p>{fetchData}</p> : <></>}
{socketData ? <p>{socketData}</p> : <></>} {socketData ? <p>{socketData}</p> : <></>}
{error ? error.map(err => <p>{err}</p>): <></>} {error ? error.map(err => <p>{err}</p>): <></>}
<Switch> <Switch>
<Route path="/account"> <Route path="/account">
<Account /> <Sidebar page="account" state={state} dispatch={dispatch}/>
<Account state={state} dispatch={dispatch}/>
</Route> </Route>
<Route path="/rooms"> <Route path="/rooms">
<Room /> <Sidebar page="rooms"/>
<Room state={state} dispatch={dispatch}/>
</Route> </Route>
<Route path="/games"> <Route path="/games">
<Game /> <Sidebar page="games"/>
<Game state={state} dispatch={dispatch}/>
</Route> </Route>
<Route path="/news"> <Route path="/news">
<News /> <Sidebar page="news"/>
<News state={state} dispatch={dispatch}/>
</Route> </Route>
<Route path="/"> <Route path="/">
<Sidebar page="home" state={state} dispatch={dispatch}/>
{/* Add ternary for login */} {/* Add ternary for login */}
<Home /> <Home state={state} dispatch={dispatch}/>
</Route> </Route>
</Switch> </Switch>

View file

@ -0,0 +1,36 @@
import React, { useState } from 'react';
import './Sidebar.scss';
import AccountSidebar from '../../pages/Account/AccountSidebar';
import GameSidebar from '../../pages/Game/GameSidebar';
import HomeSidebar from '../../pages/Home/HomeSidebar';
import NewsSidebar from '../../pages/News/NewsSidebar';
import RoomSidebar from '../../pages/Room/RoomSidebar';
const Sidebar = (props) => {
const displayComponent = props =>{
switch (props.page) {
case 'account':
return <AccountSidebar state={props.state}/>
case 'game':
return <GameSidebar state={props.state}/>
case 'home':
return <HomeSidebar state={props.state}/>
case 'news':
return <NewsSidebar state={props.state}/>
case 'room':
return <RoomSidebar state={props.state}/>
default:
return <></>
}
}
return (
<aside className="Sidebar" data-testid="Sidebar">
{displayComponent(props)}
</aside>
);
}
export default Sidebar;

View file

@ -0,0 +1,9 @@
import React from 'react';
import { render } from '@testing-library/react';
import Sidebar from './Sidebar';
test('renders Sidebar without crashing', () => {
const { getByTestId } = render(<Sidebar />);
const SidebarDiv = getByTestId('Sidebar');
expect(SidebarDiv).toBeInTheDocument();
});

View file

@ -2,13 +2,42 @@ import React, { useState } from 'react';
import './Signup.scss'; import './Signup.scss';
const Signup = () => { const Signup = () => {
const [username, setUsername] = useState(''); const [ username, setUsername ] = useState('');
const [password, setPassword] = useState(''); const [ password, setPassword ] = useState('');
const [passwordConfirm, setPasswordConfirm] = useState(''); const [ confirmPassword, setConfirmPassword ] = useState('');
return ( return (
<div className="Signup" data-testid="Signup"> <div className="Signup" data-testid="Signup">
<form data-testid="Signup__form">
<label htmlFor="username-input">Username:</label>
<input
name="username"
id="username-input"
type="text"
onChange={e => setUsername(e.target.value)}
default="username"
/>
<label htmlFor="password-input">Password:</label>
<input
name="password"
id="password-input"
type="text"
onChange={e => setPassword(e.target.value)}
default=""
/>
<label htmlFor="confirmPassword-input">confirmPassword:</label>
<input
name="confirmPassword"
id="confirmPassword-input"
type="text"
onChange={e => setConfirmPassword(e.target.value)}
default=""
/>
</form>
</div> </div>
); );
} }

View file

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

View file

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

View file

@ -0,0 +1,21 @@
import React, { useState } from 'react';
import Signup from '../../components/Signup/Signup';
import Login from '../../components/Login/Login';
const HomeSidebar = (props) => {
const [ showForm, setShowForm ] = useState('');
return (
<nav>
{props.state.user ? <></> : <>
<p onClick={()=>{setShowForm('login')}}>Login</p>
<p onClick={()=>{setShowForm('signup')}}>Signup</p>
</>}
{showForm === 'signup' ? <Signup /> : <></>}
{showForm === 'login' ? <Login /> : <></>}
</nav>
);
}
export default HomeSidebar;

View file

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

View file

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

View file

@ -0,0 +1,9 @@
//@ flow
import type { state } from '../stateReducer';
export const initState = (): state => {
return {
user: null
};
}

View file

@ -0,0 +1,18 @@
// @flow
import { initState } from './init/stateReducer.init';
export type state = {
user: {}
}
type action = {
type: string
}
export const stateReducer = (state: state, action: action): state => {
switch (action.type) {
case 'INIT': return initState();
default: return state;
}
}

View file

@ -0,0 +1,8 @@
import {stateReducer} from './stateReducer';
it('default returns state unaltered', () => {
const state = {data: 'example'};
const action = {type: ''};
expect(stateReducer(state, action)).toBe(state);
});