Files
biggus-dickus/web/src/objects/object-edit-form.tsx
T

63 lines
1.9 KiB
TypeScript

import { useState } from "react";
import { useLocation, useNavigate, useParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { useObject, useUpdateObject, useSetFields } from "../api/queries";
import { ObjectForm, type ObjectCore, type ObjectFormValues } from "./object-form";
export function ObjectEditForm() {
const { t } = useTranslation();
const { id } = useParams();
const navigate = useNavigate();
const location = useLocation();
const { data: object, isLoading } = useObject(id!);
const update = useUpdateObject();
const setFields = useSetFields();
const [error, setError] = useState<string | null>(
(location.state as { fieldsError?: boolean } | null)?.fieldsError ? t("form.rejected") : null,
);
if (isLoading) return <div className="p-4" role="status" aria-label="loading" />;
if (!object) return <p className="p-4 text-sm text-neutral-500">{t("objects.notFound")}</p>;
const core: ObjectCore = {
object_number: object.object_number,
object_name: object.object_name,
number_of_objects: object.number_of_objects,
brief_description: object.brief_description ?? null,
current_location: object.current_location ?? null,
current_owner: object.current_owner ?? null,
recorder: object.recorder ?? null,
recording_date: object.recording_date ?? null,
};
const defaults = { core, fields: object.fields };
const onSubmit = async (values: ObjectFormValues) => {
setError(null);
try {
await update.mutateAsync({ id: id!, body: values.core });
await setFields.mutateAsync({ id: id!, fields: values.fields });
} catch {
setError(t("form.rejected"));
return;
}
navigate(`/objects/${id}`);
};
return (
<ObjectForm
mode="edit"
defaults={defaults}
formError={error}
onSubmit={onSubmit}
onCancel={() => navigate(`/objects/${id}`)}
/>
);
}