it works

README.md

@@ -54,7 +54,7 @@ Which (if any) progressive web app feature(s) does your app support?
 
 **Is there anything special we need to know in order to effectively test your app? (optional):**
 
-* ...
+* If the image of a food or recipe is clicked and replaced with a picture from a camera (or file), the object must be "saved" in order for the displayed image to refresh. This is the indicator that the image has successfully saved to blob storage.
 
 
 

api/index.js

@@ -63,35 +63,41 @@ app.http('searchFoods', {
           }; 
       }
       const body = await request.json();
-      const food = body.food;
-      const appId = process.env.EDAMAME_FOOD_SEARCH_APP_ID;
-      const appKey = process.env.EDAMAME_FOOD_SEARCH_APP_KEY;
-      // context.log("Food: ", food);
-      // context.log("appID: ", appId);
-      // context.log("appKey: ", appKey);
-
-      const url = `https://api.edamam.com/api/food-database/v2/parser?app_id=${appId}&ingr=${encodeURIComponent(food)}&app_key=${appKey}`;
-      // context.log("URL: ", url);
-      const response = await fetch(url);
-
-      if (!response.ok) {
+      if (body) {
+        const food = body.food;
+        const appId = process.env.EDAMAME_FOOD_SEARCH_APP_ID;
+        const appKey = process.env.EDAMAME_FOOD_SEARCH_APP_KEY;
+        // context.log("Food: ", food);
+        // context.log("appID: ", appId);
+        // context.log("appKey: ", appKey);
+
+        const url = `https://api.edamam.com/api/food-database/v2/parser?app_id=${appId}&ingr=${encodeURIComponent(food)}&app_key=${appKey}`;
+        // context.log("URL: ", url);
+        const response = await fetch(url);
+
+        if (!response.ok) {
+          return {
+            jsonBody: {error: await response.text()}
+          }
+        }
+
+        const foodRes = await response.json();
+        // context.log("FoodRes: ", foodRes);
+        const foods = foodRes.hints.slice(0, 20);  // get first 20 results
+        const extractedData = foods.map(item => ({
+          apiId: item.food.foodId,
+          name: item.food.label,
+          image: item.food.image
+        }));
+        // context.log("Extracted data: ", extractedData);
         return {
-          jsonBody: {error: await response.text()}
+            jsonBody: {data: extractedData}
         }
       }
-
-      const foodRes = await response.json();
-      // context.log("FoodRes: ", foodRes);
-      const foods = foodRes.hints.slice(0, 20);  // get first 20 results
-      const extractedData = foods.map(item => ({
-        apiId: item.food.foodId,
-        name: item.food.label,
-        image: item.food.image
-    }));
-    // context.log("Extracted data: ", extractedData);
-    return {
-        jsonBody: {data: extractedData}
-    }
+      return {
+        status: 404,
+        jsonBody: {error: "No food specified"}
+      }
   },
 });
 
@@ -119,38 +125,44 @@ app.http('searchRecipes', {
           }; 
       }
       const body = await request.json();
-      const q = body.recipe;
-      const appId = process.env.EDAMAME_RECIPE_SEARCH_APP_ID;
-      const appKey = process.env.EDAMAME_RECIPE_SEARCH_APP_KEY;
-      const url = `https://api.edamam.com/api/recipes/v2?type=public&app_id=${appId}&app_key=${appKey}&q=${encodeURIComponent(q)}`;
-      // context.log("Query: ", q);
-
-      const response = await fetch(url);
-      if (!response.ok) {
-        return {
-          jsonBody: {error: await response.text()}
+      if (body) {
+        const q = body.recipe;
+        const appId = process.env.EDAMAME_RECIPE_SEARCH_APP_ID;
+        const appKey = process.env.EDAMAME_RECIPE_SEARCH_APP_KEY;
+        const url = `https://api.edamam.com/api/recipes/v2?type=public&app_id=${appId}&app_key=${appKey}&q=${encodeURIComponent(q)}`;
+        // context.log("Query: ", q);
+
+        const response = await fetch(url);
+        if (!response.ok) {
+          return {
+            jsonBody: {error: await response.text()}
+          }
         }
-      }
 
-      const recipeRes = await response.json();
-      const recipes = recipeRes.hits.slice(0, 20);
-      // context.log("First 20 unfiltered results: ", recipes);
-      const extractedData = recipes.map(r => {
-        // URI looks like: 
-        // https://www.edamam.com/ontologies/edamam.owl#recipe_7a4555745d484bec92c26b26d7d74cd3
-        // apiId starts after the last "_"
-        const ind = r.recipe.uri.lastIndexOf('_') + 1
-        return { 
-        apiId: r.recipe.uri.slice(ind),
-        name: r.recipe.label,
-        image: r.recipe.image,
-        url: r.recipe.url
-      }
-    })
+        const recipeRes = await response.json();
+        const recipes = recipeRes.hits.slice(0, 20);
+        // context.log("First 20 unfiltered results: ", recipes);
+        const extractedData = recipes.map(r => {
+          // URI looks like: 
+          // https://www.edamam.com/ontologies/edamam.owl#recipe_7a4555745d484bec92c26b26d7d74cd3
+          // apiId starts after the last "_"
+          const ind = r.recipe.uri.lastIndexOf('_') + 1
+          return { 
+          apiId: r.recipe.uri.slice(ind),
+          name: r.recipe.label,
+          image: r.recipe.image,
+          url: r.recipe.url
+        }
+      })
 
-    context.log(extractedData);
+      context.log(extractedData);
+      return {
+          jsonBody: {data: extractedData}
+      }
+    }
     return {
-        jsonBody: {data: extractedData}
+      status: 404,
+      jsonBody: {error: "No recipe specified"}
     }
   },
 });
@@ -254,11 +266,10 @@ app.http('getFood', {
             status: 201,
             jsonBody: {food: food}
           }
-        } else {
-          return {
-            status: 404,
-            jsonBody: {error: "Could not find food with id: " + _id}
-          }
+        }
+        return {
+          status: 404,
+          jsonBody: {error: "Could not find food with id: " + _id}
         }
       }
     }
@@ -287,9 +298,15 @@ app.http("getRecipe", {
         const client = await mongoClient.connect(process.env.AZURE_MONGO_DB);
         const recipe = await client.db("LetMeCookDB").collection("recipes").findOne({_id: new ObjectId(_id)});
         client.close();
+        if (recipe) {
+          return {
+            status: 201,
+            jsonBody: {recipe: recipe}
+          }
+        }
         return {
-          status: 201,
-          jsonBody: {recipe: recipe}
+          status: 404,
+          jsonBody: {error: "Failed to retrieve recipe with id: " + _id}
         }
       }
       return {
@@ -864,10 +881,11 @@ app.http('removeRecipe', {
 app.http('addRecipeToQueue', {
   methods: ['POST'],
   authLevel: 'anonymous',
-  route: 'recipe/queue/add/{id}',
+  route: 'recipe/queue/add',
+  // route: 'recipe/queue/add/{id}',
   handler: async (request, context) => {
-    const _id = request.params.id;
-    if (ObjectId.isValid(_id)) {
+    // const _id = request.params.id;
+    // if (ObjectId.isValid(_id)) {
       const auth_header = request.headers.get('X-MS-CLIENT-PRINCIPAL');
       let token = null;
       if (auth_header) {
@@ -876,28 +894,31 @@ app.http('addRecipeToQueue', {
         // context.log("token= " + JSON.stringify(token));
         const userId = token.userId;
         const client = await mongoClient.connect(process.env.AZURE_MONGO_DB);
-        const result = await client.db("LetMeCookDB").collection("users").updateOne({userId: userId}, {$push : {recipeQueue: {_id: new ObjectId(_id)}}});
+        // const result = await client.db("LetMeCookDB").collection("users").updateOne({userId: userId}, {$push : {recipeQueue: {_id: new ObjectId(_id)}}});
+        const body = await request.json();
+        const recipe = body.recipe;
+        const result = await client.db("LetMeCookDB").collection("users").updateOne({userId: userId}, {$push : {recipeQueue: {recipe: recipe}}});
         client.close();
         if (result.matchedCount > 0) {
           return {
             status: 201,
-            jsonBody: {_id: _id}
+            jsonBody: {recipe: recipe}
           }
         }
         return {
           status: 500,
-          jsonBody: {error: "Unable to insert recipe with id: " + _id + " to user's queue"}
+          jsonBody: {error: "Unable to insert recipe to user's queue"}
         }
       }
       return {
         status: 403,
-        jsonBody: {error: "Authorization failed for adding to queue with recipe id: " + _id}
+        jsonBody: {error: "Authorization failed for adding recipe to queue"}
       }
-    }
-    return {
-      status: 404,
-      jsonBody: {error: "Unknown recipe with id: " + _id}
-    }   
+    // }
+    // return {
+    //   status: 404,
+    //   jsonBody: {error: "Unknown recipe with id: " + _id}
+    // }   
   },
 });
 

public/index.html

@@ -26,7 +26,7 @@
     -->
     <title>Let Me Cook</title>
   </head>
-  <body>
+  <body style="background-color: #f4f5d9;">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--

src/components/AddRecipeQueuePopup.jsx

@@ -0,0 +1,60 @@
+import Modal from 'react-bootstrap/Modal'
+import styles from "../css/QueueItem.module.css";
+import ListGroup from 'react-bootstrap/ListGroup'
+import SearchResult from './SearchResultBootstrap';
+import Layout from "../css/ItemPageLayout.module.css";
+import AddButton from '../components/AddButton';
+import { useEffect, useState } from 'react'
+import { ReactComponent as Enqueue }  from '../assets/enqueue.svg'
+
+export default function AddRecipeQueuePopup({ addRecipe }) {
+  const [show, setShow] = useState(false)
+  const [recipes, setRecipes] = useState([])
+
+  async function setShowPopup(show) {
+    if (show) {
+      const res = await fetch("/api/recipes", { method: "GET" })
+      if (!res.ok) {
+          console.log(res)
+          window.alert("Error getting recipes!")
+          return
+      }
+      console.log(res)
+      const resJson = await res.json()
+      console.log(resJson)
+      setRecipes(resJson.recipes)
+    }
+    if (!show) setRecipes([])
+    setShow(show)
+  }
+
+  return <>
+    <div className ={Layout.centerrow+" "+Layout.stickaddbutton}
+        onClick={()=>setShowPopup(true)}>
+          <AddButton/>
+    </div>
+    <Modal show={show} onHide={()=>setShowPopup(false)}>
+    <Modal.Header closeButton>
+        <Modal.Title>Add Recipe to Queue</Modal.Title>
+    </Modal.Header>
+    <Modal.Body>
+    <ListGroup className="list-group-flush">
+    { recipes && recipes.length !== 0 ? 
+        recipes.map((e,i) =>
+          // using array index as keys here is fine so long as there is no way to add/remove elements from the array
+          <div key={i} onClick={()=>{
+            addRecipe(e._id)
+            setShow(false)
+          }}> 
+            <SearchResult name={ e.name } image={e.image}
+                buttonComp={
+                <button className={styles.enqueueButton} > 
+                  <Enqueue  className={styles.enqueue}/>
+                </button>}></SearchResult>
+          </div>
+        ) : <></> }
+    </ListGroup>
+    </Modal.Body>
+    </Modal>
+  </>
+}