feat: Implement bookmark status component with toggle functionality and integrate with backend services

Author: kingRayhan

src/backend/models/domain-models.ts

@@ -119,4 +119,5 @@ export interface Bookmark {
   resource_id: string;
   resource_type: "ARTICLE" | "COMMENT";
   user_id: string;
+  created_at: Date;
 }

src/backend/services/bookmark.action.ts

@@ -1,3 +1,5 @@
+"use server";
+
 import z from "zod";
 import { BookmarkActionInput } from "./inputs/bookmark.input";
 import { authID } from "./session.actions";
@@ -44,10 +46,91 @@ export async function toggleResourceBookmark(
         resource_id: input.resource_id,
         resource_type: input.resource_type,
         user_id: sessionUserId,
+        created_at: new Date(),
       },
     ]);
     return { bookmarked: true };
   } catch (error) {
     handleActionException(error);
   }
 }
+
+export async function myBookmarks(
+  _input: z.infer<typeof BookmarkActionInput.toggleBookmarkInput>
+) {
+  try {
+    const sessionUserId = await authID();
+    if (!sessionUserId) {
+      throw new ActionException("Unauthorized");
+    }
+    const input =
+      await BookmarkActionInput.toggleBookmarkInput.parseAsync(_input);
+
+    // -----------
+    const [existingBookmark] = await persistenceRepository.bookmark.find({
+      limit: 1,
+      where: and(
+        eq("resource_id", input.resource_id),
+        eq("resource_type", input.resource_type),
+        eq("user_id", sessionUserId)
+      ),
+    });
+
+    if (existingBookmark) {
+      // If bookmark exists, delete it
+      await persistenceRepository.bookmark.delete({
+        where: and(
+          eq("resource_id", input.resource_id),
+          eq("resource_type", input.resource_type),
+          eq("user_id", sessionUserId)
+        ),
+      });
+      return { bookmarked: false };
+    }
+
+    // If bookmark does not exist, create it
+    await persistenceRepository.bookmark.insert([
+      {
+        resource_id: input.resource_id,
+        resource_type: input.resource_type,
+        user_id: sessionUserId,
+      },
+    ]);
+    return { bookmarked: true };
+  } catch (error) {
+    handleActionException(error);
+  }
+}
+
+// <BookmarkStatus resource_type="ARTICLE" resource_id="12345">
+//   {data => {}}
+// </BookmarkStatus>
+
+export async function bookmarkStatus(
+  _input: z.infer<typeof BookmarkActionInput.bookmarkStatusInput>
+) {
+  try {
+    const sessionUserId = await authID();
+    if (!sessionUserId) {
+      throw new ActionException("Unauthorized");
+    }
+    const input =
+      await BookmarkActionInput.bookmarkStatusInput.parseAsync(_input);
+
+    // -----------
+    const [existingBookmark] = await persistenceRepository.bookmark.find({
+      limit: 1,
+      where: and(
+        eq("resource_id", input.resource_id),
+        eq("resource_type", input.resource_type),
+        eq("user_id", sessionUserId)
+      ),
+      columns: ["id"],
+    });
+
+    // If bookmark exists, return true
+    return { bookmarked: Boolean(existingBookmark) };
+  } catch (error) {
+    handleActionException(error);
+  }
+}

src/backend/services/inputs/bookmark.input.ts

@@ -5,4 +5,11 @@ export const BookmarkActionInput = {
     resource_id: z.string(),
     resource_type: z.enum(["ARTICLE", "COMMENT"]),
   }),
+  myBookmarks: z.object({
+    resource_type: z.enum(["ARTICLE", "COMMENT"]).optional(),
+  }),
+  bookmarkStatusInput: z.object({
+    resource_id: z.string(),
+    resource_type: z.enum(["ARTICLE", "COMMENT"]),
+  }),
 };

src/components/ArticleCard.tsx

@@ -7,6 +7,8 @@ import Link from "next/link";
 import { useMemo } from "react";
 import { HoverCard, HoverCardContent, HoverCardTrigger } from "./ui/hover-card";
 import UserInformationCard from "./UserInformationCard";
+import BookmarkStatus from "./BookmarkStatus";
+import clsx from "clsx";
 
 interface ArticleCardProps {
   id: string;
@@ -38,7 +40,7 @@ const ArticleCard = ({
   likes,
   comments,
 }: ArticleCardProps) => {
-  const { lang } = useTranslation();
+  const { lang, _t } = useTranslation();
 
   const articleUrl = useMemo(() => {
     return `/@${author.username}/${handle}`;
@@ -108,7 +110,8 @@ const ArticleCard = ({
           </Link>
         )}
       </div>
-      {/* <div className="mt-4 flex items-center justify-between">
+
+      <div className="mt-4 flex items-center justify-between">
         <div className="flex items-center gap-4">
           <button className="flex items-center gap-1.5 text-sm text-neutral-500 transition-all duration-300 hover:text-neutral-800 focus:outline-none">
             <svg
@@ -145,23 +148,34 @@ const ArticleCard = ({
             <span className="text-xs font-medium">{comments}</span>
           </button>
         </div>
-        <button className="text-neutral-400 hover:text-neutral-800 transition-colors duration-300">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width={24}
-            height={24}
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth={2}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            className="lucide lucide-bookmark h-4 w-4"
-          >
-            <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" />
-          </svg>
-        </button>
-      </div> */}
+
+        <BookmarkStatus
+          resource_type="ARTICLE"
+          resource_id={id}
+          render={({ bookmarked, toggle }) => (
+            <button
+              onClick={toggle}
+              className={clsx(
+                "transition-colors duration-300 flex cursor-pointer px-2 py-1 rounded-sm hover:bg-primary/20",
+                { "bg-primary/20": bookmarked }
+              )}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className={clsx("size-6 stroke-2 fill-transparent", {
+                  "!stroke-current": !bookmarked,
+                  "!fill-current": bookmarked,
+                })}
+              >
+                <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" />
+              </svg>
+            </button>
+          )}
+        />
+      </div>
     </div>
   );
 };

src/components/BookmarkStatus.tsx

@@ -0,0 +1,71 @@
+import * as bookmarkAction from "@/backend/services/bookmark.action";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import React, { useEffect, useState } from "react";
+
+interface Props {
+  resource_type: "ARTICLE" | "COMMENT";
+  resource_id: string;
+  render: ({
+    toggle,
+    bookmarked,
+  }: {
+    toggle: () => void;
+    bookmarked: boolean;
+  }) => React.ReactNode;
+}
+
+const BookmarkStatus: React.FC<Props> = ({
+  resource_id,
+  resource_type,
+  render,
+}) => {
+  const [bookmarked, setBookmarked] = useState(false);
+
+  const status = useQuery({
+    queryKey: ["bookmark-status", resource_id],
+    queryFn: () =>
+      bookmarkAction.bookmarkStatus({ resource_id, resource_type }),
+    enabled: Boolean(resource_id) && Boolean(resource_type),
+  });
+
+  const mutation = useMutation({
+    mutationFn: () =>
+      bookmarkAction.toggleResourceBookmark({ resource_id, resource_type }),
+
+    // Optimistic update before mutation
+    onMutate: async () => {
+      // Cancel any ongoing fetch to prevent race conditions
+      await status.refetch(); // optional for consistency
+      const previousBookmarked = bookmarked;
+
+      // Optimistically toggle state
+      setBookmarked((prev) => !prev);
+
+      return { previousBookmarked };
+    },
+
+    // Revert if there's an error
+    onError: (_err, _vars, context) => {
+      setBookmarked(context?.previousBookmarked ?? false);
+    },
+
+    // Ensure state is accurate after success
+    onSuccess: (data) => {
+      setBookmarked(data?.bookmarked ?? false);
+    },
+  });
+
+  const toggle = () => {
+    mutation.mutate();
+  };
+
+  useEffect(() => {
+    if (status.data) {
+      setBookmarked(status.data.bookmarked ?? false);
+    }
+  }, [status.data]);
+
+  return <>{render({ toggle, bookmarked })}</>;
+};
+
+export default BookmarkStatus;