| | | 1 | | import { redirect } from "react-router"; |
| | | 2 | | import type { Route } from "./+types/locations.edit"; |
| | | 3 | | import { routes } from "~/constants/routes"; |
| | | 4 | | import { deleteLocation, getLocation, updateLocation } from "~/api/client"; |
| | | 5 | | import { LocationForm } from "~/features/locations"; |
| | | 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 function loader({ params, request }: Route.LoaderArgs) { |
| | 0 | 11 | | const id = Number(params.id); |
| | 0 | 12 | | if (Number.isNaN(id)) throw new Response("Not found", { status: 404 }); |
| | 0 | 13 | | return getLocation(id, request); |
| | | 14 | | } |
| | | 15 | | |
| | 0 | 16 | | export async function action({ request, params }: Route.ActionArgs) { |
| | 0 | 17 | | const id = Number(params.id); |
| | 0 | 18 | | if (Number.isNaN(id)) throw new Response("Not found", { status: 404 }); |
| | 0 | 19 | | const formData = await request.formData(); |
| | 0 | 20 | | if (formData.get("_action") === "delete") { |
| | 0 | 21 | | const del = await tryApi(() => deleteLocation(id, request)); |
| | 0 | 22 | | if (!del.ok) return del; |
| | 0 | 23 | | await pushFlash(request, { kind: "success", message: "Location deleted" }); |
| | 0 | 24 | | return redirect(routes.locations.list()); |
| | | 25 | | } |
| | 0 | 26 | | const name = formData.get("name"); |
| | 0 | 27 | | const description = formData.get("description"); |
| | 0 | 28 | | if (typeof name !== "string" || !name.trim()) { |
| | 0 | 29 | | return { ok: false as const, error: "Name is required" }; |
| | | 30 | | } |
| | 0 | 31 | | const result = await tryApi(() => |
| | | 32 | | updateLocation( |
| | | 33 | | id, |
| | | 34 | | { |
| | | 35 | | name: name.trim(), |
| | | 36 | | description: |
| | | 37 | | typeof description === "string" && description.trim() |
| | | 38 | | ? description.trim() |
| | | 39 | | : undefined, |
| | | 40 | | }, |
| | | 41 | | request, |
| | | 42 | | ), |
| | | 43 | | ); |
| | 0 | 44 | | if (!result.ok) return result; |
| | 0 | 45 | | await pushFlash(request, { |
| | | 46 | | kind: "success", |
| | | 47 | | message: `Location "${result.data.name}" updated`, |
| | | 48 | | }); |
| | 0 | 49 | | return redirect(routes.locations.list()); |
| | | 50 | | } |
| | | 51 | | |
| | 0 | 52 | | export function meta({ loaderData }: Route.MetaArgs) { |
| | 0 | 53 | | const name = loaderData?.name ?? "Location"; |
| | 0 | 54 | | return [{ title: `Edit ${name} | ClutterStock` }]; |
| | | 55 | | } |
| | | 56 | | |
| | 0 | 57 | | export default function LocationEdit({ |
| | | 58 | | loaderData, |
| | | 59 | | actionData, |
| | | 60 | | }: Route.ComponentProps) { |
| | 0 | 61 | | useToastFromActionData(actionData); |
| | | 62 | | const error = |
| | 0 | 63 | | actionData && "error" in actionData ? actionData.error : undefined; |
| | | 64 | | const fieldErrors = |
| | 0 | 65 | | actionData && "fieldErrors" in actionData ? actionData.fieldErrors : undefined; |
| | 0 | 66 | | return ( |
| | | 67 | | <LocationForm |
| | | 68 | | title="Edit location" |
| | | 69 | | submitLabel="Save" |
| | | 70 | | error={error} |
| | | 71 | | fieldErrors={fieldErrors} |
| | | 72 | | location={loaderData} |
| | | 73 | | /> |
| | | 74 | | ); |
| | | 75 | | } |