AppWrapper.tsx

import { Suspense, lazy } from 'react';
import { Switch, Route } from 'react-router-dom';

import Header from 'components/navigation/Header';

const Tasks = lazy(() => import('pages/Tasks'));
const TaskDetail = lazy(() => import('pages/Tasks/TaskDetail'));
const TaskStart = lazy(() => import('pages/Tasks/TaskStart'));
const ProjectDetail = lazy(() => import('pages/Projects/ProjectDetail'));
const ProjectCreate = lazy(() => import('pages/Projects/ProjectCreate'));
const TaskCreate = lazy(() => import('pages/Tasks/TaskCreate'));
const TaskEdit = lazy(() => import('pages/Tasks/TaskEdit'));
const ProjectEdit = lazy(() => import('pages/Projects/ProjectEdit'));
const Projects = lazy(() => import('pages/Projects'));
const Stats = lazy(() => import('pages/Stats'));
const TeamsEdit = lazy(() => import('pages/Teams/TeamsEdit'));
const Teams = lazy(() => import('pages/Teams'));
const TeamsCreate = lazy(() => import('pages/Teams/TeamsCreate'));
const Settings = lazy(() => import('pages/Settings'));

/**
 * This component is a wrapper for all pages for the main application. It includes the header,
 * sidebar and navigation. It also does the routing for the main application.
 */
export default function AppWrapper() {
    return (
        <Header>
            <Suspense fallback={false}>
                <Switch>
                    <Route path="/tasks/:taskId/start" component={TaskStart} />
                    <Route path="/tasks/:taskId/edit" component={TaskEdit} />
                    <Route path="/tasks/:taskId" component={TaskDetail} />
                    <Route path="/tasks" exact component={Tasks} />
                    <Route path="/projects/create" component={ProjectCreate} />
                    <Route path="/projects/:projectId/tasks/create" component={TaskCreate} />
                    <Route path="/projects/:projectId/edit" component={ProjectEdit} />
                    <Route path="/projects/:projectId" component={ProjectDetail} />
                    <Route path="/projects" component={Projects} />
                    <Route path={['/stats/:time', '/stats']} component={Stats} />
                    <Route path="/settings" component={Settings} />
                    <Route path="/teams/create" exact component={TeamsCreate} />
                    <Route path="/teams/:teamId/edit" exact component={TeamsEdit} />
                    <Route path={['/teams/:teamId', '/teams']} component={Teams} />
                </Switch>
            </Suspense>
        </Header>
    );
}