Merge pull request #12 from SRN-SE-Fall24/bookmark_shoppingList

Added option for shopping list in bookmarks
SRN-SE-Fall24 · Nov 1, 2024 · 9a168a0 · 9a168a0
2 parents 12eede1 + a85600c
commit 9a168a0
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 8 deletions.
diff --git a/Code/frontend/src/components/BookMarksRecipeList.js b/Code/frontend/src/components/BookMarksRecipeList.js
@@ -3,15 +3,16 @@
 Copyright (c) 2023 Pannaga Rao, Harshitha, Prathima, Karthik */
 
 import React, { useState, useEffect } from "react";
-import { Flex, Modal, ModalBody, ModalCloseButton, ModalOverlay, ModalHeader, ModalFooter, ModalContent, Box, SimpleGrid, Text, Button } from "@chakra-ui/react";
+import { Flex, Modal, ModalBody, ModalCloseButton, ModalOverlay, ModalHeader, ModalFooter, ModalContent, Box, SimpleGrid, Text, Button, Heading, List, ListItem } from "@chakra-ui/react";
 import BookMarksRecipeCard from "./BookMarksRecipeCard";
-import { fetchBookmarkedRecipes } from '../service/firestoreService';
+import { fetchBookmarkedRecipes, fetchBookmarkedIngredients } from '../service/firestoreService';
 
 // Component to handle displaying all bookmarked recipes
 const BookMarksRecipeList = () => {
   const [recipes, setRecipes] = useState([]);
   const [isOpen, setIsOpen] = useState(false);
   const [currentRecipe, setCurrentRecipe] = useState({});
+  const [ingredients, setIngredients] = useState([]);
 
   useEffect(() => {
     // Fetch bookmarked recipes when the component mounts
@@ -20,7 +21,14 @@ const BookMarksRecipeList = () => {
       setRecipes(bookmarkedRecipes);
     };
 
+    // Fetch all unique ingredients from bookmarked recipes
+    const fetchIngredients = async () => {
+      const ingredientsList = await fetchBookmarkedIngredients();
+      setIngredients(ingredientsList);
+    };
+
     fetchRecipes();
+    fetchIngredients();
   }, []);
 
   const handleViewRecipe = (data) => {
@@ -35,15 +43,30 @@ const BookMarksRecipeList = () => {
   return (
     <>
       <Box borderRadius={"lg"} border="1px" boxShadow={"10px"} borderColor={"gray.100"} fontFamily="regular" m={10} width={"94%"} p={5}>
+        <Heading as="h2" size="lg" mb={4}>
+          Bookmarked Recipes
+        </Heading>
         <SimpleGrid spacing={5} templateColumns='repeat(auto-fill, minmax(250px, 1fr))'>
-          {recipes.length !== 0 ? recipes.map((recipe) => (
+          {recipes.map((recipe) => (
             <BookMarksRecipeCard key={recipe.recipeName} handler={handleViewRecipe} recipe={recipe} />
-          )) : (
-            <Text data-testid="noResponseText" fontSize={"lg"} color={"gray"}>
-              No bookmarked recipes found.
-            </Text>
-          )}
+          ))}
         </SimpleGrid>
+
+        <Heading as="h3" size="md" my={4}>
+          All Ingredients (Shopping List)
+        </Heading>
+
+        {ingredients.length > 0 ? (
+          <List spacing={2}>
+            {ingredients.map((ingredient, index) => (
+              <ListItem key={index}>{ingredient}</ListItem>
+            ))}
+          </List>
+        ) : (
+          <Text fontSize={"lg"} color={"gray"}>
+            No ingredients found in bookmarked recipes.
+          </Text>
+        )}
       </Box>
 
       {/* Modal for detailed view */}

diff --git a/Code/frontend/src/service/firestoreService.js b/Code/frontend/src/service/firestoreService.js
@@ -52,4 +52,26 @@ export const fetchBookmarkedRecipes = async () => {
         console.warn("No user is logged in.");
         return [];
     }
+};
+
+// Fetch all ingredients from bookmarked recipes
+export const fetchBookmarkedIngredients = async () => {
+    const user = auth.currentUser;
+    if (user) {
+        const bookmarksRef = collection(db, "bookmarks");
+        const q = query(bookmarksRef, where("userId", "==", user.uid));
+        const querySnapshot = await getDocs(q);
+
+        let allIngredients = [];
+        querySnapshot.forEach((doc) => {
+            const recipe = doc.data();
+            if (recipe.ingredients) {
+                allIngredients = [...allIngredients, ...recipe.ingredients];
+            }
+        });
+
+        // Remove duplicates
+        return [...new Set(allIngredients)];
+    }
+    return [];
 };