fix: improve route handle type

dhis2 · Nov 5, 2024 · a41ab5d · a41ab5d
1 parent 81bcaf6
commit a41ab5d
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 47 deletions.
diff --git a/src/app/routes/Router.tsx b/src/app/routes/Router.tsx
@@ -28,7 +28,7 @@ import { Layout, Breadcrumbs, BreadcrumbItem } from '../layout'
 import { CheckAuthorityForSection } from './CheckAuthorityForSection'
 import { DefaultErrorRoute } from './DefaultErrorRoute'
 import { LegacyAppRedirect } from './LegacyAppRedirect'
-import { BreadCrumbMatchInfo } from './types'
+import { RouteHandle } from './types'
 // This loads all the overview routes in the same chunk since they resolve to the same promise
 // see https://reactrouter.com/en/main/route/lazy#multiple-routes-in-a-single-file
 // Overviews are small, and the AllOverview would load all the other overviews anyway,
@@ -111,19 +111,22 @@ const schemaSectionRoutes = Object.values(SCHEMA_SECTIONS).map((section) => (
     <Route
         key={section.namePlural}
         path={getSectionPath(section)}
-        handle={{
-            section,
-            crumb: () => (
-                <BreadcrumbItem
-                    label={
-                        OVERVIEW_SECTIONS[section.parentSectionKey].titlePlural
-                    }
-                    to={`/${getOverviewPath(
-                        OVERVIEW_SECTIONS[section.parentSectionKey]
-                    )}`}
-                />
-            ),
-        }}
+        handle={
+            {
+                section,
+                crumb: () => (
+                    <BreadcrumbItem
+                        label={
+                            OVERVIEW_SECTIONS[section.parentSectionKey]
+                                .titlePlural
+                        }
+                        to={`/${getOverviewPath(
+                            OVERVIEW_SECTIONS[section.parentSectionKey]
+                        )}`}
+                    />
+                ),
+            } satisfies RouteHandle
+        }
         element={
             <>
                 <Breadcrumbs />
@@ -133,46 +136,52 @@ const schemaSectionRoutes = Object.values(SCHEMA_SECTIONS).map((section) => (
     >
         <Route index lazy={createSectionLazyRouteFunction(section, 'List')} />
         <Route
-            handle={{
-                hideSidebar: true,
-                crumb: (matchInfo: BreadCrumbMatchInfo) => (
-                    <BreadcrumbItem
-                        label={section.title}
-                        to={matchInfo.pathname}
-                    />
-                ),
-            }}
+            handle={
+                {
+                    hideSidebar: true,
+                    crumb: (matchInfo) => (
+                        <BreadcrumbItem
+                            label={section.title}
+                            to={matchInfo.pathname}
+                        />
+                    ),
+                } satisfies RouteHandle
+            }
         >
             {!sectionsNoNewRoute.has(section) && (
                 <Route
                     path={routePaths.sectionNew}
                     lazy={createSectionLazyRouteFunction(section, 'New')}
-                    handle={{
-                        crumb: (matchInfo: BreadCrumbMatchInfo) => (
-                            <BreadcrumbItem
-                                label={i18n.t('New {{modelName}}', {
-                                    modelName: section.title,
-                                })}
-                                to={matchInfo.pathname}
-                            />
-                        ),
-                    }}
+                    handle={
+                        {
+                            crumb: (matchInfo) => (
+                                <BreadcrumbItem
+                                    label={i18n.t('New {{modelName}}', {
+                                        modelName: section.title,
+                                    })}
+                                    to={matchInfo.pathname}
+                                />
+                            ),
+                        } satisfies RouteHandle
+                    }
                 />
             )}
             <Route path=":id" element={<VerifyModelId />}>
                 <Route
                     index
-                    handle={{
-                        showFooter: true,
-                        crumb: (matchInfo: BreadCrumbMatchInfo) => (
-                            <BreadcrumbItem
-                                label={i18n.t('Edit {{modelName}}', {
-                                    modelName: section.title,
-                                })}
-                                to={`${matchInfo.pathname}`}
-                            />
-                        ),
-                    }}
+                    handle={
+                        {
+                            showFooter: true,
+                            crumb: (matchInfo) => (
+                                <BreadcrumbItem
+                                    label={i18n.t('Edit {{modelName}}', {
+                                        modelName: section.title,
+                                    })}
+                                    to={matchInfo.pathname}
+                                />
+                            ),
+                        } satisfies RouteHandle
+                    }
                     lazy={createSectionLazyRouteFunction(section, 'Edit')}
                 />
             </Route>
@@ -207,7 +216,7 @@ const routes = createRoutesFromElements(
                             section.componentName,
                             section
                         )}
-                        handle={{ section }}
+                        handle={{ section } satisfies RouteHandle}
                     />
                 ))}
             </Route>

diff --git a/src/app/routes/types.ts b/src/app/routes/types.ts
@@ -1,5 +1,5 @@
 import type { UIMatch, useMatches } from 'react-router-dom'
-import type { ModelSection } from '../../types'
+import type { ModelSection, OverviewSection } from '../../types'
 // utility type to type a match with a handle-property returned from useMatches
 // since handle is unknown, we need to cast it to the correct type
 type MatchWithHandle<THandle> = ReturnType<typeof useMatches>[number] & {
@@ -11,7 +11,7 @@ export type BreadCrumbMatchInfo = Pick<UIMatch, 'params' | 'pathname'>
 // common type for possible handle-properties used in Route
 export type RouteHandle = {
     hideSidebar?: boolean
-    section?: ModelSection
+    section?: ModelSection | OverviewSection
     showFooter?: boolean
     crumb?: (matchInfo: BreadCrumbMatchInfo) => React.ReactNode
 }