Added functionality for a user to bookmark a recipe

SRN-SE-Fall24 · Oct 31, 2024 · 8498ad2 · 8498ad2
1 parent dab5775
commit 8498ad2
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 50 deletions.
diff --git a/Code/frontend/src/components/SearchBlock.js b/Code/frontend/src/components/SearchBlock.js
@@ -7,7 +7,7 @@ import './css/misc.css';
 import Tag from "./Tag";
 import jsPDF from 'jspdf';
 import { Oval } from "react-loader-spinner";
-import { bookmarkRecipe } from '../service/firestoreService';
+import { bookmarkRecipe, unbookmarkRecipe, isRecipeBookmarked } from '../service/firestoreService';
 import { useAuth } from "../contexts/authContext/index";
 
 
@@ -19,8 +19,9 @@ const SearchBlock = (props) => {
     const currentPage = useRef(1);
     const [loading, setLoading] = useState(false);
     const [showingDetailed, setShowingDetailed] = useState(-1);
-    const [detailedItem, setDetailedItem] = useState();
+    const [detailedItem, setDetailedItem] = useState(null);
     const [isBookmarked, setIsBookmarked] = useState(false);
+    const { userLoggedIn } = useAuth();
 
     const onChange = (query) => {
         if (searchIngredients.length === 0) {
@@ -70,6 +71,19 @@ const SearchBlock = (props) => {
 
     useEffect(() => { searchRecipes() }, [searchName, searchIngredients]);
 
+    useEffect(() => {
+        const checkBookmarkStatus = async () => {
+            if (detailedItem?.name) {
+                const status = await isRecipeBookmarked(detailedItem.name);
+                setIsBookmarked(status);
+            }
+        };
+
+        if (detailedItem) {
+            checkBookmarkStatus();
+        }
+    }, [detailedItem]);
+
     const loadMore = () => {
         if (loading) return;
         currentPage.current = currentPage.current + 1;
@@ -88,14 +102,13 @@ const SearchBlock = (props) => {
     }
 
     const handleBookmark = async () => {
-        await bookmarkRecipe("Tom yum soup");
-        // if (isBookmarked) {
-        //     await unbookmarkRecipe(detailedItem.name);
-        //     setIsBookmarked(false);
-        // } else {
-        //     await bookmarkRecipe(detailedItem.name);
-        //     setIsBookmarked(true);
-        // }
+        if (isBookmarked) {
+            await unbookmarkRecipe(detailedItem.name);
+            setIsBookmarked(false);
+        } else {
+            await bookmarkRecipe(detailedItem.name);
+            setIsBookmarked(true);
+        }
     };
 
     const generatePDF = () => {
@@ -118,8 +131,6 @@ const SearchBlock = (props) => {
         doc.save(`${recipeName}-shopping-list.pdf`);
     };
 
-    const { userLoggedIn } = useAuth();
-
     return (
         <div style={{ width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
             <SearchBar onChange={onChange} onIngredientAdded={onIngredientAdded} />
@@ -184,7 +195,7 @@ const SearchBlock = (props) => {
                                     onClick={handleBookmark}
                                     style={{ padding: '5px 5px', backgroundColor: '#A9A9A9', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer', transition: 'background-color 0.3s' }}    
                                 >
-                                    Bookmark this recipe
+                                    {isBookmarked ? "Unbookmark this recipe" : "Bookmark this recipe"}
                                 </button>
                         )}
                         <div style={{ display: 'flex', marginTop: 5 }}>

diff --git a/Code/frontend/src/service/firestoreService.js b/Code/frontend/src/service/firestoreService.js
@@ -4,43 +4,31 @@ import { auth, db } from "../firebase/firebase";
 // Function to bookmark a recipe by name
 export const bookmarkRecipe = async (recipeName) => {
     const user = auth.currentUser;
-    const documentId = `${auth.currentUser.uid}_${recipeName}`;
-    const bookmarkRef = doc(db, "bookmarks", documentId);
-    await setDoc(bookmarkRef, { userId: auth.currentUser.uid, recipeName });
-    // if (user) {
-    //     const bookmarkRef = doc(db, "bookmarks");
-    //     await setDoc(bookmarkRef, { name: recipeName });
-    // }
+    if (user) {
+        const documentId = `${user.uid}_${recipeName}`;
+        const bookmarkRef = doc(db, "bookmarks", documentId);
+        await setDoc(bookmarkRef, { userId: user.uid, recipeName });
+    }
 };
 
-// // Function to unbookmark a recipe by name
-// export const unbookmarkRecipe = async (recipeName) => {
-//     const user = auth.currentUser;
-//     if (user) {
-//         const bookmarkRef = doc(db, "users", user.uid, "bookmarks", recipeName);
-//         await deleteDoc(bookmarkRef);
-//     }
-// };
-
-// // Function to check if a recipe is bookmarked
-// export const isRecipeBookmarked = async (recipeName) => {
-//     const user = auth.currentUser;
-//     if (user) {
-//         const bookmarkRef = doc(db, "users", user.uid, "bookmarks", recipeName);
-//         const bookmarkSnap = await getDoc(bookmarkRef);
-//         return bookmarkSnap.exists();
-//     }
-//     return false;
-// };
+// Function to unbookmark a recipe by name
+export const unbookmarkRecipe = async (recipeName) => {
+    const user = auth.currentUser;
+    if (user) {
+        const documentId = `${user.uid}_${recipeName}`; // Use the same documentId format
+        const bookmarkRef = doc(db, "bookmarks", documentId);
+        await deleteDoc(bookmarkRef);
+    }
+};
 
-// Optional: function to listen for real-time bookmark status
-// export const onBookmarkStatusChange = (recipeName, callback) => {
-//     const user = auth.currentUser;
-//     if (user) {
-//         const bookmarkRef = doc(db, "users", user.uid, "bookmarks", recipeName);
-//         return onSnapshot(bookmarkRef, (docSnap) => {
-//             callback(docSnap.exists());
-//         });
-//     }
-//     return () => {}; // Return a no-op function if not logged in
-// };
+// Function to check if a recipe is bookmarked
+export const isRecipeBookmarked = async (recipeName) => {
+    const user = auth.currentUser;
+    if (user) {
+        const documentId = `${user.uid}_${recipeName}`; // Use the same documentId format
+        const bookmarkRef = doc(db, "bookmarks", documentId);
+        const bookmarkSnap = await getDoc(bookmarkRef);
+        return bookmarkSnap.exists();
+    }
+    return false; // Return false if user is not logged in
+};