From 0584ad2bd8f486a0aaff7d8c96007d05c88a9a5e Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Sat, 24 Aug 2024 18:13:02 +0300
Subject: fix(mobile): Allow expanding the text by clicking on bookmark card

---
 apps/mobile/app/dashboard/bookmarks/[slug].tsx     | 82 ++++++++++++++++++++++
 .../components/bookmarks/BookmarkAssetImage.tsx    | 23 ++++++
 apps/mobile/components/bookmarks/BookmarkCard.tsx  | 71 +++++++++----------
 .../components/bookmarks/BookmarkTextMarkdown.tsx  | 21 ++++++
 4 files changed, 160 insertions(+), 37 deletions(-)
 create mode 100644 apps/mobile/app/dashboard/bookmarks/[slug].tsx
 create mode 100644 apps/mobile/components/bookmarks/BookmarkAssetImage.tsx
 create mode 100644 apps/mobile/components/bookmarks/BookmarkTextMarkdown.tsx

(limited to 'apps')

diff --git a/apps/mobile/app/dashboard/bookmarks/[slug].tsx b/apps/mobile/app/dashboard/bookmarks/[slug].tsx
new file mode 100644
index 00000000..c7b0cead
--- /dev/null
+++ b/apps/mobile/app/dashboard/bookmarks/[slug].tsx
@@ -0,0 +1,82 @@
+import { View } from "react-native";
+import { Stack, useLocalSearchParams } from "expo-router";
+import BookmarkAssetImage from "@/components/bookmarks/BookmarkAssetImage";
+import BookmarkTextMarkdown from "@/components/bookmarks/BookmarkTextMarkdown";
+import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
+import FullPageSpinner from "@/components/ui/FullPageSpinner";
+import PageTitle from "@/components/ui/PageTitle";
+import { api } from "@/lib/trpc";
+
+import { BookmarkTypes, ZBookmark } from "@hoarder/shared/types/bookmarks";
+
+function BookmarkTextView({ bookmark }: { bookmark: ZBookmark }) {
+  if (bookmark.content.type !== BookmarkTypes.TEXT) {
+    throw new Error("Wrong content type rendered");
+  }
+  const content = bookmark.content.text;
+
+  return (
+    <View className="flex gap-2">
+      <BookmarkTextMarkdown text={content} />
+    </View>
+  );
+}
+
+function BookmarkAssetView({ bookmark }: { bookmark: ZBookmark }) {
+  if (bookmark.content.type !== BookmarkTypes.ASSET) {
+    throw new Error("Wrong content type rendered");
+  }
+  return (
+    <View className="flex gap-2">
+      <BookmarkAssetImage
+        assetId={bookmark.content.assetId}
+        className="h-56 min-h-56 w-full object-cover"
+      />
+    </View>
+  );
+}
+
+export default function BookmarkView() {
+  const { slug } = useLocalSearchParams();
+  if (typeof slug !== "string") {
+    throw new Error("Unexpected param type");
+  }
+
+  const { data: bookmark } = api.bookmarks.getBookmark.useQuery({
+    bookmarkId: slug,
+  });
+
+  let comp;
+  let title = null;
+  if (bookmark) {
+    switch (bookmark.content.type) {
+      case BookmarkTypes.LINK:
+        comp = null;
+        break;
+      case BookmarkTypes.TEXT:
+        title = bookmark.title;
+        comp = <BookmarkTextView bookmark={bookmark} />;
+        break;
+      case BookmarkTypes.ASSET:
+        title = bookmark.title ?? bookmark.content.fileName;
+        comp = <BookmarkAssetView bookmark={bookmark} />;
+        break;
+    }
+  } else {
+    comp = <FullPageSpinner />;
+  }
+
+  return (
+    <CustomSafeAreaView>
+      <Stack.Screen
+        options={{
+          headerTitle: "",
+          headerBackTitle: "Back",
+          headerTransparent: true,
+        }}
+      />
+      <PageTitle title={title ?? "Untitled"} />
+      <View className="px-4 py-2">{comp}</View>
+    </CustomSafeAreaView>
+  );
+}
diff --git a/apps/mobile/components/bookmarks/BookmarkAssetImage.tsx b/apps/mobile/components/bookmarks/BookmarkAssetImage.tsx
new file mode 100644
index 00000000..95f963f4
--- /dev/null
+++ b/apps/mobile/components/bookmarks/BookmarkAssetImage.tsx
@@ -0,0 +1,23 @@
+import { Image } from "react-native";
+import useAppSettings from "@/lib/settings";
+
+export default function BookmarkAssetImage({
+  assetId,
+  className,
+}: {
+  assetId: string;
+  className: string;
+}) {
+  const { settings } = useAppSettings();
+  return (
+    <Image
+      source={{
+        uri: `${settings.address}/api/assets/${assetId}`,
+        headers: {
+          Authorization: `Bearer ${settings.apiKey}`,
+        },
+      }}
+      className={className}
+    />
+  );
+}
diff --git a/apps/mobile/components/bookmarks/BookmarkCard.tsx b/apps/mobile/components/bookmarks/BookmarkCard.tsx
index 3be1f9a0..860e5486 100644
--- a/apps/mobile/components/bookmarks/BookmarkCard.tsx
+++ b/apps/mobile/components/bookmarks/BookmarkCard.tsx
@@ -8,9 +8,8 @@ import {
   Text,
   View,
 } from "react-native";
-import Markdown from "react-native-markdown-display";
 import * as Haptics from "expo-haptics";
-import { Link } from "expo-router";
+import { Link, router } from "expo-router";
 import * as WebBrowser from "expo-web-browser";
 import useAppSettings from "@/lib/settings";
 import { api } from "@/lib/trpc";
@@ -30,10 +29,11 @@ import {
 } from "@hoarder/shared-react/utils/bookmarkUtils";
 import { BookmarkTypes } from "@hoarder/shared/types/bookmarks";
 
-import { TailwindResolver } from "../TailwindResolver";
 import { Divider } from "../ui/Divider";
 import { Skeleton } from "../ui/Skeleton";
 import { useToast } from "../ui/Toast";
+import BookmarkAssetImage from "./BookmarkAssetImage";
+import BookmarkTextMarkdown from "./BookmarkTextMarkdown";
 import ListPickerModal from "./ListPickerModal";
 
 function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
@@ -250,26 +250,21 @@ function TextCard({ bookmark }: { bookmark: ZBookmark }) {
   const content = bookmark.content.text;
   return (
     <View className="flex max-h-96 gap-2 p-2">
-      {bookmark.title && (
-        <Text className="line-clamp-2 text-xl font-bold text-foreground">
-          {bookmark.title}
-        </Text>
-      )}
+      <Pressable
+        onPress={() => router.push(`/dashboard/bookmarks/${bookmark.id}`)}
+      >
+        {bookmark.title && (
+          <Text className="line-clamp-2 text-xl font-bold text-foreground">
+            {bookmark.title}
+          </Text>
+        )}
+      </Pressable>
       <View className="max-h-56 overflow-hidden p-2 text-foreground">
-        <TailwindResolver
-          className="text-foreground"
-          comp={(styles) => (
-            <Markdown
-              style={{
-                text: {
-                  color: styles?.color?.toString(),
-                },
-              }}
-            >
-              {content}
-            </Markdown>
-          )}
-        />
+        <Pressable
+          onPress={() => router.push(`/dashboard/bookmarks/${bookmark.id}`)}
+        >
+          <BookmarkTextMarkdown text={content} />
+        </Pressable>
       </View>
       <TagList bookmark={bookmark} />
       <Divider orientation="vertical" className="mt-2 h-0.5 w-full" />
@@ -282,7 +277,6 @@ function TextCard({ bookmark }: { bookmark: ZBookmark }) {
 }
 
 function AssetCard({ bookmark }: { bookmark: ZBookmark }) {
-  const { settings } = useAppSettings();
   if (bookmark.content.type !== BookmarkTypes.ASSET) {
     throw new Error("Wrong content type rendered");
   }
@@ -290,21 +284,24 @@ function AssetCard({ bookmark }: { bookmark: ZBookmark }) {
 
   return (
     <View className="flex gap-2">
-      <Image
-        source={{
-          uri: `${settings.address}/api/assets/${bookmark.content.assetId}`,
-          headers: {
-            Authorization: `Bearer ${settings.apiKey}`,
-          },
-        }}
-        className="h-56 min-h-56 w-full object-cover"
-      />
+      <Pressable
+        onPress={() => router.push(`/dashboard/bookmarks/${bookmark.id}`)}
+      >
+        <BookmarkAssetImage
+          assetId={bookmark.content.assetId}
+          className="h-56 min-h-56 w-full object-cover"
+        />
+      </Pressable>
       <View className="flex gap-2 p-2">
-        {title && (
-          <Text className="line-clamp-2 text-xl font-bold text-foreground">
-            {title}
-          </Text>
-        )}
+        <Pressable
+          onPress={() => router.push(`/dashboard/bookmarks/${bookmark.id}`)}
+        >
+          {title && (
+            <Text className="line-clamp-2 text-xl font-bold text-foreground">
+              {title}
+            </Text>
+          )}
+        </Pressable>
         <TagList bookmark={bookmark} />
         <Divider orientation="vertical" className="mt-2 h-0.5 w-full" />
         <View className="mt-2 flex flex-row justify-between px-2 pb-2">
diff --git a/apps/mobile/components/bookmarks/BookmarkTextMarkdown.tsx b/apps/mobile/components/bookmarks/BookmarkTextMarkdown.tsx
new file mode 100644
index 00000000..80ea007c
--- /dev/null
+++ b/apps/mobile/components/bookmarks/BookmarkTextMarkdown.tsx
@@ -0,0 +1,21 @@
+import Markdown from "react-native-markdown-display";
+import { TailwindResolver } from "@/components/TailwindResolver";
+
+export default function BookmarkTextMarkdown({ text }: { text: string }) {
+  return (
+    <TailwindResolver
+      className="text-foreground"
+      comp={(styles) => (
+        <Markdown
+          style={{
+            text: {
+              color: styles?.color?.toString(),
+            },
+          }}
+        >
+          {text}
+        </Markdown>
+      )}
+    />
+  );
+}
-- 
cgit v1.2.3-70-g09d2