Merge pull request #204 from UB-ES-2023-A2/feature/us14-follow-user

Feature/us10 user profile + us14 follow user
UB-ES-2023-A2 · Dec 14, 2023 · 0b5e4c0 · 0b5e4c0
2 parents eb8a913 + dc594f6
commit 0b5e4c0
Show file tree

Hide file tree

Showing 7 changed files with 639 additions and 152 deletions.
diff --git a/README.md b/README.md
@@ -35,3 +35,4 @@ npm install -g serve
 npm run build
 serve -s build
 ```
+
diff --git a/src/components/AuthContext.jsx b/src/components/AuthContext.jsx
@@ -8,6 +8,7 @@ export const AuthProvider = ({ children }) => {
     const logout = () => {
         setToken(null);
         localStorage.removeItem("token");
+        localStorage.removeItem("currentUser");
     };
 
     const isLogged = () => {

diff --git a/src/components/KasulaNavbar.jsx b/src/components/KasulaNavbar.jsx
@@ -1,6 +1,6 @@
 //React
 import React, { useState, useEffect } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { useAuth } from "./AuthContext";
 import "../css/common.css";
 
@@ -27,6 +27,7 @@ import chef from "../assets/chef.png";
 
 function KasulaNavbar() {
   const { token, logout, isLogged } = useAuth();
+  const navigate = useNavigate();
   const [user, setUser] = useState({});
   const [showModal, setShowModal] = useState(false);
   const [showPostRecipe, setShowPostRecipe] = useState(false);
@@ -68,13 +69,13 @@ function KasulaNavbar() {
 
   const handleClosePostRecipeSuccessfulModal = () => {
     setShowPostRecipe(false);
-    //window.location.reload();
   };
 
   const handleLogout = () => {
     localStorage.setItem("logged", "false"); // This will update the localStorage
     handleCloseModal(); // This will close the modal
     logout(); // This will remove the token from the localStorage
+    window.location.reload(); 
   };
 
   const CustomToggle = React.forwardRef(({ onClick }, ref) => (

diff --git a/src/components/PostRecipe.jsx b/src/components/PostRecipe.jsx
@@ -28,7 +28,7 @@ import {
   Table,
 } from "react-bootstrap";
 
-const RecipePost = ({ onClose }) => {
+const RecipePost = ({onClose, edit, id}) => {
   const { token } = useAuth();
 
   const Unit = {
@@ -76,6 +76,42 @@ const RecipePost = ({ onClose }) => {
     }
   }, [localStorage.getItem("logged"), navigate]);
 
+  useEffect(() => {
+    if(edit){
+      fetchRecipeData();
+    }
+  }, []);
+
+  const fetchRecipeData = async () => {
+    try {
+      const response = await fetch(`${process.env.REACT_APP_API_URL}/recipe/${id}`, {
+        method: 'GET',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json',
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error('Error fetching recipe data');
+      }
+
+      const data = await response.json();
+
+      setRecipeName(data.name);
+      setIngredients(data.ingredients);
+      setPreparation(data.instructions); 
+      setTime(data.cooking_time);
+      setEnergy(data.energy);
+      setDifficulty(data.difficulty);
+      setImagePreviewUrl(data.main_image)
+
+    } catch (error) {
+      console.error('Error:', error);
+    }
+  };
+
+
   const renderStars = (amount) => {
     let stars = [];
     for (let i = 1; i <= 5; i++) {
@@ -228,34 +264,61 @@ const RecipePost = ({ onClose }) => {
     formData.append("recipe", JSON.stringify(recipeData));
     if (image) {
       formData.append("files", image);
-      console.log(formData);
+
     }
-
-
-    try {
-      const response = await fetch(process.env.REACT_APP_API_URL + "/recipe/", {
-        method: "POST",
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-        body: formData,
-      });
-
-      const data = await response.json();
-
-      if (response.ok) {
-        setSubmitMessage("Recipe posted successfully", data);
-        setPostRecipeSuccess(true);
-        //onClose();
-      } else {
-        setSubmitMessage("Error posting recipe: " + JSON.stringify(data));
+    console.log(formData["recipe"]);
+    if(edit){
+      try {
+        const response = await fetch(process.env.REACT_APP_API_URL + "/recipe/" + id, {
+          method: "PUT",
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+          body: formData,
+        });
+
+        const data = await response.json();
+
+        if (response.ok) {
+          setSubmitMessage("Updated correctly!", data);
+          setPostRecipeSuccess(true);
+          //onClose();
+        } else {
+          setSubmitMessage("Error updating recipe: " + JSON.stringify(data));
+        }
+      } catch (error) {
+        setSubmitMessage(JSON.stringify(error));
+        setPostRecipeSuccess(false);
+      } finally {
+        setShowPostRecipeConfirmation(true);
+      }
+    }else{
+      try {
+        const response = await fetch(process.env.REACT_APP_API_URL + "/recipe/", {
+          method: "POST",
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+          body: formData,
+        });
+
+        const data = await response.json();
+
+        if (response.ok) {
+          setSubmitMessage("Posted correctly!", data);
+          setPostRecipeSuccess(true);
+          //onClose();
+        } else {
+          setSubmitMessage("Error posting recipe: " + JSON.stringify(data));
+        }
+      } catch (error) {
+        setSubmitMessage(JSON.stringify(error));
+        setPostRecipeSuccess(false);
+      } finally {
+        setShowPostRecipeConfirmation(true);
       }
-    } catch (error) {
-      setSubmitMessage(JSON.stringify(error));
-      setPostRecipeSuccess(false);
-    } finally {
-      setShowPostRecipeConfirmation(true);
     }
+
   };
 
   const handleImageUpload = (event) => {
@@ -268,7 +331,7 @@ const RecipePost = ({ onClose }) => {
   const handlePostRecipeConfirmationClose = () => {
     setShowPostRecipeConfirmation(false);
     if (postSuccess) {
-      navigate("/");
+      onClose();
     }
   };
 
@@ -661,7 +724,7 @@ const RecipePost = ({ onClose }) => {
             variant={postSuccess ? "success" : "secondary"}
             onClick={handlePostRecipeConfirmationClose}
           >
-            {postSuccess ? "Go to recipes" : "Close"}
+            {postSuccess ? "Okay" : "Close"}
           </Button>
         </Modal.Footer>
       </Modal>