Create useRoutes hook

src/webapp/components/layout/side-bar/SideBarContent.tsx

@@ -1,53 +1,54 @@
 import { List, ListItem, ListItemText } from "@material-ui/core";
 import React, { useCallback } from "react";
 import styled from "styled-components";
-import { NavLink, useHistory } from "react-router-dom";
+import { NavLink } from "react-router-dom";
 import { AddCircleOutline } from "@material-ui/icons";
 
 import i18n from "../../../../utils/i18n";
 import { Button } from "../../button/Button";
+import { RouteNames, routes, useRoutes } from "../../../hooks/useRoutes";
 
 type SideBarContentProps = {
     children?: React.ReactNode;
     hideOptions?: boolean;
     showCreateEvent?: boolean;
 };
 
-type SideBarOption = {
+export type SideBarOption = {
     text: string;
-    value: string;
+    value: RouteNames;
 };
 
 const DEFAULT_SIDEBAR_OPTIONS: SideBarOption[] = [
     {
         text: "Dashboard",
-        value: "/dashboard",
+        value: RouteNames.DASHBOARD,
     },
     {
         text: "Event Tracker",
-        value: "/event-tracker",
+        value: RouteNames.EVENT_TRACKER,
     },
     {
         text: "IM Team Builder",
-        value: "/incident-management-team-builder",
+        value: RouteNames.IM_TEAM_BUILDER,
     },
     {
         text: "Incident Action Plan",
-        value: "/incident-action-plan",
+        value: RouteNames.INCIDENT_ACTION_PLAN,
     },
     {
         text: "Resources",
-        value: "/resources",
+        value: RouteNames.RESOURCES,
     },
 ];
 
 export const SideBarContent: React.FC<SideBarContentProps> = React.memo(
     ({ children, hideOptions = false, showCreateEvent = false }) => {
-        const history = useHistory();
+        const { goTo } = useRoutes();
 
         const goToCreateEvent = useCallback(() => {
-            history.push(`/create/disease-outbreak-event`);
-        }, [history]);
+            goTo(RouteNames.CREATE_FORM, { formType: "disease-outbreak-event" });
+        }, [goTo]);
 
         return (
             <SideBarContainer hideOptions={hideOptions}>
@@ -62,7 +63,7 @@ export const SideBarContent: React.FC<SideBarContentProps> = React.memo(
                 ) : (
                     <StyledList>
                         {DEFAULT_SIDEBAR_OPTIONS.map(({ text, value }) => (
-                            <ListItem button key={text} component={NavLink} to={value}>
+                            <ListItem button key={text} component={NavLink} to={routes[value]}>
                                 <StyledText primary={i18n.t(text)} selected={false} />
                             </ListItem>
                         ))}

src/webapp/hooks/useRoutes.ts

@@ -0,0 +1,47 @@
+import React from "react";
+import { generatePath, useHistory } from "react-router-dom";
+import { FormType } from "../pages/form-page/FormPage";
+
+export enum RouteNames {
+    CREATE_FORM = "CREATE_FORM",
+    EDIT_FORM = "EDIT_FORM",
+    EVENT_TRACKER = "EVENT_TRACKER",
+    IM_TEAM_BUILDER = "IM_TEAM_BUILDER",
+    INCIDENT_ACTION_PLAN = "INCIDENT_ACTION_PLAN",
+    RESOURCES = "RESOURCES",
+    DASHBOARD = "DASHBOARD",
+}
+
+export const routes: Record<RouteNames, string> = {
+    [RouteNames.CREATE_FORM]: "/create/:formType",
+    [RouteNames.EDIT_FORM]: "/edit/:formType/:id",
+    [RouteNames.EVENT_TRACKER]: "/event-tracker",
+    [RouteNames.IM_TEAM_BUILDER]: "/incident-management-team-builder",
+    [RouteNames.INCIDENT_ACTION_PLAN]: "/incident-action-plan",
+    [RouteNames.RESOURCES]: "/resources",
+    [RouteNames.DASHBOARD]: "/",
+};
+
+type RouteParams = {
+    [RouteNames.CREATE_FORM]: { formType: FormType };
+    [RouteNames.EDIT_FORM]: { formType: FormType; id: string };
+    [RouteNames.EVENT_TRACKER]: undefined;
+    [RouteNames.IM_TEAM_BUILDER]: undefined;
+    [RouteNames.INCIDENT_ACTION_PLAN]: undefined;
+    [RouteNames.RESOURCES]: undefined;
+    [RouteNames.DASHBOARD]: undefined;
+};
+
+export function useRoutes() {
+    const history = useHistory();
+
+    const goTo = React.useCallback(
+        <T extends RouteNames>(route: T, params?: RouteParams[T]) => {
+            const path = generatePath(routes[route], params as any);
+            history.push(path);
+        },
+        [history]
+    );
+
+    return { goTo };
+}

src/webapp/pages/Router.tsx

@@ -7,23 +7,27 @@ import { IncidentActionPlanPage } from "./incident-action-plan/IncidentActionPla
 import { ResourcesPage } from "./resources/ResourcesPage";
 import { IMTeamBuilderPage } from "./incident-management-team-builder/IMTeamBuilderPage";
 import { FormPage } from "./form-page/FormPage";
+import { RouteNames, routes } from "../hooks/useRoutes";
 
 export function Router() {
     return (
         <HashRouter>
             <Switch>
-                <Route path="/create/:formType" render={() => <FormPage />} />
-                <Route path="/edit/:formType/:id" render={() => <FormPage />} />
-                <Route path="/event-tracker" render={() => <EventTrackerPage />} />
+                <Route path={routes[RouteNames.CREATE_FORM]} render={() => <FormPage />} />
+                <Route path={routes[RouteNames.EDIT_FORM]} render={() => <FormPage />} />
                 <Route
-                    path="/incident-management-team-builder"
+                    path={routes[RouteNames.EVENT_TRACKER]}
+                    render={() => <EventTrackerPage />}
+                />
+                <Route
+                    path={routes[RouteNames.IM_TEAM_BUILDER]}
                     render={() => <IMTeamBuilderPage />}
                 />
                 <Route
-                    path="/incident-action-plan/:incidentActionPlanId"
+                    path={routes[RouteNames.INCIDENT_ACTION_PLAN]}
                     render={() => <IncidentActionPlanPage />}
                 />
-                <Route path="/resources" render={() => <ResourcesPage />} />
+                <Route path={routes[RouteNames.RESOURCES]} render={() => <ResourcesPage />} />
                 {/* Default route */}
                 <Route render={() => <DashboardPage />} />
             </Switch>

src/webapp/pages/form-page/disease-outbreak-event/useDiseaseOutbreakEventForm.ts

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useState } from "react";
-import { useHistory } from "react-router-dom";
 
 import { Maybe } from "../../../../utils/ts-utils";
 import i18n from "../../../../utils/i18n";
@@ -8,6 +7,7 @@ import { Id } from "../../../../domain/entities/Ref";
 import { FormFieldState, FormState } from "../../../components/form/FormState";
 import { FormType } from "../FormPage";
 import { DiseaseOutbreakEvent } from "../../../../domain/entities/DiseaseOutbreakEvent";
+import { RouteNames, useRoutes } from "../../../hooks/useRoutes";
 
 export type GlobalMessage = {
     text: string;
@@ -45,7 +45,7 @@ export function useDiseaseOutbreakEventForm(
     onCancelForm: () => void;
 } {
     const { compositionRoot } = useAppContext();
-    const history = useHistory();
+    const { goTo } = useRoutes();
 
     const [globalMessage, setGlobalMessage] = useState<Maybe<GlobalMessage>>();
     const [formState, setFormState] = useState<DiseaseOutbreakEventFormState>({ kind: "loading" });
@@ -97,8 +97,8 @@ export function useDiseaseOutbreakEventForm(
     const onSaveForm = useCallback(() => {}, []);
 
     const onCancelForm = useCallback(() => {
-        history.push(`/`);
-    }, [history]);
+        goTo(RouteNames.DASHBOARD);
+    }, [goTo]);
 
     return {
         globalMessage,