stub sidebar component to display auth form
This commit is contained in:
Sorrel Bri
sorrelbri
parent
fee04ec269
commit
9014564180
13 changed files with 197 additions and 10 deletions
|
|
@ -6,12 +6,17 @@ import { Switch, Route, BrowserRouter as Router } from 'react-router-dom';
|
|||
|
||||
import socketIOClient from 'socket.io-client';
|
||||
|
||||
import Sidebar from './components/Sidebar/Sidebar';
|
||||
|
||||
import Account from './pages/Account/Account';
|
||||
import Game from './pages/Game/Game';
|
||||
import Home from './pages/Home/Home';
|
||||
import News from './pages/News/News';
|
||||
import Room from './pages/Room/Room';
|
||||
|
||||
import { stateReducer } from './reducers/stateReducer';
|
||||
import { initState } from './reducers/init/stateReducer.init';
|
||||
|
||||
export const socket = socketIOClient(config.apiAddress);
|
||||
|
||||
|
||||
|
|
@ -20,6 +25,12 @@ function App() {
|
|||
const [socketData, setSocketData] = useState();
|
||||
const [error, setError] = useState([]);
|
||||
|
||||
const [ state, dispatch ] = useReducer(
|
||||
stateReducer,
|
||||
{},
|
||||
initState
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
fetch(config.apiAddress)
|
||||
.then(res => res.text())
|
||||
|
|
@ -41,27 +52,33 @@ function App() {
|
|||
{fetchData ? <p>{fetchData}</p> : <></>}
|
||||
{socketData ? <p>{socketData}</p> : <></>}
|
||||
{error ? error.map(err => <p>{err}</p>): <></>}
|
||||
|
||||
<Switch>
|
||||
|
||||
<Route path="/account">
|
||||
<Account />
|
||||
<Sidebar page="account" state={state} dispatch={dispatch}/>
|
||||
<Account state={state} dispatch={dispatch}/>
|
||||
</Route>
|
||||
|
||||
<Route path="/rooms">
|
||||
<Room />
|
||||
<Sidebar page="rooms"/>
|
||||
<Room state={state} dispatch={dispatch}/>
|
||||
</Route>
|
||||
|
||||
<Route path="/games">
|
||||
<Game />
|
||||
<Sidebar page="games"/>
|
||||
<Game state={state} dispatch={dispatch}/>
|
||||
</Route>
|
||||
|
||||
<Route path="/news">
|
||||
<News />
|
||||
<Sidebar page="news"/>
|
||||
<News state={state} dispatch={dispatch}/>
|
||||
</Route>
|
||||
|
||||
<Route path="/">
|
||||
<Sidebar page="home" state={state} dispatch={dispatch}/>
|
||||
{/* Add ternary for login */}
|
||||
<Home />
|
||||
<Home state={state} dispatch={dispatch}/>
|
||||
</Route>
|
||||
|
||||
</Switch>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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();
|
||||
});
|
||||
|
|
@ -2,15 +2,44 @@ import React, { useState } from 'react';
|
|||
import './Signup.scss';
|
||||
|
||||
const Signup = () => {
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [passwordConfirm, setPasswordConfirm] = useState('');
|
||||
const [ username, setUsername ] = useState('');
|
||||
const [ password, setPassword ] = useState('');
|
||||
const [ confirmPassword, setConfirmPassword ] = useState('');
|
||||
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export default Signup;
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import React from 'react';
|
||||
|
||||
const AccountSidebar = () => {
|
||||
return (
|
||||
<>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default AccountSidebar;
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import React from 'react';
|
||||
|
||||
const GameSidebar = () => {
|
||||
return (
|
||||
<>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default GameSidebar;
|
||||
|
|
@ -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;
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import React from 'react';
|
||||
|
||||
const NewsSidebar = () => {
|
||||
return (
|
||||
<>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default NewsSidebar;
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import React from 'react';
|
||||
|
||||
const RoomSidebar = () => {
|
||||
return (
|
||||
<>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default RoomSidebar;
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
//@ flow
|
||||
|
||||
import type { state } from '../stateReducer';
|
||||
|
||||
export const initState = (): state => {
|
||||
return {
|
||||
user: null
|
||||
};
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
});
|
||||
|
||||
Loading…
Reference in a new issue