Files
bodyshop/client/src/pages/manage/manage.page.jsx
2020-01-14 16:12:51 -08:00

67 lines
2.0 KiB
JavaScript

import React, { lazy, Suspense, useEffect } from "react";
import { Route } from "react-router";
import { Layout, BackTop } from "antd";
import { useTranslation } from "react-i18next";
//Component Imports
import HeaderContainer from "../../components/header/header.container";
import FooterComponent from "../../components/footer/footer.component";
import ErrorBoundary from "../../components/error-boundary/error-boundary.component";
const WhiteBoardPage = lazy(() => import("../white-board/white-board.page"));
const JobsPage = lazy(() => import("../jobs/jobs.page"));
const JobsDetailPage = lazy(() => import("../jobs-detail/jobs-detail.page"));
const ProfilePage = lazy(() => import("../profile/profile.container.page"));
const JobsDocumentsPage = lazy(() =>
import("../jobs-documents/jobs-documents.container")
);
const { Header, Content, Footer } = Layout;
//This page will handle all routing for the entire application.
export default function Manage({ match }) {
const { t } = useTranslation();
useEffect(() => {
document.title = t("titles.app");
}, [t]);
return (
<Layout>
<Header>
<HeaderContainer />
</Header>
<Content>
<ErrorBoundary>
<Suspense
fallback={<div>TODO: Suspended Loading in Manage Page...</div>}>
<Route exact path={`${match.path}`} component={WhiteBoardPage} />
<Route exact path={`${match.path}/jobs`} component={JobsPage} />
<Route
exact
path={`${match.path}/jobs/:jobId`}
component={JobsDetailPage}
/>
<Route
exact
path={`${match.path}/jobs/:jobId/documents`}
component={JobsDocumentsPage}
/>
<Route
exact
path={`${match.path}/profile`}
component={ProfilePage}
/>
</Suspense>
</ErrorBoundary>
</Content>
<Footer>
<FooterComponent />
</Footer>
<BackTop />
</Layout>
);
}