| | | 1 | | import { Link, redirect } from "react-router"; |
| | | 2 | | import type { Route } from "./+types/locations.rooms.items.index"; |
| | | 3 | | import { deleteItem, getLocation, getRoom, getItems } from "~/api/client"; |
| | | 4 | | import { Breadcrumb } from "~/components/breadcrumb"; |
| | | 5 | | import { ItemsList } from "~/components/items"; |
| | | 6 | | |
| | 0 | 7 | | export async function loader({ params, request }: Route.LoaderArgs) { |
| | 0 | 8 | | const locationId = Number(params.id); |
| | 0 | 9 | | const roomId = Number(params.roomId); |
| | 0 | 10 | | if (Number.isNaN(locationId) || Number.isNaN(roomId)) { |
| | 0 | 11 | | throw new Response("Not found", { status: 404 }); |
| | | 12 | | } |
| | 0 | 13 | | const [location, room, allItems] = await Promise.all([ |
| | | 14 | | getLocation(locationId, request), |
| | | 15 | | getRoom(roomId, request), |
| | | 16 | | getItems(request), |
| | | 17 | | ]); |
| | 0 | 18 | | if (!location || !room || room.locationId !== locationId) { |
| | 0 | 19 | | throw new Response("Not found", { status: 404 }); |
| | | 20 | | } |
| | 0 | 21 | | const items = allItems.filter((i) => i.roomId === roomId); |
| | 0 | 22 | | return { location, room, items }; |
| | | 23 | | } |
| | | 24 | | |
| | 0 | 25 | | export async function action({ request, params }: Route.ActionArgs) { |
| | 0 | 26 | | const locationId = Number(params.id); |
| | 0 | 27 | | const roomId = Number(params.roomId); |
| | 0 | 28 | | if (Number.isNaN(locationId) || Number.isNaN(roomId)) { |
| | 0 | 29 | | throw new Response("Not found", { status: 404 }); |
| | | 30 | | } |
| | 0 | 31 | | const formData = await request.formData(); |
| | 0 | 32 | | if (formData.get("_action") !== "delete") return null; |
| | 0 | 33 | | const itemId = Number(formData.get("id")); |
| | 0 | 34 | | if (Number.isNaN(itemId)) return null; |
| | 0 | 35 | | await deleteItem(itemId, request); |
| | 0 | 36 | | return redirect(`/locations/${locationId}/rooms/${roomId}/items`); |
| | | 37 | | } |
| | | 38 | | |
| | 0 | 39 | | export function meta({ loaderData }: Route.MetaArgs) { |
| | 0 | 40 | | const roomName = loaderData?.room?.name ?? "Room"; |
| | 0 | 41 | | return [{ title: `Items · ${roomName} | ClutterStock` }]; |
| | | 42 | | } |
| | | 43 | | |
| | 0 | 44 | | export default function LocationsRoomsItemsIndex({ |
| | | 45 | | loaderData, |
| | | 46 | | }: Route.ComponentProps) { |
| | 0 | 47 | | const { location, room, items } = loaderData; |
| | 0 | 48 | | const locationId = location.id!; |
| | 0 | 49 | | const roomId = room.id!; |
| | | 50 | | |
| | 0 | 51 | | return ( |
| | | 52 | | <> |
| | | 53 | | <Breadcrumb |
| | | 54 | | crumbs={[ |
| | | 55 | | { label: "Locations", to: "/locations" }, |
| | | 56 | | { label: location.name ?? "Location", to: `/locations/${locationId}/edit` }, |
| | | 57 | | { label: "Rooms", to: `/locations/${locationId}/rooms` }, |
| | | 58 | | { label: room.name ?? "Room", to: `/locations/${locationId}/rooms/${roomId}/edit` }, |
| | | 59 | | { label: "Items" }, |
| | | 60 | | ]} |
| | | 61 | | /> |
| | | 62 | | <div className="page-header"> |
| | | 63 | | <h2 className="page-title">Items</h2> |
| | | 64 | | <Link to={`/locations/${locationId}/rooms/${roomId}/items/new`} className="btn-primary"> |
| | | 65 | | + Add item |
| | | 66 | | </Link> |
| | | 67 | | </div> |
| | | 68 | | <ItemsList |
| | | 69 | | locationId={locationId} |
| | | 70 | | roomId={roomId} |
| | | 71 | | roomName={room.name ?? "this room"} |
| | | 72 | | items={items} |
| | | 73 | | /> |
| | | 74 | | </> |
| | | 75 | | ); |
| | | 76 | | } |