stub sidebar component to display auth form
This commit is contained in:
parent
8d3991ef55
commit
3068b94c5b
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 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>
|
||||||
|
|
|
@ -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,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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,10 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const AccountSidebar = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AccountSidebar;
|
10
packages/server/play-node-go/src/pages/Game/GameSidebar.js
Normal file
10
packages/server/play-node-go/src/pages/Game/GameSidebar.js
Normal file
|
@ -0,0 +1,10 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const GameSidebar = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default GameSidebar;
|
21
packages/server/play-node-go/src/pages/Home/HomeSidebar.js
Normal file
21
packages/server/play-node-go/src/pages/Home/HomeSidebar.js
Normal 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;
|
10
packages/server/play-node-go/src/pages/News/NewsSidebar.js
Normal file
10
packages/server/play-node-go/src/pages/News/NewsSidebar.js
Normal file
|
@ -0,0 +1,10 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const NewsSidebar = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default NewsSidebar;
|
10
packages/server/play-node-go/src/pages/Room/RoomSidebar.js
Normal file
10
packages/server/play-node-go/src/pages/Room/RoomSidebar.js
Normal file
|
@ -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
|
||||||
|
};
|
||||||
|
}
|
18
packages/server/play-node-go/src/reducers/stateReducer.js
Normal file
18
packages/server/play-node-go/src/reducers/stateReducer.js
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -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