78 lines
2.1 KiB
JavaScript
78 lines
2.1 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import { BrowserRouter, Navigate, Route, Routes} from 'react-router-dom';
|
|
|
|
import './css/App.css';
|
|
import Home from './pages/Home';
|
|
import ErrorBoundary from './util/ErrorBoundary';
|
|
import Sidebar, { SidebarMenu } from './components/Sidebar';
|
|
import UserControls from './components/UserControls';
|
|
import { useLoginContext } from './structures/UserContext';
|
|
import Login from './pages/Login';
|
|
import { fetchUser } from './util/Util';
|
|
import PrivateRoute from './structures/PrivateRoute';
|
|
import { UnauthedRoute } from './structures/UnauthedRoute';
|
|
import Users from './pages/Users';
|
|
import Admin from './pages/Admin';
|
|
|
|
function App() {
|
|
|
|
const [user, updateUser] = useLoginContext();
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
await fetchUser();
|
|
updateUser();
|
|
setLoading(false);
|
|
})();
|
|
}, []);
|
|
|
|
const menuItems = [
|
|
{ to: '/home', label: 'Home' },
|
|
{ to: '/users', label: 'Users' },
|
|
{ to: '/admin', label: 'Admin' }
|
|
];
|
|
|
|
if (loading) return null;
|
|
|
|
return (
|
|
<div className='app is-full-screen'>
|
|
|
|
<div className='background'>
|
|
|
|
<BrowserRouter>
|
|
|
|
{user ?
|
|
<div>
|
|
<header className="card">
|
|
<UserControls />
|
|
</header>
|
|
<Sidebar>
|
|
<SidebarMenu menuItems={menuItems} />
|
|
</Sidebar>
|
|
</div>
|
|
: null}
|
|
|
|
<div className='main-content'>
|
|
<ErrorBoundary>
|
|
<Routes>
|
|
<Route path='/home/*' element={<PrivateRoute><Home /></PrivateRoute >} />
|
|
<Route path='/users/*' element={<PrivateRoute><Users /></PrivateRoute >} />
|
|
<Route path='/admin/*' element={<PrivateRoute><Admin /></PrivateRoute >} />
|
|
<Route path='/login/*' element={<UnauthedRoute><Login /></UnauthedRoute>} />
|
|
<Route path='*' element={<Navigate to='/home' />} />
|
|
</Routes>
|
|
</ErrorBoundary>
|
|
</div>
|
|
|
|
|
|
</BrowserRouter>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|