From be518d51eaf57a1f0e04b7608d9a4362a516eb85 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Wed, 13 Mar 2024 02:43:57 +0000
Subject: mobile: All bookmarks homepage

---
 .../mobile/components/bookmarks/BookmarkCard.tsx   | 124 +++++++++++++++++++++
 .../mobile/components/bookmarks/BookmarkList.tsx   |  48 ++++++++
 2 files changed, 172 insertions(+)
 create mode 100644 packages/mobile/components/bookmarks/BookmarkCard.tsx
 create mode 100644 packages/mobile/components/bookmarks/BookmarkList.tsx

(limited to 'packages/mobile/components')

diff --git a/packages/mobile/components/bookmarks/BookmarkCard.tsx b/packages/mobile/components/bookmarks/BookmarkCard.tsx
new file mode 100644
index 00000000..17e675df
--- /dev/null
+++ b/packages/mobile/components/bookmarks/BookmarkCard.tsx
@@ -0,0 +1,124 @@
+import { ZBookmark } from "@hoarder/trpc/types/bookmarks";
+import { ZBookmarkTags } from "@hoarder/trpc/types/tags";
+import { Star, Archive, Trash } from "lucide-react-native";
+import { View, Text, Image, ScrollView, Pressable } from "react-native";
+
+import { api } from "@/lib/trpc";
+
+function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
+  const apiUtils = api.useUtils();
+
+  const { mutate: deleteBookmark } = api.bookmarks.deleteBookmark.useMutation({
+    onSuccess: () => {
+      apiUtils.bookmarks.getBookmarks.invalidate();
+    },
+  });
+  const { mutate: updateBookmark, variables } =
+    api.bookmarks.updateBookmark.useMutation({
+      onSuccess: () => {
+        apiUtils.bookmarks.getBookmarks.invalidate();
+        apiUtils.bookmarks.getBookmark.invalidate({ bookmarkId: bookmark.id });
+      },
+    });
+
+  return (
+    <View className="flex flex-row gap-4">
+      <Pressable
+        onPress={() =>
+          updateBookmark({
+            bookmarkId: bookmark.id,
+            favourited: !bookmark.favourited,
+          })
+        }
+      >
+        {(variables ? variables.favourited : bookmark.favourited) ? (
+          <Star fill="#ebb434" color="#ebb434" />
+        ) : (
+          <Star />
+        )}
+      </Pressable>
+      <Pressable
+        onPress={() =>
+          updateBookmark({
+            bookmarkId: bookmark.id,
+            archived: !bookmark.archived,
+          })
+        }
+      >
+        <Archive />
+      </Pressable>
+      <Pressable
+        onPress={() =>
+          deleteBookmark({
+            bookmarkId: bookmark.id,
+          })
+        }
+      >
+        <Trash />
+      </Pressable>
+    </View>
+  );
+}
+
+function TagList({ tags }: { tags: ZBookmarkTags[] }) {
+  return (
+    <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+      <View className="flex flex-row gap-2">
+        {tags.map((t) => (
+          <View className="rounded-full border border-gray-200 px-2.5 py-0.5 text-xs font-semibold">
+            <Text>{t.name}</Text>
+          </View>
+        ))}
+      </View>
+    </ScrollView>
+  );
+}
+
+function LinkCard({ bookmark }: { bookmark: ZBookmark }) {
+  if (bookmark.content.type !== "link") {
+    throw new Error("Wrong content type rendered");
+  }
+
+  const parsedUrl = new URL(bookmark.content.url);
+
+  return (
+    <View className="flex gap-2 rounded bg-white p-4">
+      <Image
+        source={{ uri: bookmark.content.imageUrl || "" }}
+        className="h-56 min-h-56 w-full"
+      />
+      <Text className="line-clamp-2 text-xl font-bold">
+        {bookmark.content.title || parsedUrl.host}
+      </Text>
+      <TagList tags={bookmark.tags} />
+      <View className="mt-2 flex flex-row justify-between">
+        <Text className="my-auto line-clamp-1">{parsedUrl.host}</Text>
+        <ActionBar bookmark={bookmark} />
+      </View>
+    </View>
+  );
+}
+
+function TextCard({ bookmark }: { bookmark: ZBookmark }) {
+  return <View />;
+}
+
+export default function BookmarkCard({
+  bookmark: initialData,
+}: {
+  bookmark: ZBookmark;
+}) {
+  const { data: bookmark } = api.bookmarks.getBookmark.useQuery(
+    {
+      bookmarkId: initialData.id,
+    },
+    { initialData },
+  );
+
+  switch (bookmark.content.type) {
+    case "link":
+      return <LinkCard bookmark={bookmark} />;
+    case "text":
+      return <TextCard bookmark={bookmark} />;
+  }
+}
diff --git a/packages/mobile/components/bookmarks/BookmarkList.tsx b/packages/mobile/components/bookmarks/BookmarkList.tsx
new file mode 100644
index 00000000..bb4b8668
--- /dev/null
+++ b/packages/mobile/components/bookmarks/BookmarkList.tsx
@@ -0,0 +1,48 @@
+import { useEffect, useState } from "react";
+import { FlatList } from "react-native";
+
+import BookmarkCard from "./BookmarkCard";
+
+import { api } from "@/lib/trpc";
+
+export default function BookmarkList({
+  favourited,
+  archived,
+}: {
+  favourited?: boolean;
+  archived?: boolean;
+}) {
+  const apiUtils = api.useUtils();
+  const [refreshing, setRefreshing] = useState(false);
+  const { data, isPending, isPlaceholderData } =
+    api.bookmarks.getBookmarks.useQuery({
+      favourited,
+      archived,
+    });
+
+  useEffect(() => {
+    setRefreshing(isPending || isPlaceholderData);
+  }, [isPending, isPlaceholderData]);
+
+  if (isPending || !data) {
+    // TODO: Add a spinner
+    return;
+  }
+
+  const onRefresh = () => {
+    apiUtils.bookmarks.getBookmarks.invalidate();
+    apiUtils.bookmarks.getBookmark.invalidate();
+  };
+
+  return (
+    <FlatList
+      contentContainerStyle={{
+        gap: 10,
+      }}
+      renderItem={(b) => <BookmarkCard key={b.item.id} bookmark={b.item} />}
+      data={data.bookmarks}
+      refreshing={refreshing}
+      onRefresh={onRefresh}
+    />
+  );
+}
-- 
cgit v1.2.3-70-g09d2