✨ [#37] feat: implement detail routing

Author: svenvandescheur

frontend/src/pages/zaaktype/zaaktype.loader.ts

@@ -18,13 +18,10 @@ export const zaaktypeLoader = loginRequired(
   async (
     loaderFunctionArgs: LoaderFunctionArgs,
   ): Promise<ZaaktypeLoaderData> => {
-    const url = new URL(loaderFunctionArgs.request.url);
-    const uuid = loaderFunctionArgs.params.zaaktypeId;
-    const params = url.searchParams;
+    const { params } = loaderFunctionArgs;
     const response = await request<DetailResponse<ZaakType>>(
       "GET",
-      `/catalogi/zaaktypen/${uuid}`,
-      params,
+      `/service/${params.serviceSlug}/zaaktypen/${params.zaaktypeUUID}`,
     );
     return { ...response, fieldsets: ZAAKTYPE_FIELDSETS };
   },

frontend/src/pages/zaaktypen/Zaaktypen.tsx

@@ -1,4 +1,5 @@
-import { useLoaderData } from "react-router";
+import { useCallback } from "react";
+import { useLoaderData, useLocation } from "react-router";
 import { ZaaktypenLoaderData } from "~/pages";
 import { ListView } from "~/views";
 
@@ -7,5 +8,16 @@ import { ListView } from "~/views";
  */
 export function ZaaktypenPage() {
   const loaderData = useLoaderData<ZaaktypenLoaderData>();
-  return <ListView {...loaderData} />;
+  const { pathname } = useLocation();
+
+  /**
+   * Splits `obj.url` into parts, using the last part as UUID.
+   * @param obj - An object which implements a `url` key.
+   */
+  const getUUID = useCallback(
+    (obj: { url: string }) => `${pathname}/${obj.url.split("/").reverse()[0]}`,
+    [pathname],
+  );
+
+  return <ListView {...loaderData} getHref={getUUID} />;
 }

frontend/src/pages/zaaktypen/zaaktypen.loader.ts

@@ -19,6 +19,17 @@ export const zaaktypenLoader = loginRequired(
     loaderFunctionArgs: LoaderFunctionArgs,
   ): Promise<ZaaktypenLoaderData> => {
     const { params } = loaderFunctionArgs;
+
+    // Skip fetching if detail view is active.
+    if (params.zaaktypeUUID) {
+      return {
+        fields: [],
+        fieldsets: [],
+        pagination: { count: 0, page: 1, pageSize: 0 },
+        results: [],
+      };
+    }
+
     const response = await request<ListResponse<ZaakType>>(
       "GET",
       `/service/${params.serviceSlug}/zaaktypen`,

frontend/src/routes.tsx

@@ -46,7 +46,7 @@ export const routes: RouteObject[] = [
                 children: [
                   {
                     id: "zaaktype",
-                    path: ":zaaktypeId",
+                    path: ":zaaktypeUUID",
                     element: <ZaaktypePage />,
                     loader: zaaktypeLoader,
                   },

frontend/src/views/ListView/ListView.tsx

@@ -1,7 +1,7 @@
-import { FieldSet, ListTemplate } from "@maykin-ui/admin-ui";
-import { useCallback } from "react";
+import { ListTemplate } from "@maykin-ui/admin-ui";
+import React, { useCallback } from "react";
 import {
-  useLocation,
+  useNavigate,
   useNavigation,
   useOutlet,
   useSearchParams,
@@ -10,7 +10,7 @@ import { ListResponse } from "~/api/types";
 import { useBreadcrumbItems } from "~/hooks";
 
 export type ListViewProps<T extends object> = ListResponse<T> & {
-  fieldsets: FieldSet<T>[];
+  getHref?: (obj: T) => string;
 };
 
 /**
@@ -19,20 +19,22 @@ export type ListViewProps<T extends object> = ListResponse<T> & {
  * The primary action (click) shows item details in a side pane.
  * Ctrl+click or Cmd+click navigates to the item's detail route in fullscreen.
  *
- * @typeParam T - The type of items in the list. Must include at least `uuid` and `identificatie` fields.
+ * @typeParam T - The type of items in the list. Must include at least `uuid` and
+ *  `identificatie` fields.
  *
  * @param fields - The field's configuration.
  * @param pagination - The paginator configuration.
  * @param results - The list of items to render in the data grid.
- * @param fieldsets - Optional custom fieldsets used for rendering item details.
- * @param fieldsets - Optional custom fieldsets used for rendering item details.
+ * @param getHref - A function that if set, receives the row and should return a
+ *  URL to navigate to.
  */
 export function ListView<T extends object>({
   fields,
   pagination,
   results,
+  getHref,
 }: ListViewProps<T>) {
-  const { pathname } = useLocation();
+  const navigate = useNavigate();
   const { state } = useNavigation();
   const outlet = useOutlet();
   const [urlSearchParams, setURLSearchParams] = useSearchParams();
@@ -69,22 +71,37 @@ export function ListView<T extends object>({
     [urlSearchParams],
   );
 
+  /**
+   * Gets called when a row's identifier is clicked.
+   * @param event - The mouse event.
+   * @param data - The row data.
+   */
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLAnchorElement>, data: T) => {
+      event.preventDefault();
+      if (getHref) {
+        navigate(getHref(data));
+      }
+    },
+    [getHref],
+  );
+
   return (
     outlet || (
       <ListTemplate
         breadcrumbItems={breadcrumbItems}
         dataGridProps={{
           objectList: results.map((row) => ({
             ...row,
-            // @ts-expect-error - Assume uuid.
-            href: row.uuid ? `${pathname}/${row.uuid}` : undefined,
+            href: getHref && getHref(row),
           })),
           decorate: true,
           fields: fields,
           height: "fill-available-space",
           showPaginator: Boolean(pagination),
           loading: state !== "idle",
           paginatorProps: pagination,
+          onClick: handleClick,
           onPageChange: handlePageChange,
         }}
       />