From 9b3defc9971ac6d9dea9fde3f29d0d32345f5f0e Mon Sep 17 00:00:00 2001
From: Rutvik Vishwas Kulkarni <kulkarnirutvikvishwas@gmail.com>
Date: Thu, 31 Oct 2024 00:36:44 -0400
Subject: [PATCH 1/3] Display ingredients in detailed view of the recipe

---
 Code/frontend/src/components/SearchBlock.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/Code/frontend/src/components/SearchBlock.js b/Code/frontend/src/components/SearchBlock.js
index 4f914a27..1569d80f 100644
--- a/Code/frontend/src/components/SearchBlock.js
+++ b/Code/frontend/src/components/SearchBlock.js
@@ -67,6 +67,7 @@ const SearchBlock = (props) => {
             ingredients: items[index].ingredients,
         };
         const response = await axios.post('https://get-detailed-recipe-3rhjd2q7dq-uc.a.run.app', data);
+        const allIngredients = response.data.ingredients.split('\n').map(ingredient => ingredient.trim());
         console.log(response.data);
         setDetailedItem(response.data);
     }
@@ -111,15 +112,24 @@ const SearchBlock = (props) => {
                             <div>{detailedItem.name}</div>
                             <div>{detailedItem.time}</div>
                         </div>
+
                         <div style={{ display: 'flex', marginTop: 5 }}>
                             {detailedItem.tags.map((tag, index) => {
                                 return <Tag key={index}>{tag}</Tag>;
                             })}
                         </div>
+
+                        <div style={{ marginTop: 30 }}>Ingredients</div>
+                        <div style={{ display: 'flex', flexWrap: 'wrap', marginTop: 10}}>
+                            {detailedItem.ingredients.map((ingredient, index) => (
+                                <Tag key={index}>{ingredient}</Tag>
+                            ))}
+                        </div>
+
                         <div style={{ marginTop: 30 }}>Steps</div>
                         <div style={{ display: 'flex', flexDirection: 'column', rowGap: 20, marginTop: 10 }}>
                             {detailedItem.process.map((step, index) => {
-                                return <div key={index} style={{ width: '95%', display: 'flex', background: '#eee', borderRadius: 10, overflow: 'hidden' }}>
+                                return <div key={index} style={{ display: 'flex', background: '#eee', borderRadius: 10, overflow: 'hidden' }}>
                                     <div style={{ display: 'flex', alignItems: 'center', padding: 20, background: '#ddd' }}>{index + 1}</div>
                                     <div style={{ padding: 10, display: 'flex', alignItems: 'center' }}>{step.replace(/[0-9]*\./, '')}</div>
                                 </div>;

From 61a8e9add49b3dd23bc1fde1164ce0a4865f8796 Mon Sep 17 00:00:00 2001
From: Rutvik Vishwas Kulkarni <kulkarnirutvikvishwas@gmail.com>
Date: Thu, 31 Oct 2024 00:44:41 -0400
Subject: [PATCH 2/3] Wrong changes for displaying ingreds

---
 Code/frontend/src/components/SearchBlock.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Code/frontend/src/components/SearchBlock.js b/Code/frontend/src/components/SearchBlock.js
index 1569d80f..dd9e271d 100644
--- a/Code/frontend/src/components/SearchBlock.js
+++ b/Code/frontend/src/components/SearchBlock.js
@@ -68,7 +68,7 @@ const SearchBlock = (props) => {
         };
         const response = await axios.post('https://get-detailed-recipe-3rhjd2q7dq-uc.a.run.app', data);
         const allIngredients = response.data.ingredients.split('\n').map(ingredient => ingredient.trim());
-        console.log(response.data);
+        response.data.ingredients = allIngredients;
         setDetailedItem(response.data);
     }
 

From 10665907a28ce66fdd83c315a24d4bdbbf1c0e9c Mon Sep 17 00:00:00 2001
From: Rutvik Vishwas Kulkarni <kulkarnirutvikvishwas@gmail.com>
Date: Thu, 31 Oct 2024 01:29:25 -0400
Subject: [PATCH 3/3] Added download a shopping list option

---
 Code/frontend/package.json                  |  6 +---
 Code/frontend/src/components/Navbar.js      |  2 +-
 Code/frontend/src/components/SearchBlock.js | 37 ++++++++++++++++++++-
 3 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/Code/frontend/package.json b/Code/frontend/package.json
index ef5e9ff4..1365d334 100644
--- a/Code/frontend/package.json
+++ b/Code/frontend/package.json
@@ -3,9 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@chakra-ui/react": "^2.10.3",
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
     "@chakra-ui/react": "^2.10.3",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
@@ -16,8 +13,7 @@
     "bootstrap": "^5.1.1",
     "firebase": "^11.0.1",
     "framer-motion": "^11.11.10",
-    "firebase": "^11.0.1",
-    "framer-motion": "^11.11.10",
+    "jspdf": "^2.5.2",
     "react": "^18.2.0",
     "react-bootstrap-validation": "^0.1.11",
     "react-dom": "^18.2.0",
diff --git a/Code/frontend/src/components/Navbar.js b/Code/frontend/src/components/Navbar.js
index debd6815..3c60e20e 100644
--- a/Code/frontend/src/components/Navbar.js
+++ b/Code/frontend/src/components/Navbar.js
@@ -44,7 +44,7 @@ export default function Nav(props) {
   const { isOpen, onOpen, onClose } = useDisclosure()
 
   return (
-    <Box color={"black"} mb={5} px={4}>
+    <Box bg="#D3D3D3" color={"black"} mb={5} px={4}>
       <Flex h={16} alignItems={"center"} justifyContent={"space-between"}>
         <Box pl={10}>
           <Heading size={"md"}>CookSmart</Heading>
diff --git a/Code/frontend/src/components/SearchBlock.js b/Code/frontend/src/components/SearchBlock.js
index dd9e271d..ad60f63c 100644
--- a/Code/frontend/src/components/SearchBlock.js
+++ b/Code/frontend/src/components/SearchBlock.js
@@ -5,6 +5,7 @@ import RecipeImage from "./RecipeImage";
 import { LuClock4 } from "react-icons/lu";
 import './css/misc.css';
 import Tag from "./Tag";
+import jsPDF from 'jspdf';
 
 
 const SearchBlock = (props) => {
@@ -72,6 +73,27 @@ const SearchBlock = (props) => {
         setDetailedItem(response.data);
     }
 
+    const generatePDF = () => {
+        const recipeName = detailedItem.name;
+        const ingredients = String(detailedItem.ingredients).split(',').map(ingredient => ingredient.trim());
+        const doc = new jsPDF();
+        doc.setFontSize(16);
+        doc.text("Shopping List", 20, 20);
+
+        doc.setFontSize(14);
+        doc.text(`Recipe: ${recipeName}`, 20, 40);
+
+        doc.setFontSize(12);
+        let yOffset = 50;
+        console.log("inside generating pdf:"+ ingredients);
+        ingredients.forEach((ingredient, index) => {
+            doc.text(`${index + 1}. ${ingredient}`, 20, yOffset);
+            yOffset += 10;
+        });
+
+        doc.save(`${recipeName}-shopping-list.pdf`);
+    };
+
     return (
         <div style={{ width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
             <SearchBar onChange={onChange} onIngredientAdded={onIngredientAdded} />
@@ -120,7 +142,7 @@ const SearchBlock = (props) => {
                         </div>
 
                         <div style={{ marginTop: 30 }}>Ingredients</div>
-                        <div style={{ display: 'flex', flexWrap: 'wrap', marginTop: 10}}>
+                        <div style={{ display: 'flex', flexWrap: 'wrap', marginTop: 10 }}>
                             {detailedItem.ingredients.map((ingredient, index) => (
                                 <Tag key={index}>{ingredient}</Tag>
                             ))}
@@ -135,6 +157,19 @@ const SearchBlock = (props) => {
                                 </div>;
                             })}
                         </div>
+                        {detailedItem && (
+                            <div style={{ display: 'flex', flexDirection: 'column', boxShadow: '0 2px 5px rgba(0, 0, 0, 0.1)', margin: '20px', padding: '20px', alignItems: 'center', }}>
+                                <p>Need a quick shopping list of ingredients? Here's a PDF you can download!</p>
+                                <button
+                                    onClick={() => generatePDF(detailedItem.name, detailedItem.ingredients)}
+                                    style={{ padding: '10px 20px', fontSize: '16px', backgroundColor: '#A9A9A9', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer', transition: 'background-color 0.3s', marginTop: '10px' }}
+                                    onMouseOver={(e) => e.currentTarget.style.backgroundColor = '#808080'}
+                                    onMouseOut={(e) => e.currentTarget.style.backgroundColor = '#A9A9A9'}
+                                >
+                                    Download Shopping List
+                                </button>
+                            </div>
+                        )}
                         <div style={{ height: 100 }}></div>
                     </div>
                     ))