Sets up global cache and uses it to fetch sessions

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

@@ -1,40 +1,34 @@
 import { RelationshipList } from "@/components/RelationshipList";
 import { DocumentEditForm } from "@/components/documents/DocumentEditForm";
-import { pb } from "@/lib/pocketbase";
 import { displayName, relationshipsForDocument } from "@/lib/relationships";
-import { RelationshipType, type AnyDocument } from "@/lib/types";
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
 import { createFileRoute, Link } from "@tanstack/react-router";
+import { useDocument } from "@/context/cache/CacheContext";
+import type { DocumentId } from "@/lib/types";
 
 export const Route = createFileRoute(
   "/_app/_authenticated/document/$documentId",
 )({
-  loader: async ({ params }) => {
-    const doc = await pb.collection("documents").getOne(params.documentId);
-    return {
-      document: doc,
-    };
-  },
   component: RouteComponent,
 });
 
 function RouteComponent() {
-  const { document } = Route.useLoaderData() as {
-    document: AnyDocument;
-  };
+  const { documentId } = Route.useParams();
 
-  const relationshipList = relationshipsForDocument(document);
+  const doc = useDocument(documentId as DocumentId);
+
+  const relationshipList = relationshipsForDocument(doc);
 
   return (
-    <div key={document.id} className="max-w-xl mx-auto py-2 px-4">
+    <div key={doc.id} className="max-w-xl mx-auto py-2 px-4">
       <Link
         to="/document/$documentId/print"
-        params={{ documentId: document.id }}
+        params={{ documentId: doc.id }}
         className="text-slate-400 hover:text-violet-400 text-sm underline underline-offset-2 transition-colors mb-4"
       >
         Print
       </Link>
-      <DocumentEditForm document={document} />
+      <DocumentEditForm document={doc} />
       <TabGroup>
         <TabList className="flex flex-row flex-wrap gap-1 mt-2">
           {relationshipList.map((relationshipType) => (
@@ -51,7 +45,7 @@ function RouteComponent() {
             <TabPanel key={relationshipType}>
               <RelationshipList
                 key={relationshipType}
-                root={document}
+                root={doc}
                 relationshipType={relationshipType}
               />
             </TabPanel>