131 lines
3.1 KiB
JavaScript
131 lines
3.1 KiB
JavaScript
import './App.css';
|
|
import React, { useState, useEffect } from 'react';
|
|
import MenuBar from './components/MenuBar';
|
|
import Login from './components/Login';
|
|
import Gamenights from './components/Gamenights';
|
|
import Gamenight from './components/Gamenight';
|
|
import AdminPanel from './components/AdminPanel';
|
|
|
|
import { get_gamenights, get_games, unpack_api_result, login } from './api/Api';
|
|
|
|
const localStorageUserKey = 'user';
|
|
|
|
function App() {
|
|
const [user, setUser] = useState(null);
|
|
const [gamenights, setGamenights] = useState([]);
|
|
const [flashData, setFlashData] = useState({});
|
|
const [games, setGames] = useState([]);
|
|
const [activeGamenightId, setActiveGamenightId] = useState(null);
|
|
const [appState, setAppState] = useState('LoggedOut')
|
|
|
|
const handleLogin = (input) => {
|
|
unpack_api_result(login(input), setFlashData)
|
|
.then(result => {
|
|
setUser(result.user);
|
|
localStorage.setItem(localStorageUserKey, JSON.stringify(result.user));
|
|
})
|
|
.then(() => setAppState('LoggedIn'))
|
|
};
|
|
|
|
useEffect(() => {
|
|
if(activeGamenightId !== null) {
|
|
setAppState('GamenightDetails');
|
|
} else {
|
|
setAppState('LoggedIn')
|
|
}
|
|
|
|
}, [activeGamenightId])
|
|
|
|
const onLogout = () => {
|
|
setUser(null);
|
|
localStorage.removeItem(localStorageUserKey);
|
|
setAppState('LoggedOut')
|
|
};
|
|
|
|
const onAdmin = () => {
|
|
setAppState('AdminPanel')
|
|
}
|
|
|
|
const onUser = () => {
|
|
setAppState('UserPage')
|
|
}
|
|
|
|
const onReset = () => {
|
|
setAppState('LoggedIn')
|
|
}
|
|
|
|
const setFlash = (data) => {
|
|
setFlashData(data);
|
|
};
|
|
|
|
const refetchGamenights = () => {
|
|
setUser({...user});
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (appState === 'LoggedIn') {
|
|
unpack_api_result(get_gamenights(user.jwt), setFlashData)
|
|
.then(result => setGamenights(result.gamenights));
|
|
}
|
|
}, [appState])
|
|
|
|
useEffect(() => {
|
|
if (appState === 'LoggedIn') {
|
|
unpack_api_result(get_games(user.jwt), setFlashData)
|
|
.then(result => setGames(result.games));
|
|
}
|
|
}, [appState])
|
|
|
|
useEffect(() => {
|
|
setUser(JSON.parse(localStorage.getItem(localStorageUserKey)));
|
|
}, []);
|
|
|
|
let mainview;
|
|
if(appState === 'LoggedOut') {
|
|
return (
|
|
<div className="App">
|
|
<Login onChange={handleLogin}/>
|
|
</div>
|
|
);
|
|
} else if(appState === 'GamenightDetails') {
|
|
mainview = (
|
|
<Gamenight
|
|
gamenightId={activeGamenightId}
|
|
onDismis={() => setActiveGamenightId(null)}
|
|
setFlash={setFlash}
|
|
user={user}
|
|
/>)
|
|
} else if(appState === 'LoggedIn') {
|
|
mainview = (
|
|
<Gamenights
|
|
user={user}
|
|
games={games}
|
|
setFlash={setFlash}
|
|
refetchGamenights={refetchGamenights}
|
|
gamenights={gamenights}
|
|
onSelectGamenight={(g) => setActiveGamenightId(g.id)}/>
|
|
);
|
|
} else if(appState === 'AdminPanel') {
|
|
mainview = (
|
|
<AdminPanel
|
|
user={user}
|
|
setFlash={setFlash}/>
|
|
);
|
|
}
|
|
let page = (
|
|
<>
|
|
<MenuBar
|
|
user={user}
|
|
onUser={onUser}
|
|
onAdmin={onAdmin}
|
|
onLogout={onLogout}
|
|
onReset={onReset}/>
|
|
{mainview}
|
|
</>
|
|
);
|
|
|
|
return page;
|
|
}
|
|
|
|
export default App;
|