From 6845bd06bf624e455f9871157445832bcbcc9f94 Mon Sep 17 00:00:00 2001
From: Drew Haven <periodic@blazestar.net>
Date: Fri, 13 Jun 2025 11:14:58 -0700
Subject: [PATCH] Start supporting edit forms for any document type.

---
 src/components/RelationshipList.tsx           |  4 +-
 src/components/documents/Forms.ts             | 12 ++++
 ...entForm.tsx => NewRelatedDocumentForm.tsx} | 18 ++++--
 .../documents/location/LocationForm.tsx       | 55 ++++++++++++-------
 4 files changed, 63 insertions(+), 26 deletions(-)
 create mode 100644 src/components/documents/Forms.ts
 rename src/components/documents/{DocumentForm.tsx => NewRelatedDocumentForm.tsx} (83%)

diff --git a/src/components/RelationshipList.tsx b/src/components/RelationshipList.tsx
index e86c3e2..d168953 100644
--- a/src/components/RelationshipList.tsx
+++ b/src/components/RelationshipList.tsx
@@ -3,7 +3,7 @@ import { pb } from "@/lib/pocketbase";
 import type { Document, RelationshipType } from "@/lib/types";
 import { useState } from "react";
 import { Loader } from "./Loader";
-import { DocumentForm } from "./documents/DocumentForm";
+import { NewRelatedDocumentForm } from "./documents/NewRelatedDocumentForm";
 import { DocumentRow } from "./documents/DocumentRow";
 
 interface RelationshipListProps {
@@ -68,7 +68,7 @@ export function RelationshipList({
       error={error}
       renderRow={(document) => <DocumentRow document={document} />}
       newItemForm={(onSubmit) => (
-        <DocumentForm
+        <NewRelatedDocumentForm
           campaignId={root.campaign}
           relationshipType={relationshipType}
           onCreate={async (doc: Document) => {
diff --git a/src/components/documents/Forms.ts b/src/components/documents/Forms.ts
new file mode 100644
index 0000000..f451fd5
--- /dev/null
+++ b/src/components/documents/Forms.ts
@@ -0,0 +1,12 @@
+import type { CampaignId, Document } from "@/lib/types";
+
+export type FormTarget<T extends Document> =
+  | {
+      type: "new";
+      campaignId: CampaignId;
+      document?: undefined;
+    }
+  | {
+      type: "existing";
+      document: T;
+    };
diff --git a/src/components/documents/DocumentForm.tsx b/src/components/documents/NewRelatedDocumentForm.tsx
similarity index 83%
rename from src/components/documents/DocumentForm.tsx
rename to src/components/documents/NewRelatedDocumentForm.tsx
index d700acb..3d7d8d0 100644
--- a/src/components/documents/DocumentForm.tsx
+++ b/src/components/documents/NewRelatedDocumentForm.tsx
@@ -7,13 +7,13 @@ import { SecretForm } from "./secret/SecretForm";
 import { TreasureForm } from "./treasure/TreasureForm";
 
 function assertUnreachable(_x: never): never {
-  throw new Error("DocumentForm switch is not exhaustive");
+  throw new Error("NewRelatedDocumentForm switch is not exhaustive");
 }
 
 /**
  * Renders a form for any document type depending on the relationship.
  */
-export const DocumentForm = ({
+export const NewRelatedDocumentForm = ({
   campaignId,
   relationshipType,
   onCreate,
@@ -24,19 +24,27 @@ export const DocumentForm = ({
 }) => {
   switch (relationshipType) {
     case RelationshipType.Locations:
-      return <LocationForm campaign={campaignId} onCreate={onCreate} />;
+      return (
+        <LocationForm
+          target={{
+            type: "new",
+            campaignId,
+          }}
+          onSubmit={onCreate}
+        />
+      );
     case RelationshipType.Monsters:
       return <MonsterForm campaign={campaignId} onCreate={onCreate} />;
     case RelationshipType.Npcs:
       return <NpcForm campaign={campaignId} onCreate={onCreate} />;
     case RelationshipType.Secrets:
       return <SecretForm campaign={campaignId} onCreate={onCreate} />;
-    case RelationshipType.DiscoveredIn:
-      return "Form not supported here";
     case RelationshipType.Treasures:
       return <TreasureForm campaign={campaignId} onCreate={onCreate} />;
     case RelationshipType.Scenes:
       return <SceneForm campaign={campaignId} onCreate={onCreate} />;
+    case RelationshipType.DiscoveredIn:
+      return "Form not supported here";
   }
 
   return assertUnreachable(relationshipType);
diff --git a/src/components/documents/location/LocationForm.tsx b/src/components/documents/location/LocationForm.tsx
index 7eed94b..c6a1dc4 100644
--- a/src/components/documents/location/LocationForm.tsx
+++ b/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