Merge branch 'dev' of https://github.com/Ansel-Hong/foodie into dev

src/components/recipe_vid/add2Cart.jsx

@@ -1,12 +1,17 @@
-import { useState } from 'react'
+// import { useState } from 'react'
+import { useContext, useEffect } from "react";
+import RecipeList from "../store/recipe-context";
 
 import "./RecipeVid.css"
 
 function Add2Cart({}) {
+  const recipeContext = useContext(RecipeList);
+
   const liStyle = {height : "%"};
 
   function handleClick (){
     console.log("clicked");
+    recipeContext.bookmarkRecipe();
   }
 
   return (

src/components/store/recipe-context.jsx

@@ -1,9 +1,10 @@
-import { createContext, useState, useEffect } from 'react';
+import { createContext, useState, useEffect } from "react";
 
 const RecipeList = createContext({
   recipeList: [],
   curRecipe: 0,
-  changeRecipe: (recipe) => {} 
+  changeRecipe: (recipe) => {},
+  bookmarkRecipe: () => {},
 });
 
 export function RecipeListProvider(props) {
@@ -11,11 +12,38 @@ export function RecipeListProvider(props) {
   const [loadedRecipe, setLoadedRecipe] = useState([]);
   const [curNum, setCurNum] = useState(0);
 
-  function changeCurRecipe(newRecipe){
-    console.log(newRecipe)
+  function changeCurRecipe(newRecipe) {
+    console.log(newRecipe);
     setCurNum((prevRecipeNum) => {
-        return newRecipe;
-    })
+      return newRecipe;
+    });
+  }
+
+  function bookmarkCurRecipe() {
+    console.log(
+      "bookmarkCurRecipe",
+      "https://htv7-96f00-default-rtdb.firebaseio.com/recipe/" +
+        loadedRecipe[curNum].id +
+        ".json"
+    );
+
+    fetch(
+      "https://htv7-96f00-default-rtdb.firebaseio.com/recipe/" +
+        loadedRecipe[curNum].id +
+        ".json",
+      {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ isBookmarked: true }),
+      }
+    )
+      .then((response) => {
+        console.log("response", response);
+        return response.json();
+      })
+      .then((data) => {
+        setIsLoading(false);
+      });
   }
 
   useEffect(() => {
@@ -48,11 +76,12 @@ export function RecipeListProvider(props) {
     );
   }
 
-    const recipesList = {
-      recipeList: loadedRecipe,
-      curRecipe: curNum,
-      changeRecipe: changeCurRecipe
-    };
+  const recipesList = {
+    recipeList: loadedRecipe,
+    curRecipe: curNum,
+    changeRecipe: changeCurRecipe,
+    bookmarkRecipe: bookmarkCurRecipe,
+  };
 
   return (
     <RecipeList.Provider value={recipesList}>