webserver-framework-frontend/src/App.js

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';
import TitledPage from './components/TitledPage';
import Register from './pages/Register';

function App() {

  const [user, updateUser] = useLoginContext();
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    (async () => {
      await fetchUser();
      updateUser();
      setLoading(false);
    })();
  }, []);

  const menuItems = [
    { to: '/home', label: 'Home', items: [{ to: '/profile', label: 'Profile', relative: true }] },
    { 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>
                  <TitledPage title='Home'>
                    <Home />
                  </TitledPage>
                </PrivateRoute >} />
                
                <Route path='/users/*' element={<PrivateRoute>
                  <TitledPage title='Users' >
                    <Users />
                  </TitledPage>
                </PrivateRoute >} />
                
                <Route path='/admin/*' element={<PrivateRoute>
                  <Admin />
                </PrivateRoute >} />

                <Route path='/login/*' element={<UnauthedRoute>
                  <Login />
                </UnauthedRoute>} />

                <Route path='/register/*' element={<UnauthedRoute>
                  <Register />
                </UnauthedRoute>} />
                
                <Route path='*' element={<Navigate to='/home' />} />
                
              </Routes>
            </ErrorBoundary>
            
          </div>

        </BrowserRouter>

      </div>
      
    
    </div>
  );
}

export default App;