Check bookmark status

components/BookmarkButton.jsx

@@ -3,6 +3,7 @@ import { useState, useEffect } from 'react';
 import { FaBookmark } from 'react-icons/fa';
 import { useSession } from 'next-auth/react';
 import bookmarkProperty from '@/app/actions/bookmarkProperty';
+import checkBookmarkStatus from '@/app/actions/checkBookmarkStatus';
 import { toast } from 'react-toastify';
 
 const BookmarkButton = ({ property }) => {
@@ -18,9 +19,12 @@ const BookmarkButton = ({ property }) => {
       return;
     }
 
-    //@todo: Run action to check if property is bookmarked
-    setLoading(false);
-  }, [property._id, userId]);
+    checkBookmarkStatus(property._id).then((res) => {
+      if (res.error) toast.error(res.error);
+      if (res.isBookmarked) setIsBookmarked(res.isBookmarked);
+      setLoading(false);
+    });
+  }, [property._id, userId, checkBookmarkStatus]);
 
   const handleClick = async () => {
     if (!userId) {
@@ -28,30 +32,28 @@ const BookmarkButton = ({ property }) => {
       return;
     }
 
-    try {
-      const res = await bookmarkProperty(property._id);
-      if (res.error) {
-        toast.error(res.error);
-      } else {
-        toast.success(res.message);
-      }
-    } catch (error) {
-      console.error('Error bookmarking property:', error);
-      toast.error('Failed to bookmark property');
-    } finally {
-      setLoading(false);
-    }
+    bookmarkProperty(property._id).then((res) => {
+      if (res.error) return toast.error(res.error);
+      setIsBookmarked(res.isBookmarked);
+      toast.success(res.message);
+    });
   };
 
   if (loading) return <p className='text-center'>Loading...</p>;
 
-  return (
+  return isBookmarked ? (
+    <button
+      onClick={handleClick}
+      className='bg-red-500 hover:bg-red-600 text-white font-bold w-full py-2 px-4 rounded-full flex items-center justify-center'
+    >
+      <FaBookmark className='mr-2' /> Remove Bookmark
+    </button>
+  ) : (
     <button
       onClick={handleClick}
       className='bg-blue-500 hover:bg-blue-600 text-white font-bold w-full py-2 px-4 rounded-full flex items-center justify-center'
     >
-      <FaBookmark className='mr-2' />
-      Bookmark Property
+      <FaBookmark className='mr-2' /> Bookmark Property
     </button>
   );
 };