gamenight/frontend/src/App.js

93 lines
2.3 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 AddGameNight from './components/AddGameNight'
const localStorageUserKey = 'user';
function App() {
const [user, setUser] = useState(null);
const [gamenights, setGamenights] = useState([]);
const [flashData, setFlashData] = useState({});
const handleLogin = (input) => {
const requestOptions = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(input)
};
fetch('api/login', requestOptions)
.then(response => response.json())
.then(data => {
if(data.result === "Ok") {
setUser(data.user);
localStorage.setItem(localStorageUserKey, JSON.stringify(data.user));
} else {
setFlashData({
type: "Error",
message: data.message
});
}
});
};
const onLogout = () => {
setUser(null);
localStorage.removeItem(localStorageUserKey);
};
const setFlash = (data) => {
setFlashData(data);
};
const refetchGamenights = () => {
setUser({...user});
};
useEffect(() => {
if (user !== null) {
const requestOptions = {
method: 'GET',
headers: { 'Authorization': `Bearer ${user.jwt}` },
};
fetch('api/gamenights', requestOptions)
.then(response => response.json())
.then(data => {
if(data.result === "Ok") {
setGamenights(data.gamenights)
} else {
setFlashData({
type: "Error",
message: data.message
});
}
});
}
}, [user])
useEffect(() => {
setUser(JSON.parse(localStorage.getItem(localStorageUserKey)));
}, []);
if(user === null) {
return (
<div className="App">
<Login onChange={handleLogin}/>
</div>
);
} else {
return (
<>
<MenuBar user={user} onLogout={onLogout} />
<AddGameNight user={user} setFlash={setFlash} refetchGamenights={refetchGamenights} />
<Gamenights user={user} setFlash={setFlash} refetchGamenights={refetchGamenights} gamenights={gamenights} />
</>
);
}
}
export default App;