monorepo/LCU.WebApps.Operations.IncentiveManager/src/App.tsx

import React, { useEffect } from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import NotFound404Page from "./components/status-pages/NotFound404Page";
import TestPage from "./components/status-pages/TestPage";
import Configuration from "./shared/configuration/Configuration";
import AppContainer from "./components/layout/AppContainer";
import ActivityPage from "./containers/activity-page/ActivityPage";
import ActivityDetailPage from "./containers/activity-detail-page/ActivityDetailPage";
import DepartmentGoalsPage from "./containers/goals/department/DepartmentGoalsPage";
import PersonnelGoalsPage from "./containers/goals/personnel/PersonnelGoalsPage";
import OrganizationView from "./containers/organization-view/OrganizationView";
import { useDispatch } from "react-redux";
import RoleManagement from "./containers/role-management/RoleMangement";
import PayoutProfilePage from "./containers/payout-profile/PayoutProfilePage";
import CommissionsPage from "./containers/commissions-page/CommissionsPage";
import ProfileSearchPage from "./containers/profile/ProfileSearchPage";
import ProfileSelector from "./containers/profile/ProfileSelector";
import { refreshProfile } from "./actions/ProfileActions";
import ExportPayoutPage from "./containers/payouts/ExportPayoutPage";
import DashboardPage from "./containers/dashboard/DashboardPage";
import ActivityFormPage from "./containers/activity-form-page/ActivityFormPage";
import { SettingsProvider } from "./shared/providers/SettingsProvider";
import DepartmentDetailPage from "./containers/department-detail-page/DepartmentDetailPage";
import PermissionGuard from "./containers/shared/PermissionGuard";
import EndOfEmploymentPage from "./containers/eoe-list/EndOfEmploymentPage";
import DeadActivityPage from "./containers/dead-activity-page/DeadActivityPage";
import RoleMappingPage from "./containers/role-mapping-page/RoleMappingPage";
import ReportPage from "./containers/report-page/ReportPage";

const App: React.FC = () => {
    const dispatch = useDispatch();
    useEffect(() => {
        dispatch(refreshProfile());
    }, []);

    return (
        //Normally we use Connected Router which requires has. React-Dom router does not require a hash.
        <AppContainer>
            <SettingsProvider>
                <BrowserRouter basename={Configuration.Get.appUrlBaseName}>
                    <Switch>
                        <Route
                            exact
                            path={Configuration.Get.appUrls.root}
                            render={() => <DashboardPage />}
                        />
                        <Route
                            exact
                            path={Configuration.Get.appUrls.dashboard}
                            render={() => <DashboardPage />}
                        />
                        <Route
                            exact
                            path={Configuration.Get.appUrls.activityForm}
                            render={() => {
                                return (
                                    <PermissionGuard
                                        showWarning
                                        requiredPermissions={[
                                            "CREATE_ACTIVITY"
                                        ]}
                                    >
                                        <ActivityFormPage />
                                    </PermissionGuard>
                                );
                            }}
                        />
                        <Route
                            exact
                            path={Configuration.Get.appUrls.activity}
                            render={() => {
                                return (
                                    <PermissionGuard
                                        showWarning
                                        requiredPermissions={[
                                            "VIEW_ACTIVITY_AUDIT"
                                        ]}
                                    >
                                        <ActivityPage />
                                    </PermissionGuard>
                                );
                            }}
                        />
                        <Route
                            exact
                            path={`${Configuration.Get.appUrls.activity}/:id`}
                            render={() => {
                                return (
                                    <PermissionGuard
                                        showWarning
                                        requiredPermissions={[
                                            "VIEW_ACTIVITY_AUDIT"
                                        ]}
                                    >
                                        <ActivityDetailPage />
                                    </PermissionGuard>
                                );
                            }}
                        />
                        <Route
                            exact
                            path={Configuration.Get.appUrls.deadActivity}
                            render={() => {
                                return (
                                    <PermissionGuard
                                        showWarning
                                        requiredPermissions={[
                                            "VIEW_DEAD_ACTIVITY_QUEUE"
                                        ]}
                                    >
                                        <DeadActivityPage />
                                    </PermissionGuard>
                                );
                            }}
                        />
                        <Route
                            exact
                            path={`${Configuration.Get.appUrls.department}`}
                            render={() => <DepartmentDetailPage />}
                        />
                        <Route
                            exact
                            path={Configuration.Get.appUrls.exportPayout}
                            render={() => {
                                return (
                                    <PermissionGuard
                                        showWarning
                                        requiredPermissions={[
                                            "GENERATE_PAYOUT_FILES"
                                        ]}
                                    >
                                        <ExportPayoutPage />
                                    </PermissionGuard>
                                );
                            }}
                        />
                        <Route
                            exact
                            path={Configuration.Get.appUrls.eoeList}
                            render={() => {
                                return (
                                    <PermissionGuard
                                        showWarning
                                        requiredPermissions={[
                                            "GENERATE_PAYOUT_FILES"
                                        ]}
                                    >
                                        <EndOfEmploymentPage />
                                    </PermissionGuard>
                                );
                            }}
                        />
                        <Route
                            exact
                            path={Configuration.Get.appUrls.departmentGoals}
                            render={() => {
                                return (
                                    <PermissionGuard
                                        showWarning
                                        requiredPermissions={[
                                            "MANAGE_DEPARTMENT_GOALS"
                                        ]}
                                    >
                                        <DepartmentGoalsPage />
                                    </PermissionGuard>
                                );
                            }}
                        />
                        <Route
                            exact
                            path={Configuration.Get.appUrls.personnelGoals}
                            render={() => {
                                return (
                                    <PermissionGuard
                                        showWarning
                                        requiredPermissions={[
                                            "MANAGE_PERSONNEL_GOALS"
                                        ]}
                                    >
                                        <PersonnelGoalsPage />
                                    </PermissionGuard>
                                );
                            }}
                        />
                        <Route
                            exact
                            path={Configuration.Get.appUrls.commissions}
                            render={() => {
                                return (
                                    <PermissionGuard
                                        showWarning
                                        requiredPermissions={[
                                            "MANAGE_DEPARTMENT_GOALS"
                                        ]}
                                    >
                                        <CommissionsPage />
                                    </PermissionGuard>
                                );
                            }}
                        />
                        <Route
                            exact
                            path={Configuration.Get.appUrls.profile}
                            render={() => <ProfileSelector />}
                        />
                        <Route
                            exact
                            path={Configuration.Get.appUrls.payoutProfiles}
                            render={() => <PayoutProfilePage />}
                        />
                        <Route
                            exact
                            path={Configuration.Get.appUrls.profileSearch}
                            render={() => {
                                return (
                                    <PermissionGuard
                                        showWarning
                                        requiredPermissions={[
                                            "MANAGE_DEPARTMENT_GOALS",
                                            "MANAGE_PERSONNEL_GOALS",
                                            "ASSIGN_ASSOCIATES_TO_DEPARTMENT"
                                        ]}
                                    >
                                        <ProfileSearchPage />
                                    </PermissionGuard>
                                );
                            }}
                        />
                        <Route
                            exact
                            path={Configuration.Get.appUrls.testRoute}
                            render={(routerProps) => (
                                <TestPage {...routerProps} />
                            )}
                        />
                        <Route
                            exact
                            path={Configuration.Get.appUrls.organization}
                            render={(routerProps) => (
                                <OrganizationView {...routerProps} />
                            )}
                        />
                        <Route
                            exact
                            path={Configuration.Get.appUrls.roles}
                            render={(routerProps) => (
                                <RoleManagement {...routerProps} />
                            )}
                        />
                        <Route
                            exact
                            path={Configuration.Get.appUrls.roleMappings}
                            render={() => {
                                return (
                                    <PermissionGuard
                                        showWarning
                                        requiredPermissions={[
                                            "MANAGE_ROLE_MAPPINGS"
                                        ]}
                                    >
                                        <RoleMappingPage />
                                    </PermissionGuard>
                                );
                            }}
                        />
                        <Route
                            exact
                            path={Configuration.Get.appUrls.reports}
                            render={() => {
                                return (
                                    <PermissionGuard
                                        showWarning
                                        requiredPermissions={["VIEW_REPORTS"]}
                                    >
                                        <ReportPage />
                                    </PermissionGuard>
                                );
                            }}
                        />
                        <Route
                            path="*"
                            render={(routerProps) => (
                                <NotFound404Page {...routerProps} />
                            )}
                        />
                    </Switch>
                </BrowserRouter>
            </SettingsProvider>
        </AppContainer>
    );
};

export default App;