refactor: Prepare for pagination by dropping querying bookmarks by id

5 files changed, 13 insertions, 33 deletions

diff --git a/apps/web/app/dashboard/lists/[listId]/page.tsx b/apps/web/app/dashboard/lists/[listId]/page.tsx
index 4e35c377..b9a26053 100644
--- a/apps/web/app/dashboard/lists/[listId]/page.tsx
+++ b/apps/web/app/dashboard/lists/[listId]/page.tsx
@@ -1,6 +1,6 @@
 import { notFound, redirect } from "next/navigation";
+import BookmarksGrid from "@/components/dashboard/bookmarks/BookmarksGrid";
 import DeleteListButton from "@/components/dashboard/lists/DeleteListButton";
-import ListView from "@/components/dashboard/lists/ListView";
 import { api } from "@/server/api/client";
 import { getServerAuthSession } from "@/server/auth";
 import { TRPCError } from "@trpc/server";
@@ -27,7 +27,10 @@ export default async function ListPage({
     throw e;
   }
 
-  const bookmarks = await api.bookmarks.getBookmarks({ ids: list.bookmarks });
+  const bookmarks = await api.bookmarks.getBookmarks({
+    listId: list.id,
+    archived: false,
+  });
 
   return (
     <div className="container flex flex-col gap-3">
@@ -38,7 +41,10 @@ export default async function ListPage({
         <DeleteListButton list={list} />
       </div>
       <hr />
-      <ListView list={list} bookmarks={bookmarks.bookmarks} />
+      <BookmarksGrid
+        query={{ listId: list.id, archived: false }}
+        bookmarks={bookmarks.bookmarks}
+      />
     </div>
   );
 }
diff --git a/apps/web/app/dashboard/tags/[tagName]/page.tsx b/apps/web/app/dashboard/tags/[tagName]/page.tsx
index 0c5c1c1f..dee29c5e 100644
--- a/apps/web/app/dashboard/tags/[tagName]/page.tsx
+++ b/apps/web/app/dashboard/tags/[tagName]/page.tsx
@@ -28,8 +28,8 @@ export default async function TagPage({
   }
 
   const query = {
-    ids: tag.bookmarks,
     archived: false,
+    tagId: tag.id,
   };
 
   const bookmarks = await api.bookmarks.getBookmarks(query);
diff --git a/apps/web/components/dashboard/bookmarks/AddToListModal.tsx b/apps/web/components/dashboard/bookmarks/AddToListModal.tsx
index 6242aa27..b8cce66d 100644
--- a/apps/web/components/dashboard/bookmarks/AddToListModal.tsx
+++ b/apps/web/components/dashboard/bookmarks/AddToListModal.tsx
@@ -52,7 +52,6 @@ export default function AddToListModal({
   const { data: lists, isPending: isFetchingListsPending } =
     api.lists.list.useQuery();
 
-  const listInvalidationFunction = api.useUtils().lists.get.invalidate;
   const bookmarksInvalidationFunction =
     api.useUtils().bookmarks.getBookmarks.invalidate;
 
@@ -62,8 +61,8 @@ export default function AddToListModal({
         toast({
           description: "List has been updated!",
         });
-        listInvalidationFunction({ listId: req.listId });
-        bookmarksInvalidationFunction();
+        setOpen(false);
+        bookmarksInvalidationFunction({ listId: req.listId });
       },
       onError: (e) => {
         if (e.data?.code == "BAD_REQUEST") {
diff --git a/apps/web/components/dashboard/bookmarks/TagsEditor.tsx b/apps/web/components/dashboard/bookmarks/TagsEditor.tsx
index 8bfbce19..12c0dcd0 100644
--- a/apps/web/components/dashboard/bookmarks/TagsEditor.tsx
+++ b/apps/web/components/dashboard/bookmarks/TagsEditor.tsx
@@ -75,6 +75,7 @@ export function TagsEditor({ bookmark }: { bookmark: ZBookmark }) {
         description: "Tags has been updated!",
       });
       bookmarkInvalidationFunction({ bookmarkId: bookmark.id });
+      // TODO(bug) Invalidate the tag views as well
     },
     onError: () => {
       toast({
diff --git a/apps/web/components/dashboard/lists/ListView.tsx b/apps/web/components/dashboard/lists/ListView.tsx
deleted file mode 100644
index beeea7f1..00000000
--- a/apps/web/components/dashboard/lists/ListView.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-"use client";
-
-import BookmarksGrid from "@/components/dashboard/bookmarks/BookmarksGrid";
-import { api } from "@/lib/trpc";
-
-import type { ZBookmark } from "@hoarder/trpc/types/bookmarks";
-import type { ZBookmarkListWithBookmarks } from "@hoarder/trpc/types/lists";
-
-export default function ListView({
-  bookmarks,
-  list: initialData,
-}: {
-  list: ZBookmarkListWithBookmarks;
-  bookmarks: ZBookmark[];
-}) {
-  const { data } = api.lists.get.useQuery(
-    { listId: initialData.id },
-    {
-      initialData,
-    },
-  );
-
-  return (
-    <BookmarksGrid query={{ ids: data.bookmarks }} bookmarks={bookmarks} />
-  );
-}