👌 [#45] PR Feedback

maykinmedia · Jun 7, 2024 · 12da0fa · 12da0fa
1 parent 190bed1
commit 12da0fa
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 24 deletions.
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
@@ -36,7 +36,7 @@ const router = createBrowserRouter([
         loader: destructionListCreateLoader,
       },
       {
-        path: "/destruction-lists/:id",
+        path: "/destruction-lists/:uuid",
         element: <DestructionListDetailPage />,
         action: destructionListUpdateAction,
         loader: destructionListDetailLoader,

diff --git a/frontend/src/pages/destructionlist/Assignees.tsx b/frontend/src/pages/destructionlist/Assignees.tsx
@@ -10,24 +10,22 @@ import {
   SerializedFormData,
 } from "@maykin-ui/admin-ui";
 import React, { FormEvent, useState } from "react";
-import { useActionData, useSubmit } from "react-router-dom";
-import { useAsync } from "react-use";
+import { useActionData, useLoaderData, useSubmit } from "react-router-dom";
 
-import { listReviewers } from "../../lib/api/reviewers";
-import { AssigneesEditableProps, AssigneesFormProps } from "./types";
+import {
+  AssigneesEditableProps,
+  AssigneesFormProps,
+  DestructionListDetailContext,
+} from "./types";
 
 export function AssigneesForm({
   initialAssignees,
   onClose,
 }: AssigneesFormProps) {
   const errors = useActionData() || {};
   const submit = useSubmit();
-
-  const { loading, value: availableReviewers = [] } = useAsync(async () => {
-    return await listReviewers();
-  }, []);
-
-  if (loading) return <Body>Loading...</Body>;
+  const { availableReviewers } =
+    useLoaderData() as DestructionListDetailContext;
 
   const formFields: FormField[] = [
     {

diff --git a/frontend/src/pages/destructionlist/DestructionListDetail.tsx b/frontend/src/pages/destructionlist/DestructionListDetail.tsx
@@ -14,7 +14,7 @@ import { redirect, useLoaderData } from "react-router-dom";
 
 import { loginRequired } from "../../lib/api/loginRequired";
 import { request } from "../../lib/api/request";
-import { User } from "../../lib/api/reviewers";
+import { User, listReviewers } from "../../lib/api/reviewers";
 import { AssigneesEditable } from "./Assignees";
 import { getZakenData } from "./DestructionListCreate";
 import "./DestructionListDetail.css";
@@ -97,19 +97,19 @@ export function DestructionListDetailPage() {
   );
 }
 
-export async function getDestructionList(id: string) {
-  const response = await request("GET", `/destruction-lists/${id}`);
+export async function getDestructionList(uuid: string) {
+  const response = await request("GET", `/destruction-lists/${uuid}`);
   const promise: Promise<User[]> = response.json();
   return promise;
 }
 
 export async function updateDestructionList(
-  id: string,
+  uuid: string,
   data: DestructionListUpdateData,
 ) {
   const response = await request(
     "PATCH",
-    `/destruction-lists/${id}/`,
+    `/destruction-lists/${uuid}/`,
     {},
     data,
   );
@@ -143,29 +143,31 @@ export async function destructionListUpdateAction({
   }
 
   try {
-    await updateDestructionList(params.id as string, data);
+    await updateDestructionList(params.uuid as string, data);
   } catch (e: unknown) {
     if (e instanceof Response) return await (e as Response).json();
 
     throw e;
   }
 
-  return redirect(`/destruction-lists/${params.id}/`);
+  return redirect(`/destruction-lists/${params.uuid}/`);
 }
 
 export const destructionListDetailLoader = loginRequired(
   async ({ request, params }: ActionFunctionArgs) => {
-    if (typeof params.id === "undefined") return {};
+    if (typeof params.uuid === "undefined") return {};
 
     const promises = [
-      getDestructionList(params.id),
+      getDestructionList(params.uuid),
       getZakenData(request, {
-        not_in_destruction_list_except: String(params.id),
+        not_in_destruction_list_except: String(params.uuid),
       }),
+      listReviewers(),
     ];
 
-    const [destructionList, zakenListData] = await Promise.all(promises);
+    const [destructionList, zakenListData, availableReviewers] =
+      await Promise.all(promises);
 
-    return { destructionList, ...zakenListData };
+    return { destructionList, availableReviewers, ...zakenListData };
   },
 );
diff --git a/frontend/src/pages/destructionlist/types.ts b/frontend/src/pages/destructionlist/types.ts
@@ -30,6 +30,7 @@ export type DestructionListData = {
 export interface DestructionListDetailContext
   extends DestructionListCreateContext {
   destructionList: DestructionListData;
+  availableReviewers: User[];
 }
 
 export type AssigneeUpdate = {

diff --git a/frontend/src/pages/landing/Landing.tsx b/frontend/src/pages/landing/Landing.tsx
@@ -77,7 +77,7 @@ export const Landing = () => {
       title: list.name,
       days: timeAgo(list.created),
       assigneeNames: constructAssigneeNames(list.assignees),
-      href: `/destruction-list/${list.uuid}`,
+      href: `/destruction-lists/${list.uuid}`,
     })),
   ) as unknown as AttributeData[][];