import { Suspense, lazy } from 'react'; import { Switch } from 'react-router-dom'; import ProtectedRoute from 'components/helpers/ProtectedRoute'; 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 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 Settings = lazy(() => import('pages/Settings')); export default function AppWrapper() { return ( <Header> <Suspense fallback={false}> <Switch> <ProtectedRoute path="/tasks/:uuid/start" component={TaskStart} /> <ProtectedRoute path="/tasks/:uuid" component={TaskDetail} /> <ProtectedRoute path="/tasks" exact component={Tasks} /> <ProtectedRoute path="/projects/:uuid" component={ProjectDetail} /> <ProtectedRoute path="/projects" component={Projects} /> <ProtectedRoute path="/stats" component={Stats} /> <ProtectedRoute path="/settings" component={Settings} /> <ProtectedRoute path="/teams/:teamId/edit" exact component={TeamsEdit} /> <ProtectedRoute path={['/teams/:teamId', '/teams']} component={Teams} /> </Switch> </Suspense> </Header> ); }