Adds scenes

src/routes/_authenticated/document.$documentId.tsx

@@ -1,19 +1,41 @@
+import _ from "lodash";
 import { createFileRoute } from "@tanstack/react-router";
 import { pb } from "@/lib/pocketbase";
-import { RelationshipType, type Session } from "@/lib/types";
+import {
+  RelationshipType,
+  type Relationship,
+  type Session,
+  type Document,
+} from "@/lib/types";
 import { RelationshipList } from "@/components/RelationshipList";
 import { SessionForm } from "@/components/documents/session/SessionForm";
 
 export const Route = createFileRoute("/_authenticated/document/$documentId")({
   loader: async ({ params }) => {
     const doc = await pb.collection("documents").getOne(params.documentId);
-    return { document: doc };
+    const relationships: Relationship[] = await pb
+      .collection("relationships")
+      .getFullList({
+        filter: `primary = "${params.documentId}"`,
+        expand: "secondary",
+      });
+    console.log("Fetched data: ", relationships);
+    return {
+      document: doc,
+      relationships: _.mapValues(
+        _.groupBy(relationships, (r) => r.type),
+        (rs: Relationship[]) => rs.flatMap((r) => r.expand?.secondary),
+      ),
+    };
   },
   component: RouteComponent,
 });
 
 function RouteComponent() {
-  const { document: session }: { document: Session } = Route.useLoaderData();
+  const { document: session, relationships } = Route.useLoaderData() as {
+    document: Session;
+    relationships: Record<RelationshipType, Document[]>;
+  };
 
   async function handleSaveSession(data: Session["data"]) {
     await pb.collection("documents").update(session.id, {
@@ -21,17 +43,23 @@ function RouteComponent() {
     });
   }
 
+  console.log("Parsed data: ", relationships);
+
   return (
     <div className="max-w-xl mx-auto py-8">
       <SessionForm session={session as Session} onSubmit={handleSaveSession} />
-      <RelationshipList
-        root={session}
-        relationshipType={RelationshipType.Secrets}
-      />
-      <RelationshipList
-        root={session}
-        relationshipType={RelationshipType.Treasures}
-      />
+      {[
+        RelationshipType.Scenes,
+        RelationshipType.Secrets,
+        RelationshipType.Treasures,
+      ].map((relationshipType) => (
+        <RelationshipList
+          key={relationshipType}
+          root={session}
+          relationshipType={relationshipType}
+          items={relationships[relationshipType] ?? []}
+        />
+      ))}
     </div>
   );
 }