Bookmark in frontend complete 🔖

frontend/src/hooks/useBookmark.js

@@ -17,7 +17,7 @@ function useBookmark() {
         },
       })
     
-      const handleBookmark = (pollId) => {
+      const handleBookmark = async (pollId) => {
         BookmarkMutation.mutate(pollId);
       }
 

frontend/src/pages/Bookmark.jsx

@@ -1,28 +1,53 @@
 // BookmarkPage.js
 import React from "react";
-
-const dummyBookmarks = [
-  {
-    id: 1,
-    title: "Favorite Programming Language?",
-    description: "Vote for your favorite programming language among the listed options.",
-  },
-  {
-    id: 2,
-    title: "Best Framework for Web Development?",
-    description: "Share your thoughts on the best framework for web development.",
-  },
-  {
-    id: 3,
-    title: "Favorite Food?",
-    description: "What's your favorite food? Vote and see the results.",
-  },
-];
+import { getUserBookmarks } from "../services/getUserBookmarks";
+import { useQuery, useQueryClient } from "react-query";
+import ErrorFallback from "../components/Errors/ErrorFallback";
+import useBookmark from "../hooks/useBookmark";
+import { useNavigate } from "react-router-dom";
 
 function Bookmark() {
+  const { handleBookmark } = useBookmark();
+  const navigator = useNavigate();
+
+  const queryClient = useQueryClient();
+
+  const { data, isLoading, isError, refetch, isSuccess } = useQuery(
+    ["bookmarks"],
+    getUserBookmarks,
+    {
+      cacheTime: 1000 * 60 * 5, // 5 minutes
+      staleTime: 1000 * 60 * 10, // 10 minutes
+    }
+  );
+
+  const handleViewPollClick = (pollId) => {
+    navigator(`/view/${pollId}`);
+  };
+
+
+  const handleRemoveBookmark = async (bookmarkId) => {
+    queryClient.setQueryData(["bookmarks"], (oldData) => {
+      return {
+        ...oldData,
+        data: oldData.data.filter((bookmark) => bookmark._id !== bookmarkId),
+      };
+    });
+    await handleBookmark(bookmarkId);
+  };
+  
   return (
     <div className="p-6 bg-base-200 h-screen">
-      <h1 className="md:text-4xl text-xl font-bold text-white mb-6">Bookmarked Polls</h1>
+      <h1 className="md:text-4xl text-xl font-bold text-white mb-6">
+        Bookmarked Polls
+      </h1>
+      {isError && (
+        <div className="h-60 w-full">
+          <ErrorFallback onRetry={refetch} />
+        </div>
+      )}
+      {isLoading && <div className="skeleton h-40 w-full"></div>}
+      {isSuccess && (
         <div className="overflow-x-auto">
           <table className="table w-full bg-base-100">
             <thead>
@@ -34,23 +59,35 @@ function Bookmark() {
               </tr>
             </thead>
             <tbody>
-            {dummyBookmarks.map((bookmark, index) => (
-              <tr key={bookmark.id}>
+              {data?.data?.map((bookmark, index) => (
+                <tr key={bookmark._id}>
                   <th>{index + 1}</th>
-                <td className="text-white text-sm md:text-base">{bookmark.title}</td>
+                  <td className="text-white text-sm md:text-base">
+                    {bookmark.title}
+                  </td>
                   <td className="text-gray-400 whitespace-normal break-words max-w-xs text-xs md:text-base">
                     {bookmark.description}
                   </td>
                   <td>
-                  <button className="btn btn-primary text-sm md:text-base">
+                    <button
+                      onClick={() => handleViewPollClick(bookmark._id)}
+                      className="btn btn-sm btn-primary text-sm md:text-base mb-2 md:mb-1"
+                    >
                       View Poll
                     </button>
+                    <button
+                      onClick={() => handleRemoveBookmark(bookmark._id)}
+                      className="btn btn-sm btn-error text-sm md:text-base ml-2"
+                    >
+                      Remove
+                    </button>
                   </td>
                 </tr>
               ))}
             </tbody>
           </table>
         </div>
+      )}
     </div>
   );
 }

frontend/src/services/getUserBookmarks.js

@@ -0,0 +1,6 @@
+import axiosInstance from "../helper/axiosInstance";
+
+export async function getUserBookmarks() {
+    const response = await axiosInstance.get("/poll/bookmarks");
+    return response.data;
+}