Rename RouteNames to RouteName and improve types in useRoutes

EyeSeeTea · Aug 2, 2024 · 10399a6 · 10399a6
1 parent d98308b
commit 10399a6
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 38 deletions.
diff --git a/src/webapp/components/layout/side-bar/SideBarContent.tsx b/src/webapp/components/layout/side-bar/SideBarContent.tsx
@@ -6,7 +6,7 @@ import { AddCircleOutline } from "@material-ui/icons";
 
 import i18n from "../../../../utils/i18n";
 import { Button } from "../../button/Button";
-import { RouteNames, routes, useRoutes } from "../../../hooks/useRoutes";
+import { RouteName, routes, useRoutes } from "../../../hooks/useRoutes";
 
 type SideBarContentProps = {
     children?: React.ReactNode;
@@ -16,29 +16,29 @@ type SideBarContentProps = {
 
 export type SideBarOption = {
     text: string;
-    value: RouteNames;
+    value: RouteName;
 };
 
 const DEFAULT_SIDEBAR_OPTIONS: SideBarOption[] = [
     {
         text: "Dashboard",
-        value: RouteNames.DASHBOARD,
+        value: RouteName.DASHBOARD,
     },
     {
         text: "Event Tracker",
-        value: RouteNames.EVENT_TRACKER,
+        value: RouteName.EVENT_TRACKER,
     },
     {
         text: "IM Team Builder",
-        value: RouteNames.IM_TEAM_BUILDER,
+        value: RouteName.IM_TEAM_BUILDER,
     },
     {
         text: "Incident Action Plan",
-        value: RouteNames.INCIDENT_ACTION_PLAN,
+        value: RouteName.INCIDENT_ACTION_PLAN,
     },
     {
         text: "Resources",
-        value: RouteNames.RESOURCES,
+        value: RouteName.RESOURCES,
     },
 ];
 
@@ -47,7 +47,7 @@ export const SideBarContent: React.FC<SideBarContentProps> = React.memo(
         const { goTo } = useRoutes();
 
         const goToCreateEvent = useCallback(() => {
-            goTo(RouteNames.CREATE_FORM, { formType: "disease-outbreak-event" });
+            goTo(RouteName.CREATE_FORM, { formType: "disease-outbreak-event" });
         }, [goTo]);
 
         return (

diff --git a/src/webapp/hooks/useRoutes.ts b/src/webapp/hooks/useRoutes.ts
@@ -2,7 +2,7 @@ import React from "react";
 import { generatePath, useHistory } from "react-router-dom";
 import { FormType } from "../pages/form-page/FormPage";
 
-export enum RouteNames {
+export enum RouteName {
     CREATE_FORM = "CREATE_FORM",
     EDIT_FORM = "EDIT_FORM",
     EVENT_TRACKER = "EVENT_TRACKER",
@@ -12,31 +12,35 @@ export enum RouteNames {
     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]: "/",
-};
+const formTypes = ["disease-outbreak-event"] as const satisfies FormType[];
+
+const formType = `:formType(${formTypes.join("|")})` as const;
+
+export const routes: Record<RouteName, string> = {
+    [RouteName.CREATE_FORM]: `/create/${formType}`,
+    [RouteName.EDIT_FORM]: `/edit/${formType}/:id`,
+    [RouteName.EVENT_TRACKER]: "/event-tracker",
+    [RouteName.IM_TEAM_BUILDER]: "/incident-management-team-builder",
+    [RouteName.INCIDENT_ACTION_PLAN]: "/incident-action-plan",
+    [RouteName.RESOURCES]: "/resources",
+    [RouteName.DASHBOARD]: "/",
+} as const;
 
 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;
+    [RouteName.CREATE_FORM]: { formType: FormType };
+    [RouteName.EDIT_FORM]: { formType: FormType; id: string };
+    [RouteName.EVENT_TRACKER]: undefined;
+    [RouteName.IM_TEAM_BUILDER]: undefined;
+    [RouteName.INCIDENT_ACTION_PLAN]: undefined;
+    [RouteName.RESOURCES]: undefined;
+    [RouteName.DASHBOARD]: undefined;
 };
 
 export function useRoutes() {
     const history = useHistory();
 
     const goTo = React.useCallback(
-        <T extends RouteNames>(route: T, params?: RouteParams[T]) => {
+        <T extends RouteName>(route: T, params?: RouteParams[T]) => {
             const path = generatePath(routes[route], params as any);
             history.push(path);
         },

diff --git a/src/webapp/pages/Router.tsx b/src/webapp/pages/Router.tsx
@@ -7,27 +7,24 @@ 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";
+import { RouteName, routes } from "../hooks/useRoutes";
 
 export function Router() {
     return (
         <HashRouter>
             <Switch>
-                <Route path={routes[RouteNames.CREATE_FORM]} render={() => <FormPage />} />
-                <Route path={routes[RouteNames.EDIT_FORM]} render={() => <FormPage />} />
+                <Route path={routes[RouteName.CREATE_FORM]} render={() => <FormPage />} />
+                <Route path={routes[RouteName.EDIT_FORM]} render={() => <FormPage />} />
+                <Route path={routes[RouteName.EVENT_TRACKER]} render={() => <EventTrackerPage />} />
                 <Route
-                    path={routes[RouteNames.EVENT_TRACKER]}
-                    render={() => <EventTrackerPage />}
-                />
-                <Route
-                    path={routes[RouteNames.IM_TEAM_BUILDER]}
+                    path={routes[RouteName.IM_TEAM_BUILDER]}
                     render={() => <IMTeamBuilderPage />}
                 />
                 <Route
-                    path={routes[RouteNames.INCIDENT_ACTION_PLAN]}
+                    path={routes[RouteName.INCIDENT_ACTION_PLAN]}
                     render={() => <IncidentActionPlanPage />}
                 />
-                <Route path={routes[RouteNames.RESOURCES]} render={() => <ResourcesPage />} />
+                <Route path={routes[RouteName.RESOURCES]} render={() => <ResourcesPage />} />
                 {/* Default route */}
                 <Route render={() => <DashboardPage />} />
             </Switch>

diff --git a/src/webapp/pages/form-page/disease-outbreak-event/useDiseaseOutbreakEventForm.ts b/src/webapp/pages/form-page/disease-outbreak-event/useDiseaseOutbreakEventForm.ts
@@ -7,7 +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";
+import { RouteName, useRoutes } from "../../../hooks/useRoutes";
 
 export type GlobalMessage = {
     text: string;
@@ -97,7 +97,7 @@ export function useDiseaseOutbreakEventForm(
     const onSaveForm = useCallback(() => {}, []);
 
     const onCancelForm = useCallback(() => {
-        goTo(RouteNames.DASHBOARD);
+        goTo(RouteName.DASHBOARD);
     }, [goTo]);
 
     return {