refactor: Extract the bookmark polling logic into a separate shared c…

…omponent

apps/web/components/dashboard/bookmarks/AssetCard.tsx

@@ -2,14 +2,9 @@
 
 import Image from "next/image";
 import Link from "next/link";
-import { api } from "@/lib/trpc";
 
-import type {
-  ZBookmark,
-  ZBookmarkTypeAsset,
-} from "@hoarder/shared/types/bookmarks";
+import type { ZBookmarkTypeAsset } from "@hoarder/shared/types/bookmarks";
 import { getAssetUrl } from "@hoarder/shared-react/utils/assetUtils";
-import { isBookmarkStillTagging } from "@hoarder/shared-react/utils/bookmarkUtils";
 
 import { BookmarkLayoutAdaptingCard } from "./BookmarkLayoutAdaptingCard";
 
@@ -51,37 +46,12 @@ function AssetImage({
 }
 
 export default function AssetCard({
-  bookmark: initialData,
+  bookmark: bookmarkedAsset,
   className,
 }: {
-  bookmark: ZBookmark;
+  bookmark: ZBookmarkTypeAsset;
   className?: string;
 }) {
-  const { data: bookmark } = api.bookmarks.getBookmark.useQuery(
-    {
-      bookmarkId: initialData.id,
-    },
-    {
-      initialData,
-      refetchInterval: (query) => {
-        const data = query.state.data;
-        if (!data) {
-          return false;
-        }
-        if (isBookmarkStillTagging(data)) {
-          return 1000;
-        }
-        return false;
-      },
-    },
-  );
-
-  if (bookmark.content.type != "asset") {
-    throw new Error("Unexpected bookmark type");
-  }
-
-  const bookmarkedAsset = { ...bookmark, content: bookmark.content };
-
   return (
     <BookmarkLayoutAdaptingCard
       title={bookmarkedAsset.title ?? bookmarkedAsset.content.fileName}

apps/web/components/dashboard/bookmarks/BookmarkCard.tsx

@@ -0,0 +1,59 @@
+import { api } from "@/lib/trpc";
+
+import type { ZBookmark } from "@hoarder/shared/types/bookmarks";
+import { isBookmarkStillLoading } from "@hoarder/shared-react/utils/bookmarkUtils";
+
+import AssetCard from "./AssetCard";
+import LinkCard from "./LinkCard";
+import TextCard from "./TextCard";
+
+export default function BookmarkCard({
+  bookmark: initialData,
+  className,
+}: {
+  bookmark: ZBookmark;
+  className?: string;
+}) {
+  const { data: bookmark } = api.bookmarks.getBookmark.useQuery(
+    {
+      bookmarkId: initialData.id,
+    },
+    {
+      initialData,
+      refetchInterval: (query) => {
+        const data = query.state.data;
+        if (!data) {
+          return false;
+        }
+        if (isBookmarkStillLoading(data)) {
+          return 1000;
+        }
+        return false;
+      },
+    },
+  );
+
+  switch (bookmark.content.type) {
+    case "link":
+      return (
+        <LinkCard
+          className={className}
+          bookmark={{ ...bookmark, content: bookmark.content }}
+        />
+      );
+    case "text":
+      return (
+        <TextCard
+          className={className}
+          bookmark={{ ...bookmark, content: bookmark.content }}
+        />
+      );
+    case "asset":
+      return (
+        <AssetCard
+          className={className}
+          bookmark={{ ...bookmark, content: bookmark.content }}
+        />
+      );
+  }
+}

apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx

@@ -11,12 +11,10 @@ import resolveConfig from "tailwindcss/resolveConfig";
 
 import type { ZBookmark } from "@hoarder/shared/types/bookmarks";
 
-import AssetCard from "./AssetCard";
+import BookmarkCard from "./BookmarkCard";
 import EditorCard from "./EditorCard";
-import LinkCard from "./LinkCard";
-import TextCard from "./TextCard";
 
-function BookmarkCard({ children }: { children: React.ReactNode }) {
+function StyledBookmarkCard({ children }: { children: React.ReactNode }) {
   return (
     <Slot className="mb-4 border border-border bg-card duration-300 ease-in hover:shadow-lg hover:transition-all">
       {children}
@@ -36,24 +34,6 @@ function getBreakpointConfig() {
   return breakpointColumnsObj;
 }
 
-function renderBookmark(bookmark: ZBookmark) {
-  let comp;
-  switch (bookmark.content.type) {
-    case "link":
-      comp = <LinkCard bookmark={{ ...bookmark, content: bookmark.content }} />;
-      break;
-    case "text":
-      comp = <TextCard bookmark={{ ...bookmark, content: bookmark.content }} />;
-      break;
-    case "asset":
-      comp = (
-        <AssetCard bookmark={{ ...bookmark, content: bookmark.content }} />
-      );
-      break;
-  }
-  return <BookmarkCard key={bookmark.id}>{comp}</BookmarkCard>;
-}
-
 export default function BookmarksGrid({
   bookmarks,
   hasNextPage = false,
@@ -76,11 +56,15 @@ export default function BookmarksGrid({
 
   const children = [
     showEditorCard && (
-      <BookmarkCard key={"editor"}>
+      <StyledBookmarkCard key={"editor"}>
         <EditorCard />
-      </BookmarkCard>
+      </StyledBookmarkCard>
     ),
-    ...bookmarks.map((b) => renderBookmark(b)),
+    ...bookmarks.map((b) => (
+      <StyledBookmarkCard key={b.id}>
+        <BookmarkCard bookmark={b} />
+      </StyledBookmarkCard>
+    )),
   ];
   return (
     <>

apps/web/components/dashboard/bookmarks/LinkCard.tsx

@@ -2,13 +2,11 @@
 
 import Image from "next/image";
 import Link from "next/link";
-import { api } from "@/lib/trpc";
 
 import type { ZBookmarkTypeLink } from "@hoarder/shared/types/bookmarks";
 import {
   getBookmarkLinkImageUrl,
   isBookmarkStillCrawling,
-  isBookmarkStillLoading,
 } from "@hoarder/shared-react/utils/bookmarkUtils";
 
 import { BookmarkLayoutAdaptingCard } from "./BookmarkLayoutAdaptingCard";
@@ -80,38 +78,12 @@ function LinkUrl({ bookmark }: { bookmark: ZBookmarkTypeLink }) {
 }
 
 export default function LinkCard({
-  bookmark: initialData,
+  bookmark: bookmarkLink,
   className,
 }: {
   bookmark: ZBookmarkTypeLink;
   className?: string;
 }) {
-  const { data: bookmark } = api.bookmarks.getBookmark.useQuery(
-    {
-      bookmarkId: initialData.id,
-    },
-    {
-      initialData,
-      refetchInterval: (query) => {
-        const data = query.state.data;
-        if (!data) {
-          return false;
-        }
-        // If the link is not crawled or not tagged
-        if (isBookmarkStillLoading(data)) {
-          return 1000;
-        }
-        return false;
-      },
-    },
-  );
-
-  if (bookmark.content.type !== "link") {
-    throw new Error("Invalid bookmark type");
-  }
-
-  const bookmarkLink = { ...bookmark, content: bookmark.content };
-
   return (
     <BookmarkLayoutAdaptingCard
       title={<LinkTitle bookmark={bookmarkLink} />}

apps/web/components/dashboard/bookmarks/TextCard.tsx

@@ -2,46 +2,23 @@
 
 import { useState } from "react";
 import { MarkdownComponent } from "@/components/ui/markdown-component";
-import { api } from "@/lib/trpc";
 import { bookmarkLayoutSwitch } from "@/lib/userLocalSettings/bookmarksLayout";
 import { cn } from "@/lib/utils";
 
-import type { ZBookmark } from "@hoarder/shared/types/bookmarks";
-import { isBookmarkStillTagging } from "@hoarder/shared-react/utils/bookmarkUtils";
+import type { ZBookmarkTypeText } from "@hoarder/shared/types/bookmarks";
 
 import { BookmarkedTextViewer } from "./BookmarkedTextViewer";
 import { BookmarkLayoutAdaptingCard } from "./BookmarkLayoutAdaptingCard";
 
 export default function TextCard({
-  bookmark: initialData,
+  bookmark,
   className,
 }: {
-  bookmark: ZBookmark;
+  bookmark: ZBookmarkTypeText;
   className?: string;
 }) {
-  const { data: bookmark } = api.bookmarks.getBookmark.useQuery(
-    {
-      bookmarkId: initialData.id,
-    },
-    {
-      initialData,
-      refetchInterval: (query) => {
-        const data = query.state.data;
-        if (!data) {
-          return false;
-        }
-        if (isBookmarkStillTagging(data)) {
-          return 1000;
-        }
-        return false;
-      },
-    },
-  );
   const [previewModalOpen, setPreviewModalOpen] = useState(false);
   const bookmarkedText = bookmark.content;
-  if (bookmarkedText.type != "text") {
-    throw new Error("Unexpected bookmark type");
-  }
 
   return (
     <>