Fixes tab loading

src/components/RelationshipList.tsx

@@ -1,15 +1,20 @@
 import { DocumentList } from "@/components/DocumentList";
 import { pb } from "@/lib/pocketbase";
 import { displayName } from "@/lib/relationships";
-import type { AnyDocument, Document, RelationshipType } from "@/lib/types";
-import { useState } from "react";
+import type {
+  AnyDocument,
+  Document,
+  Relationship,
+  RelationshipType,
+} from "@/lib/types";
+import { useQueryClient } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
 import { Loader } from "./Loader";
 import { DocumentRow } from "./documents/DocumentRow";
 import { NewRelatedDocumentForm } from "./documents/NewRelatedDocumentForm";
 
 interface RelationshipListProps {
   root: AnyDocument;
-  items: AnyDocument[];
   relationshipType: RelationshipType;
 }
 
@@ -19,12 +24,39 @@ interface RelationshipListProps {
  */
 export function RelationshipList({
   root,
-  items: initialItems,
   relationshipType,
 }: RelationshipListProps) {
-  const [items, setItems] = useState<Document[]>(initialItems);
+  const [items, setItems] = useState<Document[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    async function fetchItems() {
+      const { items } = await queryClient.fetchQuery({
+        queryKey: [root.id, "relationship", relationshipType],
+        staleTime: 5 * 60 * 1000, // 5 mintues
+        queryFn: async () => {
+          setLoading(true);
+          const relationship: Relationship = await pb
+            .collection("relationships")
+            .getFirstListItem(
+              `primary = "${root.id}" && type = "${relationshipType}"`,
+              {
+                expand: "secondary",
+              },
+            );
+
+          setLoading(false);
+
+          return { items: relationship.expand?.secondary ?? [] };
+        },
+      });
+      setItems(items);
+    }
+
+    fetchItems();
+  });
 
   // Handles creation of a new document and adds it to the relationship
   const handleCreate = async (doc: Document) => {
@@ -48,6 +80,9 @@ export function RelationshipList({
           type: relationshipType,
         });
       }
+      queryClient.invalidateQueries({
+        queryKey: [root.id, "relationship", relationshipType],
+      });
       setItems((prev) => [...prev, doc]);
     } catch (e: any) {
       setError(e?.message || "Failed to add document to relationship.");

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

@@ -2,46 +2,27 @@ import { RelationshipList } from "@/components/RelationshipList";
 import { DocumentEditForm } from "@/components/documents/DocumentEditForm";
 import { pb } from "@/lib/pocketbase";
 import { displayName } from "@/lib/relationships";
-import {
-  RelationshipType,
-  type AnyDocument,
-  type Relationship,
-} from "@/lib/types";
+import { RelationshipType, type AnyDocument } from "@/lib/types";
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
 import { createFileRoute, Link } from "@tanstack/react-router";
-import _ from "lodash";
 
 export const Route = createFileRoute(
   "/_app/_authenticated/document/$documentId",
 )({
   loader: async ({ params }) => {
     const doc = await pb.collection("documents").getOne(params.documentId);
-    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, relationships } = Route.useLoaderData() as {
+  const { document } = Route.useLoaderData() as {
     document: AnyDocument;
-    relationships: Record<RelationshipType, AnyDocument[]>;
   };
 
-  console.log("Parsed data: ", relationships);
-
   const relationshipList = [
     RelationshipType.Scenes,
     RelationshipType.Secrets,
@@ -76,7 +57,6 @@ function RouteComponent() {
                 key={relationshipType}
                 root={document}
                 relationshipType={relationshipType}
-                items={relationships[relationshipType] ?? []}
               />
             </TabPanel>
           ))}

src/routes/_app_._authenticated.document_.$documentId.print.tsx

@@ -46,7 +46,6 @@ function RouteComponent() {
   return (
     <div className="fill-w py-8 columns-2 gap-8 text-sm">
       <SessionPrintRow session={session}></SessionPrintRow>
-
       {[
         RelationshipType.Scenes,
         RelationshipType.Secrets,