Makes a generic document form

src/components/RelationshipList.tsx

@@ -1,26 +1,25 @@
 import { useEffect, useState } from "react";
 import { pb } from "@/lib/pocketbase";
-import type { Document } from "@/lib/types";
+import type { Document, RelationshipType } from "@/lib/types";
 import { DocumentList } from "@/components/DocumentList";
 import { Loader } from "./Loader";
 import { DocumentRow } from "./documents/DocumentRow";
+import { DocumentForm } from "./documents/DocumentForm";
 
-interface RelationshipListProps<T extends Document> {
+interface RelationshipListProps {
   root: Document;
-  relationshipType: string;
-  newItemForm: (onCreate: (doc: T) => Promise<void>) => React.ReactNode;
+  relationshipType: RelationshipType;
 }
 
 /**
  * RelationshipList manages a list of documents related to a root document via a relationship type.
  * It handles fetching, creation, and relationship management, and renders a DocumentList.
  */
-export function RelationshipList<T extends Document>({
+export function RelationshipList({
   root,
   relationshipType,
-  newItemForm,
-}: RelationshipListProps<T>) {
-  const [items, setItems] = useState<T[]>([]);
+}: RelationshipListProps) {
+  const [items, setItems] = useState<Document[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
@@ -40,13 +39,13 @@ export function RelationshipList<T extends Document>({
           relationships.items.length > 0
             ? relationships.items[0].secondary
             : [];
-        let docs: T[] = [];
+        let docs: Document[] = [];
         if (Array.isArray(secondaryIds) && secondaryIds.length > 0) {
           docs = (await pb.collection("documents").getFullList({
             filter: secondaryIds
               .map((id: string) => `id = "${id}"`)
               .join(" || "),
-          })) as T[];
+          })) as Document[];
         }
         if (!cancelled) setItems(docs);
       } catch (e: any) {
@@ -63,7 +62,7 @@ export function RelationshipList<T extends Document>({
   }, [root.id, relationshipType]);
 
   // Handles creation of a new document and adds it to the relationship
-  const handleCreate = async (doc: T) => {
+  const handleCreate = async (doc: Document) => {
     setLoading(true);
     setError(null);
     try {
@@ -104,12 +103,16 @@ export function RelationshipList<T extends Document>({
       items={items}
       error={error}
       renderRow={(document) => <DocumentRow document={document} />}
-      newItemForm={(onSubmit) =>
-        newItemForm(async (doc: T) => {
-          await handleCreate(doc);
-          onSubmit();
-        })
-      }
+      newItemForm={(onSubmit) => (
+        <DocumentForm
+          campaignId={root.campaign}
+          relationshipType={relationshipType}
+          onCreate={async (doc: Document) => {
+            await handleCreate(doc);
+            onSubmit();
+          }}
+        />
+      )}
     />
   );
 }