Moves routes inside an _app for the header and builds a print route

2025-06-01 12:34:02 -07:00
parent 9cfdfbaf23
commit bef5e98480
21 changed files with 527 additions and 211 deletions
--- a/src/routes/_app_._authenticated.document_.$documentId.print.tsx
+++ b/src/routes/_app_._authenticated.document_.$documentId.print.tsx
@@ -0,0 +1,73 @@
+import { DocumentPrintRow } from "@/components/documents/DocumentPrintRow";
+import { SessionPrintRow } from "@/components/documents/session/SessionPrintRow";
+import { Loader } from "@/components/Loader";
+import { pb } from "@/lib/pocketbase";
+import { RelationshipType, type Relationship, type Session } from "@/lib/types";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { createFileRoute } from "@tanstack/react-router";
+import _ from "lodash";
+
+export const Route = createFileRoute(
+  "/_app_/_authenticated/document_/$documentId/print",
+)({
+  component: RouteComponent,
+  pendingComponent: Loader,
+});
+
+function RouteComponent() {
+  const params = Route.useParams();
+  const {
+    data: { session, relationships },
+  } = useSuspenseQuery({
+    queryKey: ["session", "relationships"],
+    queryFn: async () => {
+      const session = 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 {
+        session: session as Session,
+        relationships: _.mapValues(
+          _.groupBy(relationships, (r) => r.type),
+          (rs: Relationship[]) => rs.flatMap((r) => r.expand?.secondary),
+        ),
+      };
+    },
+  });
+
+  console.log("Parsed data: ", relationships);
+
+  return (
+    <div className="fill-w py-8 columns-2 gap-8">
+      <SessionPrintRow session={session}></SessionPrintRow>
+
+      {[
+        RelationshipType.Scenes,
+        RelationshipType.Secrets,
+        RelationshipType.Locations,
+        RelationshipType.Npcs,
+        RelationshipType.Monsters,
+        RelationshipType.Treasures,
+      ].map((relationshipType) => (
+        <div className="break-before-column">
+          <h3 className="text-lg font-bold text-slate-600">
+            {relationshipType.charAt(0).toUpperCase() +
+              relationshipType.slice(1)}
+          </h3>
+
+          <ul className="list-disc pl-5">
+            {(relationships[relationshipType] ?? []).map((item) => (
+              <DocumentPrintRow document={item} />
+            ))}
+          </ul>
+        </div>
+      ))}
+    </div>
+  );
+}