Fixes bug with updating relationships when an item is added

src/components/RelationshipList.tsx

@@ -35,19 +35,16 @@ export function RelationshipList({
     return <Loader />;
   }
 
-  const doc = docResult.value.doc;
-
-  console.info("Rendering relationship list: ", relationshipType);
-
   const relationshipResult = docResult.value.relationships[relationshipType];
 
-  if (relationshipResult?.type !== "ready") {
+  const relationship =
-    return <Loader />;
+    relationshipResult?.type === "ready" ? relationshipResult.value : null;
-  }
 
-  const relationship = relationshipResult.value;
+  const itemIds =
+    relationshipResult?.type === "ready"
+      ? relationshipResult.value.secondary
+      : [];
 
-  const itemIds = relationship.secondary ?? [];
   const items = itemIds
     .map((id) => cache.documents[id])
     .filter((d) => d && d.type === "ready")
@@ -59,7 +56,6 @@ export function RelationshipList({
     try {
       // Check for existing relationship
       if (relationship) {
-        console.debug("Adding to existing relationship", relationship.id);
         const updatedRelationship: Relationship = await pb
           .collection("relationships")
           .update(relationship.id, {
@@ -67,11 +63,10 @@ export function RelationshipList({
           });
         dispatch({
           type: "setRelationship",
-          docId: doc.id,
+          docId: root.id,
           relationship: updatedRelationship,
         });
       } else {
-        console.debug("Creating new relationship");
         const updatedRelationship: Relationship = await pb
           .collection("relationships")
           .create({
@@ -81,7 +76,7 @@ export function RelationshipList({
           });
         dispatch({
           type: "setRelationship",
-          docId: doc.id,
+          docId: root.id,
           relationship: updatedRelationship,
         });
       }
@@ -98,7 +93,6 @@ export function RelationshipList({
 
     try {
       if (relationship) {
-        console.debug("Removing from existing relationship", relationship.id);
         const updatedRelationship: Relationship = await pb
           .collection("relationships")
           .update(relationship.id, {
@@ -106,7 +100,7 @@ export function RelationshipList({
           });
         dispatch({
           type: "setRelationship",
-          docId: doc.id,
+          docId: root.id,
           relationship: updatedRelationship,
         });
       }

src/components/documents/DocumentView.tsx

@@ -1,22 +1,27 @@
-import { RelationshipList } from "@/components/RelationshipList";
 import { DocumentEditForm } from "@/components/documents/DocumentEditForm";
 import { useDocument } from "@/context/document/hooks";
 import { displayName, relationshipsForDocument } from "@/lib/relationships";
-import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
-import { Link } from "@tanstack/react-router";
-import { Loader } from "../Loader";
 import type { DocumentId } from "@/lib/types";
+import { Route as CampaignRoute } from "@/routes/_app/_authenticated/campaigns.$campaignId";
+import { Link } from "@tanstack/react-router";
+import * as _ from "lodash";
+import { Loader } from "../Loader";
+import { Route as RelationshipRoute } from "@/routes/_app/_authenticated/document.$documentId/$relationshipType";
 
 export function DocumentView({ documentId }: { documentId: DocumentId }) {
   const { docResult } = useDocument(documentId);
 
-  console.info(`Rendering document: `, docResult);
-
   if (docResult?.type !== "ready") {
     return <Loader />;
   }
 
   const doc = docResult.value.doc;
+  const relationshipCounts = _.mapValues(docResult.value.relationships, (v) => {
+    if (v.type === "ready") {
+      return v.value.secondary.length;
+    }
+    return 0;
+  });
 
   const relationshipList = relationshipsForDocument(doc);
 
@@ -24,8 +29,8 @@ export function DocumentView({ documentId }: { documentId: DocumentId }) {
     <div key={doc.id} className="max-w-xl mx-auto py-2 px-4">
       <div>
         <Link
-          to="/document/$documentId/print"
+          to={CampaignRoute.to}
-          params={{ documentId: doc.id }}
+          params={{ campaignId: doc.campaign }}
           className="text-slate-400 hover:text-violet-400 text-sm underline underline-offset-2 transition-colors mb-4"
         >
           Back to campaign
@@ -39,29 +44,25 @@ export function DocumentView({ documentId }: { documentId: DocumentId }) {
         </Link>
       </div>
       <DocumentEditForm document={doc} />
-      <TabGroup>
+      <nav>
-        <TabList className="flex flex-row flex-wrap gap-1 mt-2">
+        <ul className="flex flex-row gap-1">
           {relationshipList.map((relationshipType) => (
-            <Tab
+            <Link
               key={relationshipType}
-              className="px-3 py-2 rounded bg-slate-800 text-slate-100 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500 data-selected:bg-violet-900 data-selected:border-violet-700"
+              to={RelationshipRoute.to}
+              params={{
+                documentId,
+                relationshipType,
+              }}
             >
-              {displayName(relationshipType)}
+              <div className="px-3 py-2 rounded bg-slate-800 text-slate-100 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500 data-selected:bg-violet-900 data-selected:border-violet-700 whitespace-nowrap">
-            </Tab>
+                {displayName(relationshipType)} (
+                {relationshipCounts[relationshipType] ?? 0})
+              </div>
+            </Link>
           ))}
-        </TabList>
+        </ul>
-        <TabPanels>
+      </nav>
-          {relationshipList.map((relationshipType) => (
-            <TabPanel key={relationshipType}>
-              <RelationshipList
-                key={relationshipType}
-                root={doc}
-                relationshipType={relationshipType}
-              />
-            </TabPanel>
-          ))}
-        </TabPanels>
-      </TabGroup>
     </div>
   );
 }

src/components/documents/RelatedDocumentList.tsx

@@ -0,0 +1,29 @@
+import { useDocument, useDocumentCache } from "@/context/document/hooks";
+import type { DocumentId, RelationshipType } from "@/lib/types";
+import { RelationshipList } from "../RelationshipList";
+import { Loader } from "../Loader";
+
+export type Props = {
+  documentId: DocumentId;
+  relationshipType: RelationshipType;
+};
+
+export function RelatedDocumentList({ documentId, relationshipType }: Props) {
+  const { docResult } = useDocument(documentId);
+
+  const { cache } = useDocumentCache();
+
+  if (docResult?.type !== "ready") {
+    return <Loader />;
+  }
+
+  const doc = docResult.value.doc;
+
+  return (
+    <RelationshipList
+      key={relationshipType}
+      root={doc}
+      relationshipType={relationshipType}
+    />
+  );
+}

src/context/document/DocumentContext.tsx

@@ -19,6 +19,8 @@ export const DocumentContext = createContext<DocumentContextValue | undefined>(
 export function DocumentProvider({ children }: { children: ReactNode }) {
   const [state, dispatch] = useReducer(reducer, initialState());
 
+  console.log("State: ", state);
+
   return (
     <DocumentContext.Provider
       value={{

src/routeTree.gen.ts

@@ -20,6 +20,7 @@ import { Route as AppAuthenticatedCampaignsIndexImport } from './routes/_app/_au
 import { Route as AppAuthenticatedDocumentDocumentIdImport } from './routes/_app/_authenticated/document.$documentId'
 import { Route as AppAuthenticatedCampaignsCampaignIdImport } from './routes/_app/_authenticated/campaigns.$campaignId'
 import { Route as AppauthenticatedDocumentDocumentIdPrintImport } from './routes/_app_._authenticated.document_.$documentId.print'
+import { Route as AppAuthenticatedDocumentDocumentIdRelationshipTypeImport } from './routes/_app/_authenticated/document.$documentId/$relationshipType'
 
 // Create/Update Routes
 
@@ -79,6 +80,13 @@ const AppauthenticatedDocumentDocumentIdPrintRoute =
     getParentRoute: () => rootRoute,
   } as any)
 
+const AppAuthenticatedDocumentDocumentIdRelationshipTypeRoute =
+  AppAuthenticatedDocumentDocumentIdRelationshipTypeImport.update({
+    id: '/$relationshipType',
+    path: '/$relationshipType',
+    getParentRoute: () => AppAuthenticatedDocumentDocumentIdRoute,
+  } as any)
+
 // Populate the FileRoutesByPath interface
 
 declare module '@tanstack/react-router' {
@@ -139,6 +147,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AppAuthenticatedCampaignsIndexImport
       parentRoute: typeof AppAuthenticatedImport
     }
+    '/_app/_authenticated/document/$documentId/$relationshipType': {
+      id: '/_app/_authenticated/document/$documentId/$relationshipType'
+      path: '/$relationshipType'
+      fullPath: '/document/$documentId/$relationshipType'
+      preLoaderRoute: typeof AppAuthenticatedDocumentDocumentIdRelationshipTypeImport
+      parentRoute: typeof AppAuthenticatedDocumentDocumentIdImport
+    }
     '/_app_/_authenticated/document_/$documentId/print': {
       id: '/_app_/_authenticated/document_/$documentId/print'
       path: '/document/$documentId/print'
@@ -151,9 +166,24 @@ declare module '@tanstack/react-router' {
 
 // Create and export the route tree
 
+interface AppAuthenticatedDocumentDocumentIdRouteChildren {
+  AppAuthenticatedDocumentDocumentIdRelationshipTypeRoute: typeof AppAuthenticatedDocumentDocumentIdRelationshipTypeRoute
+}
+
+const AppAuthenticatedDocumentDocumentIdRouteChildren: AppAuthenticatedDocumentDocumentIdRouteChildren =
+  {
+    AppAuthenticatedDocumentDocumentIdRelationshipTypeRoute:
+      AppAuthenticatedDocumentDocumentIdRelationshipTypeRoute,
+  }
+
+const AppAuthenticatedDocumentDocumentIdRouteWithChildren =
+  AppAuthenticatedDocumentDocumentIdRoute._addFileChildren(
+    AppAuthenticatedDocumentDocumentIdRouteChildren,
+  )
+
 interface AppAuthenticatedRouteChildren {
   AppAuthenticatedCampaignsCampaignIdRoute: typeof AppAuthenticatedCampaignsCampaignIdRoute
-  AppAuthenticatedDocumentDocumentIdRoute: typeof AppAuthenticatedDocumentDocumentIdRoute
+  AppAuthenticatedDocumentDocumentIdRoute: typeof AppAuthenticatedDocumentDocumentIdRouteWithChildren
   AppAuthenticatedCampaignsIndexRoute: typeof AppAuthenticatedCampaignsIndexRoute
 }
 
@@ -161,7 +191,7 @@ const AppAuthenticatedRouteChildren: AppAuthenticatedRouteChildren = {
   AppAuthenticatedCampaignsCampaignIdRoute:
     AppAuthenticatedCampaignsCampaignIdRoute,
   AppAuthenticatedDocumentDocumentIdRoute:
-    AppAuthenticatedDocumentDocumentIdRoute,
+    AppAuthenticatedDocumentDocumentIdRouteWithChildren,
   AppAuthenticatedCampaignsIndexRoute: AppAuthenticatedCampaignsIndexRoute,
 }
 
@@ -190,8 +220,9 @@ export interface FileRoutesByFullPath {
   '/login': typeof AppLoginRoute
   '/': typeof AppIndexRoute
   '/campaigns/$campaignId': typeof AppAuthenticatedCampaignsCampaignIdRoute
-  '/document/$documentId': typeof AppAuthenticatedDocumentDocumentIdRoute
+  '/document/$documentId': typeof AppAuthenticatedDocumentDocumentIdRouteWithChildren
   '/campaigns': typeof AppAuthenticatedCampaignsIndexRoute
+  '/document/$documentId/$relationshipType': typeof AppAuthenticatedDocumentDocumentIdRelationshipTypeRoute
   '/document/$documentId/print': typeof AppauthenticatedDocumentDocumentIdPrintRoute
 }
 
@@ -201,8 +232,9 @@ export interface FileRoutesByTo {
   '/login': typeof AppLoginRoute
   '/': typeof AppIndexRoute
   '/campaigns/$campaignId': typeof AppAuthenticatedCampaignsCampaignIdRoute
-  '/document/$documentId': typeof AppAuthenticatedDocumentDocumentIdRoute
+  '/document/$documentId': typeof AppAuthenticatedDocumentDocumentIdRouteWithChildren
   '/campaigns': typeof AppAuthenticatedCampaignsIndexRoute
+  '/document/$documentId/$relationshipType': typeof AppAuthenticatedDocumentDocumentIdRelationshipTypeRoute
   '/document/$documentId/print': typeof AppauthenticatedDocumentDocumentIdPrintRoute
 }
 
@@ -214,8 +246,9 @@ export interface FileRoutesById {
   '/_app/login': typeof AppLoginRoute
   '/_app/': typeof AppIndexRoute
   '/_app/_authenticated/campaigns/$campaignId': typeof AppAuthenticatedCampaignsCampaignIdRoute
-  '/_app/_authenticated/document/$documentId': typeof AppAuthenticatedDocumentDocumentIdRoute
+  '/_app/_authenticated/document/$documentId': typeof AppAuthenticatedDocumentDocumentIdRouteWithChildren
   '/_app/_authenticated/campaigns/': typeof AppAuthenticatedCampaignsIndexRoute
+  '/_app/_authenticated/document/$documentId/$relationshipType': typeof AppAuthenticatedDocumentDocumentIdRelationshipTypeRoute
   '/_app_/_authenticated/document_/$documentId/print': typeof AppauthenticatedDocumentDocumentIdPrintRoute
 }
 
@@ -229,6 +262,7 @@ export interface FileRouteTypes {
     | '/campaigns/$campaignId'
     | '/document/$documentId'
     | '/campaigns'
+    | '/document/$documentId/$relationshipType'
     | '/document/$documentId/print'
   fileRoutesByTo: FileRoutesByTo
   to:
@@ -239,6 +273,7 @@ export interface FileRouteTypes {
     | '/campaigns/$campaignId'
     | '/document/$documentId'
     | '/campaigns'
+    | '/document/$documentId/$relationshipType'
     | '/document/$documentId/print'
   id:
     | '__root__'
@@ -250,6 +285,7 @@ export interface FileRouteTypes {
     | '/_app/_authenticated/campaigns/$campaignId'
     | '/_app/_authenticated/document/$documentId'
     | '/_app/_authenticated/campaigns/'
+    | '/_app/_authenticated/document/$documentId/$relationshipType'
     | '/_app_/_authenticated/document_/$documentId/print'
   fileRoutesById: FileRoutesById
 }
@@ -315,12 +351,19 @@ export const routeTree = rootRoute
     },
     "/_app/_authenticated/document/$documentId": {
       "filePath": "_app/_authenticated/document.$documentId.tsx",
-      "parent": "/_app/_authenticated"
+      "parent": "/_app/_authenticated",
+      "children": [
+        "/_app/_authenticated/document/$documentId/$relationshipType"
+      ]
     },
     "/_app/_authenticated/campaigns/": {
       "filePath": "_app/_authenticated/campaigns.index.tsx",
       "parent": "/_app/_authenticated"
     },
+    "/_app/_authenticated/document/$documentId/$relationshipType": {
+      "filePath": "_app/_authenticated/document.$documentId/$relationshipType.tsx",
+      "parent": "/_app/_authenticated/document/$documentId"
+    },
     "/_app_/_authenticated/document_/$documentId/print": {
       "filePath": "_app_._authenticated.document_.$documentId.print.tsx"
     }

src/routes/_app/_authenticated/campaigns.$campaignId.tsx

@@ -46,11 +46,6 @@ function RouteComponent() {
         sort: "-created",
       });
 
-    console.log("Previous session: ", {
-      id: prevSession.id,
-      created: prevSession.created,
-    });
-
     const newSession = await pb.collection("documents").create({
       campaign: campaign.id,
       type: "session",
@@ -67,12 +62,7 @@ function RouteComponent() {
           filter: `primary = "${prevSession.id}"`,
         });
 
-      console.log(`Found ${prevRelations.length} previous relations`);
-
       for (const relation of prevRelations) {
-        console.log(
-          `Adding ${relation.secondary.length} items to ${relation.type}`,
-        );
         await pb.collection("relationships").create({
           primary: newSession.id,
           type: relation.type,

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

@@ -1,7 +1,7 @@
 import { DocumentView } from "@/components/documents/DocumentView";
 import { DocumentLoader } from "@/context/document/DocumentLoader";
 import type { DocumentId } from "@/lib/types";
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, Outlet } from "@tanstack/react-router";
 
 export const Route = createFileRoute(
   "/_app/_authenticated/document/$documentId",
@@ -15,6 +15,7 @@ function RouteComponent() {
   return (
     <DocumentLoader documentId={documentId as DocumentId}>
       <DocumentView documentId={documentId as DocumentId} />
+      <Outlet />
     </DocumentLoader>
   );
 }

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

@@ -0,0 +1,19 @@
+import { RelatedDocumentList } from "@/components/documents/RelatedDocumentList";
+import type { DocumentId, RelationshipType } from "@/lib/types";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute(
+  "/_app/_authenticated/document/$documentId/$relationshipType",
+)({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const { documentId, relationshipType } = Route.useParams();
+  return (
+    <RelatedDocumentList
+      documentId={documentId as DocumentId}
+      relationshipType={relationshipType as RelationshipType}
+    />
+  );
+}