Improve additional tab url for emergencies

Author: frozenhelium

src/App/routes/SmartNavigate.tsx

@@ -9,22 +9,28 @@ type RouteKey = string;
 
 interface Props extends NavigateProps {
     hashToRouteMap: Record<string, RouteKey>;
+    forwardUnmatchedHashTo?: string;
 }
 
 function SmartNavigate(props: Props) {
     const {
         hashToRouteMap,
+        forwardUnmatchedHashTo,
         ...navigateProps
     } = props;
+
     const location = useLocation();
     const newRoute = isTruthyString(location.hash)
-        ? hashToRouteMap[location.hash]
+        ? (hashToRouteMap[location.hash] ?? forwardUnmatchedHashTo)
         : undefined;
 
     if (isDefined(newRoute)) {
         return (
             <Navigate
-                to={newRoute}
+                to={{
+                    pathname: newRoute,
+                    hash: location.hash,
+                }}
                 replace
             />
         );

src/App/routes/index.tsx

@@ -611,6 +611,8 @@ const emergencyIndex = customWrapRoute({
                 '#activities': 'activities',
                 '#surge': 'surge',
             },
+            // TODO: make this typesafe
+            forwardUnmatchedHashTo: 'additional-info',
         },
     },
     context: {
@@ -670,6 +672,7 @@ const emergencySurge = customWrapRoute({
     },
 });
 
+// TODO: remove this route
 const emergencyAdditionalInfoOne = customWrapRoute({
     parent: emergenciesLayout,
     path: 'additional-info-1',
@@ -684,6 +687,7 @@ const emergencyAdditionalInfoOne = customWrapRoute({
         visibility: 'anything',
     },
 });
+// TODO: remove this route
 const emergencyAdditionalInfoTwo = customWrapRoute({
     parent: emergenciesLayout,
     path: 'additional-info-2',
@@ -698,6 +702,7 @@ const emergencyAdditionalInfoTwo = customWrapRoute({
         visibility: 'anything',
     },
 });
+// TODO: remove this route
 const emergencyAdditionalInfoThree = customWrapRoute({
     parent: emergenciesLayout,
     path: 'additional-info-3',
@@ -713,6 +718,19 @@ const emergencyAdditionalInfoThree = customWrapRoute({
     },
 });
 
+const emergencyAdditionalInfo = customWrapRoute({
+    parent: emergenciesLayout,
+    path: 'additional-info/:tabId?',
+    component: {
+        render: () => import('#views/EmergencyAdditionalTab'),
+        props: {},
+    },
+    context: {
+        title: 'Emergency Additional Info Tab',
+        visibility: 'anything',
+    },
+});
+
 type DefaultSurgeChild = 'overview';
 const surgeLayout = customWrapRoute({
     parent: rootLayout,
@@ -2975,6 +2993,7 @@ const wrappedRoutes = {
     emergencyAdditionalInfoOne,
     emergencyAdditionalInfoTwo,
     emergencyAdditionalInfoThree,
+    emergencyAdditionalInfo,
     surgeLayout,
     surgeOverview,
     surgeOperationalToolbox,

src/components/NavigationTab/index.tsx

@@ -1,5 +1,10 @@
 import { useCallback, useContext, useMemo } from 'react';
-import { _cs, isDefined } from '@togglecorp/fujs';
+import {
+    _cs,
+    isFalsyString,
+    isNotDefined,
+    isTruthyString,
+} from '@togglecorp/fujs';
 import {
     matchPath,
     NavLink,
@@ -19,9 +24,11 @@ interface Props {
     children?: React.ReactNode;
     stepCompleted?: boolean;
     title?: string;
-    parentRoute?: boolean;
     disabled?: boolean;
 
+    parentRoute?: boolean;
+    matchParam?: string;
+
     to: keyof WrappedRoutes | undefined | null;
 
     urlParams?: UrlParams;
@@ -39,8 +46,9 @@ function NavigationTab(props: Props) {
         className,
         title,
         stepCompleted,
-        parentRoute = false,
         disabled: disabledFromProps,
+        parentRoute = false,
+        matchParam,
     } = props;
 
     const {
@@ -71,13 +79,42 @@ function NavigationTab(props: Props) {
         }
     }, [disabled]);
 
-    const isActive = isDefined(to) && matchPath(
-        {
-            // eslint-disable-next-line react/destructuring-assignment
-            path: routes[to].absolutePath,
-            end: !parentRoute,
+    const matchParamValue = isTruthyString(matchParam)
+        ? urlParams?.[matchParam]
+        : undefined;
+
+    const isActive = useMemo(
+        () => {
+            if (isNotDefined(to)) {
+                return false;
+            }
+
+            const match = matchPath(
+                {
+                    // eslint-disable-next-line react/destructuring-assignment
+                    path: routes[to].absolutePath,
+                    end: !parentRoute,
+                },
+                location.pathname,
+            );
+
+            if (isNotDefined(match)) {
+                return false;
+            }
+
+            if (isTruthyString(matchParam)) {
+                const paramValue = match.params[matchParam];
+
+                if (isFalsyString(paramValue)) {
+                    return false;
+                }
+
+                return matchParamValue === paramValue;
+            }
+
+            return true;
         },
-        location.pathname,
+        [to, routes, location.pathname, matchParam, parentRoute, matchParamValue],
     );
 
     const linkClassName = useMemo(

src/utils/outletContext.ts

@@ -9,6 +9,7 @@ type Snippets = EmergencySnippetsResponse['results'];
 
 interface EmergencyAdditionalTabs {
     name: string;
+    tabId: string;
     infoPageId: 1 | 2 | 3;
     routeName: string;
     snippets: Snippets;

src/views/Emergency/index.tsx

@@ -160,28 +160,41 @@ export function Component() {
             return [];
         }
 
-        const tabOneTitle = emergencyResponse.tab_one_title || 'Tab One';
-        const tabTwoTitle = emergencyResponse.tab_two_title || 'Tab Two';
-        const tabThreeTitle = emergencyResponse.tab_three_title || 'Tab Three';
+        const tabOneTitle = emergencyResponse.tab_one_title || 'Additional Info 1';
+        const tabTwoTitle = emergencyResponse.tab_two_title || 'Additional Info 2';
+        const tabThreeTitle = emergencyResponse.tab_three_title || 'Additional Info 3';
+
+        function toKebabCase(str: string) {
+            return str.toLocaleLowerCase().split(' ').join('-');
+        }
 
         return [
             {
                 name: tabOneTitle,
+                tabId: toKebabCase(tabOneTitle),
                 routeName: 'emergencyAdditionalInfoOne' as const,
                 infoPageId: 1 as const,
-                snippets: emergencySnippetResponse.results.filter((snippet) => snippet.tab === 1),
+                snippets: emergencySnippetResponse.results.filter(
+                    (snippet) => snippet.tab === 1,
+                ),
             },
             {
                 name: tabTwoTitle,
+                tabId: toKebabCase(tabTwoTitle),
                 routeName: 'emergencyAdditionalInfoTwo' as const,
                 infoPageId: 2 as const,
-                snippets: emergencySnippetResponse.results.filter((snippet) => snippet.tab === 2),
+                snippets: emergencySnippetResponse.results.filter(
+                    (snippet) => snippet.tab === 2,
+                ),
             },
             {
                 name: tabThreeTitle,
+                tabId: toKebabCase(tabThreeTitle),
                 routeName: 'emergencyAdditionalInfoThree' as const,
                 infoPageId: 3 as const,
-                snippets: emergencySnippetResponse.results.filter((snippet) => snippet.tab === 3),
+                snippets: emergencySnippetResponse.results.filter(
+                    (snippet) => snippet.tab === 3,
+                ),
             },
         ].filter((tabInfo) => tabInfo.snippets.length > 0);
     }, [emergencyResponse, emergencySnippetResponse]);
@@ -328,11 +341,13 @@ export function Component() {
                 )}
                 {emergencyAdditionalTabs.map((tab) => (
                     <NavigationTab
-                        key={tab.routeName}
-                        to={tab.routeName}
+                        key={tab.tabId}
+                        to="emergencyAdditionalInfo"
                         urlParams={{
                             emergencyId,
+                            tabId: tab.tabId,
                         }}
+                        matchParam="tabId"
                     >
                         {tab.name}
                     </NavigationTab>

src/views/EmergencyAdditionalTab/index.tsx

@@ -1,25 +1,30 @@
-import { useOutletContext } from 'react-router-dom';
+import {
+    useOutletContext,
+    useParams,
+} from 'react-router-dom';
+
 import { type EmergencyOutletContext } from '#utils/outletContext';
 import HtmlOutput from '#components/HtmlOutput';
 
 import styles from './styles.module.css';
 
 interface Props {
-    infoPageId: number;
+    infoPageId?: number;
 }
 
 // eslint-disable-next-line import/prefer-default-export
 export function Component(props: Props) {
+    const urlParams = useParams<{ tabId: string }>();
     const { infoPageId } = props;
     const { emergencyAdditionalTabs } = useOutletContext<EmergencyOutletContext>();
 
     const additionalTab = emergencyAdditionalTabs?.find(
-        (tab) => tab.infoPageId === infoPageId,
+        (tab) => tab.infoPageId === infoPageId
+            || urlParams.tabId === tab.tabId,
     );
+
     return (
-        <div
-            className={styles.additionalTab}
-        >
+        <div className={styles.additionalTab}>
             {additionalTab?.snippets?.map((snippet) => (
                 <HtmlOutput
                     key={snippet.id}

src/views/EmergencySlug/index.tsx

@@ -32,6 +32,7 @@ export function Component() {
     }
 
     // FIXME: Add a wrapper around navigate
+    // We can also use generatePath
     return (
         <Navigate to={`/emergencies/${emergencyResponse?.id}`} replace />
     );