webserver-framework-frontend/src/App.js

import React, { useEffect, useState } from 'react';
import { Navigate, Route, Routes, useNavigate} 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 { get, setSession, setSettings } 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);
  const navigate = useNavigate();
  
  useEffect(() => {
    (async () => {

      const settings = await get('/api/settings');
      setSettings(settings.data);

      const result = await get('/api/user');
      if (result.status === 200) {
        setSession(result.data);
        updateUser();
      }
      setLoading(false);
      if (result.data?.twoFactor) return navigate('/login/verify');
    })();
  }, []);

  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'>

          {user ? 
            <div>
              <header className="card">
                <UserControls />
              </header>
              <Sidebar>
                <SidebarMenu menuItems={menuItems} />
              </Sidebar>
            </div>
            : null}

          <div className={`main-content ${user ? "" : "login"}`}>
            <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 className={`footer ${user ? "" : "login"}`}>
              <p className='m-0'>Made with ❤️ by <a href="https://corgi.wtf" target="_blank" rel="noreferrer">Navy.gif</a> &nbsp;|&nbsp; CSS by <a href="https://d3vision.dev" target="_blank" rel="noreferrer">D3vision</a></p>
            </div>
          </div>


      </div>
      
    
    </div>
  );
}

export default App;