From 03faa429f9342b4b5aa15d870b4e86ee5bf41650 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Wed, 20 Mar 2024 18:26:59 +0000
Subject: fix(web): Greatly improve the search feeling by removing the flicker

---
 apps/web/app/dashboard/archive/page.tsx            |  6 +++-
 apps/web/app/dashboard/bookmarks/page.tsx          |  8 ++++-
 apps/web/app/dashboard/favourites/page.tsx         |  5 ++-
 apps/web/app/dashboard/lists/[listId]/page.tsx     | 32 +++++++----------
 apps/web/app/dashboard/search/page.tsx             |  9 +----
 apps/web/app/dashboard/tags/[tagName]/page.tsx     | 19 ++++------
 .../components/dashboard/bookmarks/Bookmarks.tsx   | 21 +++++------
 .../dashboard/bookmarks/BookmarksGrid.tsx          | 31 +++++-----------
 .../dashboard/bookmarks/UpdatableBookmarksGrid.tsx | 41 ++++++++++++++++++++++
 9 files changed, 93 insertions(+), 79 deletions(-)
 create mode 100644 apps/web/components/dashboard/bookmarks/UpdatableBookmarksGrid.tsx

(limited to 'apps/web')

diff --git a/apps/web/app/dashboard/archive/page.tsx b/apps/web/app/dashboard/archive/page.tsx
index 69559185..bc6971db 100644
--- a/apps/web/app/dashboard/archive/page.tsx
+++ b/apps/web/app/dashboard/archive/page.tsx
@@ -3,7 +3,11 @@ import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks";
 export default async function ArchivedBookmarkPage() {
   return (
     <div className="continer mt-4">
-      <Bookmarks title="🗄️ Archive" archived={true} showDivider={true} />
+      <Bookmarks
+        header={<p className="text-2xl">🗄️ Archive</p>}
+        query={{ archived: true }}
+        showDivider={true}
+      />
     </div>
   );
 }
diff --git a/apps/web/app/dashboard/bookmarks/page.tsx b/apps/web/app/dashboard/bookmarks/page.tsx
index e310df01..02964482 100644
--- a/apps/web/app/dashboard/bookmarks/page.tsx
+++ b/apps/web/app/dashboard/bookmarks/page.tsx
@@ -1,5 +1,11 @@
 import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks";
 
 export default async function BookmarksPage() {
-  return <Bookmarks title="Bookmarks" archived={false} showEditorCard={true} />;
+  return (
+    <Bookmarks
+      header={<p className="text-2xl">Bookmarks</p>}
+      query={{ archived: false }}
+      showEditorCard={true}
+    />
+  );
 }
diff --git a/apps/web/app/dashboard/favourites/page.tsx b/apps/web/app/dashboard/favourites/page.tsx
index de17461d..310117b1 100644
--- a/apps/web/app/dashboard/favourites/page.tsx
+++ b/apps/web/app/dashboard/favourites/page.tsx
@@ -4,9 +4,8 @@ export default async function FavouritesBookmarkPage() {
   return (
     <div className="continer mt-4">
       <Bookmarks
-        title="⭐️ Favourites"
-        archived={false}
-        favourited={true}
+        header={<p className="text-2xl">⭐️ Favourites</p>}
+        query={{ favourited: true, archived: false }}
         showDivider={true}
       />
     </div>
diff --git a/apps/web/app/dashboard/lists/[listId]/page.tsx b/apps/web/app/dashboard/lists/[listId]/page.tsx
index a8ba4feb..f28d94b1 100644
--- a/apps/web/app/dashboard/lists/[listId]/page.tsx
+++ b/apps/web/app/dashboard/lists/[listId]/page.tsx
@@ -1,5 +1,5 @@
 import { notFound, redirect } from "next/navigation";
-import BookmarksGrid from "@/components/dashboard/bookmarks/BookmarksGrid";
+import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks";
 import DeleteListButton from "@/components/dashboard/lists/DeleteListButton";
 import { api } from "@/server/api/client";
 import { getServerAuthSession } from "@/server/auth";
@@ -27,24 +27,18 @@ export default async function ListPage({
     throw e;
   }
 
-  const bookmarks = await api.bookmarks.getBookmarks({
-    listId: list.id,
-    archived: false,
-  });
-
   return (
-    <div className="container flex flex-col gap-3">
-      <div className="flex justify-between">
-        <span className="pt-4 text-2xl">
-          {list.icon} {list.name}
-        </span>
-        <DeleteListButton list={list} />
-      </div>
-      <hr />
-      <BookmarksGrid
-        query={{ listId: list.id, archived: false }}
-        bookmarks={bookmarks}
-      />
-    </div>
+    <Bookmarks
+      query={{ listId: list.id, archived: false }}
+      showDivider={true}
+      header={
+        <div className="flex justify-between">
+          <span className="pt-4 text-2xl">
+            {list.icon} {list.name}
+          </span>
+          <DeleteListButton list={list} />
+        </div>
+      }
+    />
   );
 }
diff --git a/apps/web/app/dashboard/search/page.tsx b/apps/web/app/dashboard/search/page.tsx
index 76d23af2..26b984a7 100644
--- a/apps/web/app/dashboard/search/page.tsx
+++ b/apps/web/app/dashboard/search/page.tsx
@@ -17,14 +17,7 @@ function SearchComp() {
     <div className="container flex flex-col gap-3 p-4">
       <SearchInput ref={inputRef} autoFocus={true} />
       <hr />
-      {data ? (
-        <BookmarksGrid
-          query={{ ids: data.bookmarks.map((b) => b.id) }}
-          bookmarks={data}
-        />
-      ) : (
-        <Loading />
-      )}
+      {data ? <BookmarksGrid bookmarks={data.bookmarks} /> : <Loading />}
     </div>
   );
 }
diff --git a/apps/web/app/dashboard/tags/[tagName]/page.tsx b/apps/web/app/dashboard/tags/[tagName]/page.tsx
index f06062c3..326d550e 100644
--- a/apps/web/app/dashboard/tags/[tagName]/page.tsx
+++ b/apps/web/app/dashboard/tags/[tagName]/page.tsx
@@ -1,5 +1,5 @@
 import { notFound, redirect } from "next/navigation";
-import BookmarksGrid from "@/components/dashboard/bookmarks/BookmarksGrid";
+import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks";
 import { api } from "@/server/api/client";
 import { getServerAuthSession } from "@/server/auth";
 import { TRPCError } from "@trpc/server";
@@ -27,18 +27,13 @@ export default async function TagPage({
     throw e;
   }
 
-  const query = {
-    archived: false,
-    tagId: tag.id,
-  };
-
-  const bookmarks = await api.bookmarks.getBookmarks(query);
-
   return (
-    <div className="container flex flex-col gap-3">
-      <span className="pt-4 text-2xl">{tagName}</span>
-      <hr />
-      <BookmarksGrid query={query} bookmarks={bookmarks} />
+    <div className="continer mt-4">
+      <Bookmarks
+        header={<p className="text-2xl">{tagName}</p>}
+        query={{ archived: false, tagId: tag.id }}
+        showEditorCard={true}
+      />
     </div>
   );
 }
diff --git a/apps/web/components/dashboard/bookmarks/Bookmarks.tsx b/apps/web/components/dashboard/bookmarks/Bookmarks.tsx
index 96e5c067..cee620c9 100644
--- a/apps/web/components/dashboard/bookmarks/Bookmarks.tsx
+++ b/apps/web/components/dashboard/bookmarks/Bookmarks.tsx
@@ -4,16 +4,16 @@ import { getServerAuthSession } from "@/server/auth";
 
 import type { ZGetBookmarksRequest } from "@hoarder/trpc/types/bookmarks";
 
-import BookmarksGrid from "./BookmarksGrid";
+import UpdatableBookmarksGrid from "./UpdatableBookmarksGrid";
 
 export default async function Bookmarks({
-  favourited,
-  archived,
-  title,
+  query,
+  header,
   showDivider,
   showEditorCard = false,
-}: ZGetBookmarksRequest & {
-  title: string;
+}: {
+  query: ZGetBookmarksRequest;
+  header: React.ReactNode;
   showDivider?: boolean;
   showEditorCard?: boolean;
 }) {
@@ -22,18 +22,13 @@ export default async function Bookmarks({
     redirect("/");
   }
 
-  const query = {
-    favourited,
-    archived,
-  };
-
   const bookmarks = await api.bookmarks.getBookmarks(query);
 
   return (
     <div className="container flex flex-col gap-3">
-      <div className="text-2xl">{title}</div>
+      {header}
       {showDivider && <hr />}
-      <BookmarksGrid
+      <UpdatableBookmarksGrid
         query={query}
         bookmarks={bookmarks}
         showEditorCard={showEditorCard}
diff --git a/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx b/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx
index 03c60a66..39638553 100644
--- a/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx
+++ b/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx
@@ -2,17 +2,12 @@
 
 import { useMemo } from "react";
 import { ActionButton } from "@/components/ui/action-button";
-import { api } from "@/lib/trpc";
 import tailwindConfig from "@/tailwind.config";
 import { Slot } from "@radix-ui/react-slot";
 import Masonry from "react-masonry-css";
 import resolveConfig from "tailwindcss/resolveConfig";
 
-import type {
-  ZBookmark,
-  ZGetBookmarksRequest,
-  ZGetBookmarksResponse,
-} from "@hoarder/trpc/types/bookmarks";
+import type { ZBookmark } from "@hoarder/trpc/types/bookmarks";
 
 import AssetCard from "./AssetCard";
 import EditorCard from "./EditorCard";
@@ -56,27 +51,19 @@ function renderBookmark(bookmark: ZBookmark) {
 }
 
 export default function BookmarksGrid({
-  query,
-  bookmarks: initialBookmarks,
+  bookmarks,
+  hasNextPage = false,
+  fetchNextPage = () => ({}),
+  isFetchingNextPage = false,
   showEditorCard = false,
 }: {
-  query: ZGetBookmarksRequest;
-  bookmarks: ZGetBookmarksResponse;
+  bookmarks: ZBookmark[];
   showEditorCard?: boolean;
-  itemsPerPage?: number;
+  hasNextPage?: boolean;
+  isFetchingNextPage?: boolean;
+  fetchNextPage?: () => void;
 }) {
-  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
-    api.bookmarks.getBookmarks.useInfiniteQuery(query, {
-      initialData: () => ({
-        pages: [initialBookmarks],
-        pageParams: [query.cursor],
-      }),
-      initialCursor: null,
-      getNextPageParam: (lastPage) => lastPage.nextCursor,
-    });
-
   const breakpointConfig = useMemo(() => getBreakpointConfig(), []);
-  const bookmarks = data!.pages.flatMap((b) => b.bookmarks);
   if (bookmarks.length == 0 && !showEditorCard) {
     return <p>No bookmarks</p>;
   }
diff --git a/apps/web/components/dashboard/bookmarks/UpdatableBookmarksGrid.tsx b/apps/web/components/dashboard/bookmarks/UpdatableBookmarksGrid.tsx
new file mode 100644
index 00000000..a344320e
--- /dev/null
+++ b/apps/web/components/dashboard/bookmarks/UpdatableBookmarksGrid.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import { api } from "@/lib/trpc";
+
+import type {
+  ZGetBookmarksRequest,
+  ZGetBookmarksResponse,
+} from "@hoarder/trpc/types/bookmarks";
+
+import BookmarksGrid from "./BookmarksGrid";
+
+export default function UpdatableBookmarksGrid({
+  query,
+  bookmarks: initialBookmarks,
+  showEditorCard = false,
+}: {
+  query: ZGetBookmarksRequest;
+  bookmarks: ZGetBookmarksResponse;
+  showEditorCard?: boolean;
+  itemsPerPage?: number;
+}) {
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
+    api.bookmarks.getBookmarks.useInfiniteQuery(query, {
+      initialData: () => ({
+        pages: [initialBookmarks],
+        pageParams: [query.cursor],
+      }),
+      initialCursor: null,
+      getNextPageParam: (lastPage) => lastPage.nextCursor,
+    });
+
+  return (
+    <BookmarksGrid
+      bookmarks={data!.pages.flatMap((b) => b.bookmarks)}
+      hasNextPage={hasNextPage}
+      fetchNextPage={() => fetchNextPage()}
+      isFetchingNextPage={isFetchingNextPage}
+      showEditorCard={showEditorCard}
+    />
+  );
+}
-- 
cgit v1.2.3-70-g09d2