refactor: Extract the bookmark polling logic into a separate shared component

1 files changed, 59 insertions, 0 deletions

diff --git a/apps/web/components/dashboard/bookmarks/BookmarkCard.tsx b/apps/web/components/dashboard/bookmarks/BookmarkCard.tsx
new file mode 100644
index 00000000..76316de7
--- /dev/null
+++ b/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 }}
+        />
+      );
+  }
+}