Start supporting edit forms for any document type.

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) => {

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;
+    };

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);

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,
+  target,
-  onCreate,
+  onSubmit,
 }: {
-  campaign: CampaignId;
+  target: FormTarget<Location>;
-  onCreate: (location: Location) => Promise<void>;
+  onSubmit: (location: Location) => Promise<void>;
 }) => {
-  const [name, setName] = useState("");
+  const [name, setName] = useState(target.document?.data.location.name ?? "");
-  const [description, setDescription] = useState("");
+  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({
+      if (target.type === "new") {
-        campaign,
+        const locationDoc: Location = await pb.collection("documents").create({
-        data: {
+          campaign: target.campaignId,
-          location: {
+          data: {
-            name,
+            location: {
-            description,
+              name,
+              description,
+            },
           },
-        },
+        });
-      });
+        setName("");
-      setName("");
+        setDescription("");
-      setDescription("");
+        await onSubmit(locationDoc);
-      await onCreate(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