From 4402e6f04170cbb0613d35fe94471162253e91b2 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Fri, 19 Apr 2024 20:01:51 +0100
Subject: feature: Download images and screenshots

---
 .../dashboard/preview/BookmarkPreview.tsx          | 14 ++--
 .../dashboard/preview/LinkContentSection.tsx       | 77 ++++++++++++++++++++++
 .../dashboard/preview/TextContentSection.tsx       | 40 +++--------
 3 files changed, 95 insertions(+), 36 deletions(-)
 create mode 100644 apps/web/components/dashboard/preview/LinkContentSection.tsx

(limited to 'apps/web/components/dashboard/preview')

diff --git a/apps/web/components/dashboard/preview/BookmarkPreview.tsx b/apps/web/components/dashboard/preview/BookmarkPreview.tsx
index 29e8e39a..581ec4bd 100644
--- a/apps/web/components/dashboard/preview/BookmarkPreview.tsx
+++ b/apps/web/components/dashboard/preview/BookmarkPreview.tsx
@@ -11,20 +11,21 @@ import {
   TooltipPortal,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import {
-  isBookmarkStillCrawling,
-  isBookmarkStillLoading,
-} from "@/lib/bookmarkUtils";
 import { api } from "@/lib/trpc";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import { CalendarDays, ExternalLink } from "lucide-react";
 
 import type { ZBookmark } from "@hoarder/shared/types/bookmarks";
+import {
+  isBookmarkStillCrawling,
+  isBookmarkStillLoading,
+} from "@hoarder/shared-react/utils/bookmarkUtils";
 
 import ActionBar from "./ActionBar";
 import { AssetContentSection } from "./AssetContentSection";
 import { EditableTitle } from "./EditableTitle";
+import LinkContentSection from "./LinkContentSection";
 import { NoteEditor } from "./NoteEditor";
 import { TextContentSection } from "./TextContentSection";
 
@@ -90,7 +91,10 @@ export default function BookmarkPreview({
 
   let content;
   switch (bookmark.content.type) {
-    case "link":
+    case "link": {
+      content = <LinkContentSection bookmark={bookmark} />;
+      break;
+    }
     case "text": {
       content = <TextContentSection bookmark={bookmark} />;
       break;
diff --git a/apps/web/components/dashboard/preview/LinkContentSection.tsx b/apps/web/components/dashboard/preview/LinkContentSection.tsx
new file mode 100644
index 00000000..ff08c661
--- /dev/null
+++ b/apps/web/components/dashboard/preview/LinkContentSection.tsx
@@ -0,0 +1,77 @@
+import { useState } from "react";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { ScrollArea } from "@radix-ui/react-scroll-area";
+
+import { ZBookmark, ZBookmarkedLink } from "@hoarder/shared/types/bookmarks";
+
+function ScreenshotSection({ link }: { link: ZBookmarkedLink }) {
+  // eslint-disable-next-line @next/next/no-img-element
+  return <img alt="screenshot" src={`/api/assets/${link.screenshotAssetId}`} />;
+}
+
+function CachedContentSection({ link }: { link: ZBookmarkedLink }) {
+  let content;
+  if (!link.htmlContent) {
+    content = (
+      <div className="text-destructive">Failed to fetch link content ...</div>
+    );
+  } else {
+    content = (
+      <div
+        dangerouslySetInnerHTML={{
+          __html: link.htmlContent || "",
+        }}
+        className="prose mx-auto dark:prose-invert"
+      />
+    );
+  }
+  return content;
+}
+
+export default function LinkContentSection({
+  bookmark,
+}: {
+  bookmark: ZBookmark;
+}) {
+  const [section, setSection] = useState<string>("cached");
+
+  if (bookmark.content.type != "link") {
+    throw new Error("Invalid content type");
+  }
+
+  let content;
+  if (section === "cached") {
+    content = <CachedContentSection link={bookmark.content} />;
+  } else {
+    content = <ScreenshotSection link={bookmark.content} />;
+  }
+
+  return (
+    <div className="flex flex-col items-center gap-2">
+      <Select onValueChange={setSection} value={section}>
+        <SelectTrigger className="w-fit">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectItem value="cached">Cached Content</SelectItem>
+            <SelectItem
+              value="screenshot"
+              disabled={!bookmark.content.screenshotAssetId}
+            >
+              Screenshot
+            </SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <ScrollArea className="h-full">{content}</ScrollArea>
+    </div>
+  );
+}
diff --git a/apps/web/components/dashboard/preview/TextContentSection.tsx b/apps/web/components/dashboard/preview/TextContentSection.tsx
index a73ad722..eba7d28b 100644
--- a/apps/web/components/dashboard/preview/TextContentSection.tsx
+++ b/apps/web/components/dashboard/preview/TextContentSection.tsx
@@ -4,36 +4,14 @@ import Markdown from "react-markdown";
 import type { ZBookmark } from "@hoarder/shared/types/bookmarks";
 
 export function TextContentSection({ bookmark }: { bookmark: ZBookmark }) {
-  let content;
-  switch (bookmark.content.type) {
-    case "link": {
-      if (!bookmark.content.htmlContent) {
-        content = (
-          <div className="text-destructive">
-            Failed to fetch link content ...
-          </div>
-        );
-      } else {
-        content = (
-          <div
-            dangerouslySetInnerHTML={{
-              __html: bookmark.content.htmlContent || "",
-            }}
-            className="prose mx-auto dark:prose-invert"
-          />
-        );
-      }
-      break;
-    }
-    case "text": {
-      content = (
-        <Markdown className="prose mx-auto dark:prose-invert">
-          {bookmark.content.text}
-        </Markdown>
-      );
-      break;
-    }
+  if (bookmark.content.type != "text") {
+    throw new Error("Invalid content type");
   }
-
-  return <ScrollArea className="h-full">{content}</ScrollArea>;
+  return (
+    <ScrollArea className="h-full">
+      <Markdown className="prose mx-auto dark:prose-invert">
+        {bookmark.content.text}
+      </Markdown>
+    </ScrollArea>
+  );
 }
-- 
cgit v1.2.3-70-g09d2