| | | 1 | | import { redirect } from "react-router"; |
| | | 2 | | import type { Route } from "./+types/locations.rooms.items.edit"; |
| | | 3 | | import { deleteItem, getLocation, getRoom, getItem, updateItem } from "~/api/client"; |
| | | 4 | | import { Breadcrumb } from "~/components/breadcrumb"; |
| | | 5 | | import { ItemForm } from "~/components/items"; |
| | | 6 | | import { tryApi } from "~/lib/action-helpers.server"; |
| | | 7 | | import { useToastFromActionData } from "~/lib/toasts"; |
| | | 8 | | import { pushFlash } from "~/lib/toasts.server"; |
| | | 9 | | |
| | 0 | 10 | | export async function loader({ params, request }: Route.LoaderArgs) { |
| | 0 | 11 | | const locationId = Number(params.id); |
| | 0 | 12 | | const roomId = Number(params.roomId); |
| | 0 | 13 | | const itemId = Number(params.itemId); |
| | 0 | 14 | | if ( |
| | | 15 | | Number.isNaN(locationId) || |
| | | 16 | | Number.isNaN(roomId) || |
| | | 17 | | Number.isNaN(itemId) |
| | | 18 | | ) { |
| | 0 | 19 | | throw new Response("Not found", { status: 404 }); |
| | | 20 | | } |
| | 0 | 21 | | const [location, room, item] = await Promise.all([ |
| | | 22 | | getLocation(locationId, request), |
| | | 23 | | getRoom(roomId, request), |
| | | 24 | | getItem(itemId, request), |
| | | 25 | | ]); |
| | 0 | 26 | | if ( |
| | | 27 | | !location || |
| | | 28 | | !room || |
| | | 29 | | !item || |
| | | 30 | | room.locationId !== locationId || |
| | | 31 | | item.roomId !== roomId |
| | | 32 | | ) { |
| | 0 | 33 | | throw new Response("Not found", { status: 404 }); |
| | | 34 | | } |
| | 0 | 35 | | return { location, room, item } as const; |
| | | 36 | | } |
| | | 37 | | |
| | 0 | 38 | | export async function action({ request, params }: Route.ActionArgs) { |
| | 0 | 39 | | const itemId = Number(params.itemId); |
| | 0 | 40 | | const roomId = Number(params.roomId); |
| | 0 | 41 | | const locationId = Number(params.id); |
| | 0 | 42 | | if (Number.isNaN(itemId) || Number.isNaN(roomId) || Number.isNaN(locationId)) { |
| | 0 | 43 | | throw new Response("Not found", { status: 404 }); |
| | | 44 | | } |
| | 0 | 45 | | const formData = await request.formData(); |
| | 0 | 46 | | if (formData.get("_action") === "delete") { |
| | 0 | 47 | | const del = await tryApi(() => deleteItem(itemId, request)); |
| | 0 | 48 | | if (!del.ok) return del; |
| | 0 | 49 | | await pushFlash(request, { kind: "success", message: "Item deleted" }); |
| | 0 | 50 | | return redirect(`/locations/${locationId}/rooms/${roomId}/items`); |
| | | 51 | | } |
| | 0 | 52 | | const name = formData.get("name"); |
| | 0 | 53 | | const description = formData.get("description"); |
| | 0 | 54 | | const category = formData.get("category"); |
| | 0 | 55 | | const notes = formData.get("notes"); |
| | 0 | 56 | | if (typeof name !== "string" || !name.trim()) { |
| | 0 | 57 | | return { ok: false as const, error: "Name is required" }; |
| | | 58 | | } |
| | 0 | 59 | | const result = await tryApi(() => |
| | | 60 | | updateItem( |
| | | 61 | | itemId, |
| | | 62 | | { |
| | | 63 | | roomId, |
| | | 64 | | name: name.trim(), |
| | | 65 | | description: |
| | | 66 | | typeof description === "string" && description.trim() |
| | | 67 | | ? description.trim() |
| | | 68 | | : undefined, |
| | | 69 | | category: |
| | | 70 | | typeof category === "string" && category.trim() |
| | | 71 | | ? category.trim() |
| | | 72 | | : undefined, |
| | | 73 | | notes: |
| | | 74 | | typeof notes === "string" && notes.trim() ? notes.trim() : undefined, |
| | | 75 | | }, |
| | | 76 | | request, |
| | | 77 | | ), |
| | | 78 | | ); |
| | 0 | 79 | | if (!result.ok) return result; |
| | 0 | 80 | | await pushFlash(request, { |
| | | 81 | | kind: "success", |
| | | 82 | | message: `Item "${result.data.name}" updated`, |
| | | 83 | | }); |
| | 0 | 84 | | return redirect(`/locations/${locationId}/rooms/${roomId}/items`); |
| | | 85 | | } |
| | | 86 | | |
| | 0 | 87 | | export function meta({ loaderData }: Route.MetaArgs) { |
| | 0 | 88 | | const name = loaderData?.item?.name ?? "Item"; |
| | 0 | 89 | | return [{ title: `Edit ${name} | ClutterStock` }]; |
| | | 90 | | } |
| | | 91 | | |
| | | 92 | | type LoaderData = Awaited<ReturnType<typeof loader>>; |
| | | 93 | | |
| | 0 | 94 | | export default function LocationsRoomsItemsEdit({ |
| | | 95 | | loaderData, |
| | | 96 | | actionData, |
| | | 97 | | }: Route.ComponentProps) { |
| | 0 | 98 | | useToastFromActionData(actionData); |
| | 0 | 99 | | if (!loaderData) return null; |
| | 0 | 100 | | const { location, room, item } = loaderData as LoaderData; |
| | 0 | 101 | | const locationId = location.id!; |
| | 0 | 102 | | const roomId = room.id!; |
| | | 103 | | const error = |
| | 0 | 104 | | actionData != null && |
| | | 105 | | typeof actionData === "object" && |
| | | 106 | | "error" in actionData |
| | | 107 | | ? (actionData as { error: string }).error |
| | | 108 | | : undefined; |
| | | 109 | | const fieldErrors = |
| | 0 | 110 | | actionData != null && |
| | | 111 | | typeof actionData === "object" && |
| | | 112 | | "fieldErrors" in actionData |
| | | 113 | | ? (actionData as { fieldErrors?: Record<string, string[]> }).fieldErrors |
| | | 114 | | : undefined; |
| | | 115 | | |
| | 0 | 116 | | return ( |
| | | 117 | | <> |
| | | 118 | | <Breadcrumb |
| | | 119 | | crumbs={[ |
| | | 120 | | { label: "Locations", to: "/locations" }, |
| | | 121 | | { label: location.name ?? "Location", to: `/locations/${locationId}/edit` }, |
| | | 122 | | { label: "Rooms", to: `/locations/${locationId}/rooms` }, |
| | | 123 | | { label: room.name ?? "Room", to: `/locations/${locationId}/rooms/${roomId}/edit` }, |
| | | 124 | | { label: "Items", to: `/locations/${locationId}/rooms/${roomId}/items` }, |
| | | 125 | | { label: item.name ?? "Item" }, |
| | | 126 | | ]} |
| | | 127 | | /> |
| | | 128 | | <ItemForm |
| | | 129 | | title="Edit item" |
| | | 130 | | submitLabel="Save" |
| | | 131 | | error={error} |
| | | 132 | | fieldErrors={fieldErrors} |
| | | 133 | | item={item} |
| | | 134 | | roomId={roomId} |
| | | 135 | | cancelTo={`/locations/${locationId}/rooms/${roomId}/items`} |
| | | 136 | | /> |
| | | 137 | | </> |
| | | 138 | | ); |
| | | 139 | | } |