WIP: Linking in document list. Working on copying relationships to new sessions

src/components/documents/BasicRow.tsx

@@ -0,0 +1,26 @@
+import type { AnyDocument } from "@/lib/types";
+import { Link } from "@tanstack/react-router";
+
+export type Props = {
+  doc: AnyDocument;
+  title: string;
+  description?: string;
+};
+
+/**
+ * Renders a simple row that links to the document
+ */
+export const BasicRow = ({ doc, title, description }: Props) => {
+  return (
+    <li>
+      <Link
+        to="/document/$documentId"
+        params={{ documentId: doc.id }}
+        className="text-lg"
+      >
+        <h4>{title}</h4>
+      </Link>
+      {description && <p>{description}</p>}
+    </li>
+  );
+};

src/components/documents/DocumentRow.tsx

@@ -12,11 +12,7 @@ import {
   type Document,
   type Session,
 } from "@/lib/types";
-import { LocationPrintRow } from "./location/LocationPrintRow";
-import { MonsterPrintRow } from "./monsters/MonsterPrintRow";
-import { NpcPrintRow } from "./npc/NpcPrintRow";
-import { ScenePrintRow } from "./scene/ScenePrintRow";
-import { SessionPrintRow } from "./session/SessionPrintRow";
+import { BasicRow } from "./BasicRow";
 import { TreasureToggleRow } from "./treasure/TreasureToggleRow";
 
 /**
@@ -31,19 +27,37 @@ export const DocumentRow = ({
   session?: Session;
 }) => {
   if (isLocation(document)) {
-    return <LocationPrintRow location={document} />;
+    return (
+      <BasicRow
+        doc={document}
+        title={document.data.location.name}
+        description={document.data.location.description}
+      />
+    );
   }
 
   if (isMonster(document)) {
-    return <MonsterPrintRow monster={document} />;
+    return <BasicRow doc={document} title={document.data.monster.name} />;
   }
 
   if (isNpc(document)) {
-    return <NpcPrintRow npc={document} />;
+    return (
+      <BasicRow
+        doc={document}
+        title={document.data.npc.name}
+        description={document.data.npc.description}
+      />
+    );
   }
 
   if (isSession(document)) {
-    return <SessionPrintRow session={document} />;
+    return (
+      <BasicRow
+        doc={document}
+        title={document.created}
+        description={document.data.session.strongStart}
+      />
+    );
   }
 
   if (isSecret(document)) {
@@ -51,7 +65,7 @@ export const DocumentRow = ({
   }
 
   if (isScene(document)) {
-    return <ScenePrintRow scene={document} />;
+    return <BasicRow doc={document} title={document.data.scene.text} />;
   }
 
   if (isTreasure(document)) {

src/components/documents/scene/SceneEditForm.tsx

@@ -1,11 +1,14 @@
 import { AutoSaveTextarea } from "@/components/AutoSaveTextarea";
 import { pb } from "@/lib/pocketbase";
 import type { Scene } from "@/lib/types";
+import { useQueryClient } from "@tanstack/react-query";
 
 /**
  * Renders an editable scene form
  */
 export const SceneEditForm = ({ scene }: { scene: Scene }) => {
+  const queryClient = useQueryClient();
+
   async function saveScene(text: string) {
     await pb.collection("documents").update(scene.id, {
       data: {
@@ -15,6 +18,9 @@ export const SceneEditForm = ({ scene }: { scene: Scene }) => {
         },
       },
     });
+    queryClient.invalidateQueries({
+      queryKey: ["relationship"],
+    });
   }
 
   return (

src/components/documents/session/SessionRow.tsx

@@ -1,3 +1,4 @@
+import { FormattedDate } from "@/components/FormattedDate";
 import type { Session } from "@/lib/types";
 import { Link } from "@tanstack/react-router";
 
@@ -9,7 +10,7 @@ export const SessionRow = ({ session }: { session: Session }) => {
         params={{ documentId: session.id }}
         className="block font-semibold text-lg text-slate-300"
       >
-        {session.created}
+        <FormattedDate date={session.created} />
       </Link>
       <div className="">{session.data.session.strongStart}</div>
     </div>