Start supporting edit forms for any document type.

src/components/documents/location/LocationForm.tsx

@@ -1,19 +1,22 @@
 import { useState } from "react";
-import type { CampaignId, Location } from "@/lib/types";
+import type { Location } from "@/lib/types";
 import { pb } from "@/lib/pocketbase";
+import type { FormTarget } from "../Forms";
 
 /**
  * Renders a form to add a new location. Calls onCreate with the new location document.
  */
 export const LocationForm = ({
-  campaign,
-  onCreate,
+  target,
+  onSubmit,
 }: {
-  campaign: CampaignId;
-  onCreate: (location: Location) => Promise<void>;
+  target: FormTarget<Location>;
+  onSubmit: (location: Location) => Promise<void>;
 }) => {
-  const [name, setName] = useState("");
-  const [description, setDescription] = useState("");
+  const [name, setName] = useState(target.document?.data.location.name ?? "");
+  const [description, setDescription] = useState(
+    target.document?.data.location.description ?? "",
+  );
   const [adding, setAdding] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -23,18 +26,32 @@ export const LocationForm = ({
     setAdding(true);
     setError(null);
     try {
-      const locationDoc: Location = await pb.collection("documents").create({
-        campaign,
-        data: {
-          location: {
-            name,
-            description,
+      if (target.type === "new") {
+        const locationDoc: Location = await pb.collection("documents").create({
+          campaign: target.campaignId,
+          data: {
+            location: {
+              name,
+              description,
+            },
           },
-        },
-      });
-      setName("");
-      setDescription("");
-      await onCreate(locationDoc);
+        });
+        setName("");
+        setDescription("");
+        await onSubmit(locationDoc);
+      } else {
+        const locationDoc: Location = await pb
+          .collection("documents")
+          .update(target.document.id, {
+            data: {
+              location: {
+                name,
+                description,
+              },
+            },
+          });
+        await onSubmit(locationDoc);
+      }
     } catch (e: any) {
       setError(e?.message || "Failed to add location.");
     } finally {
@@ -47,7 +64,7 @@ export const LocationForm = ({
       className="flex items-left flex-col gap-2 mt-4"
       onSubmit={handleSubmit}
     >
-      <h3>Create new location</h3>
+      <h3>Create ne w location</h3>
       <div className="flex gap-5 w-full items-center">
         <label>Name</label>
         <input