steps finished

backend/src/controllers/userControllers.js

@@ -40,15 +40,14 @@ const edit = async (req, res, next) => {
   const wantedId = parseInt(req.params.id, 10);
   // Extract the user data from the request body
   const item = req.body;
-  item.ID = wantedId;
+  item.id = wantedId;
   const avatar = req.file;
   fs.renameSync(
     `${avatar.destination}/${avatar.filename}`,
     `${avatar.destination}/${avatar.filename}-${avatar.originalname}`
   );
   const newpath = `${avatar.destination}/${avatar.filename}-${avatar.originalname}`;
 
-  console.info({ item, avatar });
   try {
     // Insert the recipe into the database
     const user = await tables.user.update(item, newpath);

backend/src/models/UserManager.js

@@ -68,8 +68,15 @@ class UserManager extends AbstractManager {
     // Execute the SQL SELECT query to retrieve a specific user by its Username
     const [result] = await this.database.query(
       `UPDATE ${this.table} SET firstname = ?, lastname = ?, birthdate = ?, description = ?, avatar = ?
-WHERE username = ?`,
-      [user.firstname, user.lastname, user.birthdate, user.description, avatar]
+WHERE user.id = ?`,
+      [
+        user.firstname,
+        user.lastname,
+        user.birthdate,
+        user.description,
+        avatar,
+        user.id,
+      ]
     );
 
     // Return the first row of the result, which represents the user

backend/src/router.js

@@ -30,14 +30,13 @@ router.get("/verify-token", AuthControllers.verifyToken);
 
 router.use(AuthMiddleware.verifyToken);
 
-router.get("/users", UserControllers.browse); // Route to get a list of items
-router.get("/users/:id", UserControllers.read); // Route to get a specific item by ID
-
 router.put(
   "/users/:id",
   uploadUsersAvatars.single("avatar"),
   UserControllers.edit
 );
+router.get("/users", UserControllers.browse); // Route to get a list of items
+router.get("/users/:id", UserControllers.read); // Route to get a specific item by ID
 
 // Route to update user
 router.post(

frontend/src/components/Step1.jsx

@@ -15,15 +15,15 @@ function Step1({ tag }) {
 
   const difficulties = [
     {
-      value: "easy",
+      value: "Facile",
       label: "Facile",
     },
     {
-      value: "medium",
+      value: "Moyen",
       label: "Moyen",
     },
     {
-      value: "hard",
+      value: "Difficile",
       label: "Difficile",
     },
   ];

frontend/src/components/Step2.jsx

@@ -15,6 +15,7 @@ export default function Step2({ ingredient }) {
   const [unit, setUnit] = React.useState("");
   const handleAddIngredient = () => {
     const ingredientToAdd = {
+      id: ingredientList.length,
       name: ingredientName,
       quantity,
       unit,
@@ -28,6 +29,11 @@ export default function Step2({ ingredient }) {
     setUnit("");
   };
 
+  const handleDeleteIngredient = (id) => {
+    setIngredientList(ingredientList.filter((object) => object.id !== id));
+  };
+
+  console.info(ingredientList);
   const combineHandler = async () => {
     handleReset();
     await handleAddIngredient();
@@ -80,7 +86,12 @@ export default function Step2({ ingredient }) {
             <span>{item.name}</span>
             <span style={{ margin: "0 10px" }}>{item.quantity}</span>
             <span>{item.unit}</span>
-            <button type="button">❌</button>
+            <button
+              type="button"
+              onClick={() => handleDeleteIngredient(item.id)}
+            >
+              ❌
+            </button>
           </div>
         ))}
       </div>

frontend/src/components/Step3.jsx

@@ -11,6 +11,7 @@ export default function Step3() {
   const [description, setDescription] = React.useState("");
   const handleAddingInstruction = () => {
     const instructionToAdd = {
+      id: instructionList.length,
       name: description,
     };
     setAddInstruction((prev) => [...prev, instructionToAdd]);
@@ -20,6 +21,12 @@ export default function Step3() {
     setDescription("");
   };
 
+  const handleDeleteInstruction = (id) => {
+    setInstructionList(
+      instructionList.filter((instruction) => instruction.id !== id)
+    );
+  };
+
   const combineHandler = async () => {
     handleReset();
     await handleAddingInstruction();
@@ -50,7 +57,12 @@ export default function Step3() {
         {instructionList.map((item) => (
           <div key={item.id}>
             <span>{item.name}</span>
-            <button type="button">❌</button>
+            <button
+              type="button"
+              onClick={() => handleDeleteInstruction(item.id)}
+            >
+              ❌
+            </button>
           </div>
         ))}
       </div>

frontend/src/components/Step4.jsx

@@ -1,4 +1,5 @@
 import axios from "axios";
+import React from "react";
 import { useIngredientCreation } from "../contexts/IngredientCreationContext";
 import { useInstructionCreation } from "../contexts/InstructionCreationContext";
 import { useRecipeCreation } from "../contexts/RecipeCreationContext";
@@ -21,32 +22,57 @@ function Step4() {
     difficulty,
   } = recipeCreation;
 
-  const Post = () => {
-    axios
-      .post(
-        `${import.meta.env.VITE_BACKEND_URL}/api/recipes`,
-        {
-          name: recipeName,
-          title: recipeDesc,
-          prep_time: prepTime,
-          nb_people: nbPeople,
-          tag1,
-          tag2,
-          tag3,
-          difficulty,
-        },
-        {
-          withCredentials: true,
-        }
-      )
-      .then((res) => res.status(201))
-      .catch((err) => console.error(err));
+  const handlePost = async () => {
+    try {
+      const response = await axios
+        .post(
+          `${import.meta.env.VITE_BACKEND_URL}/api/recipes`,
+          {
+            name: recipeCreation.recipeName,
+            title: recipeCreation.recipeDesc,
+            prep_time: recipeCreation.prepTime,
+            nb_people: recipeCreation.nbPeople,
+            difficulty: recipeCreation.difficulty,
+            tag1: recipeCreation.tag1,
+            tag2: recipeCreation.tag2,
+            tag3: recipeCreation.tag3,
+          },
+          {
+            withCredentials: true,
+          }
+        )
+        .then(() => console.info(response));
+    } catch (error) {
+      console.error(error);
+    }
   };
-
   return (
     <div>
       <h1>Step 4</h1>
-      <button type="submit" onClick={Post}>
+      <div className="recipe-name">
+        {recipeName} {recipeDesc}
+        {prepTime}
+        {nbPeople}
+        {tag1}
+        {tag2}
+        {tag3}
+        {difficulty}
+      </div>
+      <div className="ingredient-list">
+        {ingredientList.map((item) => (
+          <div key={item.id} value={item.name}>
+            {item.name}, {item.quantity} {item.unit}
+          </div>
+        ))}
+      </div>
+      <div className="instruction-list">
+        {instructionList.map((item) => (
+          <div key={item.id}>
+            <span>{item.name}</span>
+          </div>
+        ))}
+      </div>
+      <button type="submit" onClick={() => handlePost()}>
         Poster la recette
       </button>
     </div>

frontend/src/pages/CreateRecipe.jsx

@@ -15,7 +15,7 @@ import Step4 from "../components/Step4";
 
 const steps = [
   "Nom, photo et description",
-  "Ingrédients et matériel",
+  "Ingrédients",
   "Instructions",
   "Confirmation",
 ];
@@ -103,7 +103,7 @@ export default function CreateRecipe() {
         </Button>
         <Box sx={{ flex: "1 1 auto" }} />
         {activeStep === steps.length - 1 ? (
-          <Button onClick={handleNext}>GO NAM NAM !</Button>
+          ""
         ) : (
           <Button onClick={handleNext}>SUIVANT</Button>
         )}