From ef39a58c74171ad16c2175a8159514c2bb4a3fa3 Mon Sep 17 00:00:00 2001 From: SilviaAmAm Date: Fri, 7 Jun 2024 11:17:43 +0200 Subject: [PATCH] :ok_hand: [#45] PR Feedback --- frontend/src/index.tsx | 2 +- .../src/pages/destructionlist/Assignees.tsx | 18 ++++++------- .../destructionlist/DestructionListDetail.tsx | 26 ++++++++++--------- frontend/src/pages/destructionlist/types.ts | 1 + frontend/src/pages/landing/Landing.tsx | 2 +- 5 files changed, 25 insertions(+), 24 deletions(-) diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index 5676e5e7..fa776029 100644 --- 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: , action: destructionListUpdateAction, loader: destructionListDetailLoader, diff --git a/frontend/src/pages/destructionlist/Assignees.tsx b/frontend/src/pages/destructionlist/Assignees.tsx index 5109fef9..eb7cf5cd 100644 --- a/frontend/src/pages/destructionlist/Assignees.tsx +++ b/frontend/src/pages/destructionlist/Assignees.tsx @@ -10,11 +10,13 @@ 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, @@ -22,12 +24,8 @@ export function AssigneesForm({ }: AssigneesFormProps) { const errors = useActionData() || {}; const submit = useSubmit(); - - const { loading, value: availableReviewers = [] } = useAsync(async () => { - return await listReviewers(); - }, []); - - if (loading) return Loading...; + const { availableReviewers } = + useLoaderData() as DestructionListDetailContext; const formFields: FormField[] = [ { diff --git a/frontend/src/pages/destructionlist/DestructionListDetail.tsx b/frontend/src/pages/destructionlist/DestructionListDetail.tsx index 99214a3c..e2b6c69f 100644 --- 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 = 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 index 9c4d8da8..52ac72ca 100644 --- 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 index e6388448..115f168a 100644 --- a/frontend/src/pages/landing/Landing.tsx +++ b/frontend/src/pages/landing/Landing.tsx @@ -80,7 +80,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[][];