S06 us14 - DO NOT DELETE BRANCH

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

@@ -3,59 +3,98 @@ import PropTypes from "prop-types";
 import TextField from "@mui/material/TextField";
 import MenuItem from "@mui/material/MenuItem";
 import Button from "@mui/material/Button";
-import { useRecipeCreation } from "../contexts/RecipeCreationContext";
 import { useIngredientCreation } from "../contexts/IngredientCreationContext";
 
-function Step2({ ingredient }) {
-  const { recipeCreation } = useRecipeCreation();
-  console.info(recipeCreation);
+export default function Step2({ ingredient }) {
+  const { setIngredientList, ingredientList } = useIngredientCreation();
 
-  const { ingredientCreation, handleChangeCreation } = useIngredientCreation();
-  console.info(ingredientCreation);
-
-  const [ingredientsFields, setIngredientsFields] = React.useState([]);
+  // eslint-disable-next-line no-unused-vars
+  const [addIngredient, setAddIngredient] = React.useState([]);
+  const [ingredientName, setIngredientName] = React.useState("");
+  const [quantity, setQuantity] = React.useState("");
+  const [unit, setUnit] = React.useState("");
   const handleAddIngredient = () => {
-    const ingredientsArray = [...ingredientsFields, []];
-    setIngredientsFields(ingredientsArray);
+    const ingredientToAdd = {
+      id: ingredientList.length,
+      name: ingredientName,
+      quantity,
+      unit,
+    };
+    setAddIngredient((prev) => [...prev, ingredientToAdd]);
+    setIngredientList((prev) => [...prev, ingredientToAdd]);
+  };
+  const handleReset = () => {
+    setIngredientName("");
+    setQuantity("");
+    setUnit("");
+  };
+
+  const handleDeleteIngredient = (id) => {
+    setIngredientList(ingredientList.filter((object) => object.id !== id));
+  };
+
+  console.info(ingredientList);
+  const combineHandler = async () => {
+    handleReset();
+    await handleAddIngredient();
   };
 
   return (
     <div>
       <h1>Step 2</h1>
-      <Button onClick={() => handleAddIngredient()}>
-        {" "}
-        Ajouter un ingrédient
-      </Button>
-      {ingredientsFields.map((ingredientField, index) => (
-        <>
-          <TextField
-            id={index}
-            label="Ingrédient"
-            select
-            helperText="Choisissez un ingrédient"
-            variant="filled"
-            value={ingredientCreation.ingredientName}
-            onChange={handleChangeCreation}
-            name="ingredientName"
-          >
-            {ingredient.map((option) => (
-              <MenuItem key={option.id} value={option.name}>
-                {option.name}
-              </MenuItem>
-            ))}
-          </TextField>
-          <TextField
-            id="Quantité"
-            label="Quantité"
-            helperText="Quantité requise pour la recette"
-            variant="filled"
-            value={ingredientCreation.quantity}
-            onChange={handleChangeCreation}
-            name="quantity"
-          />
-          <p> {ingredient.unit}</p>
-        </>
-      ))}
+      <TextField
+        className="quantity"
+        id="Quantité"
+        label="Quantité"
+        helperText="Quantité requise pour la recette"
+        variant="filled"
+        value={quantity}
+        onChange={(e) => setQuantity(e.target.value)}
+        name="quantity"
+      />
+      <TextField
+        className="unit"
+        id="Unité"
+        label="Unité"
+        helperText="L'unité de mesure de l'ingrédient"
+        variant="filled"
+        value={unit}
+        onChange={(e) => setUnit(e.target.value)}
+        name=" unit"
+      />
+      <TextField
+        className="Ingredient"
+        id="ingrédient"
+        label="Ingrédient"
+        select
+        helperText="Choisissez un ingrédient"
+        variant="filled"
+        value={ingredientName}
+        onChange={(e) => setIngredientName(e.target.value)}
+        name="ingredient"
+      >
+        {ingredient.map((option) => (
+          <MenuItem key={option.id} value={option.name}>
+            {option.name}
+          </MenuItem>
+        ))}
+      </TextField>
+      <Button onClick={() => combineHandler()}> Ajouter l'ingrédient</Button>
+      <div className="ingredient-list">
+        {ingredientList.map((item) => (
+          <div key={item.id}>
+            <span>{item.name}</span>
+            <span style={{ margin: "0 10px" }}>{item.quantity}</span>
+            <span>{item.unit}</span>
+            <button
+              type="button"
+              onClick={() => handleDeleteIngredient(item.id)}
+            >
+              ❌
+            </button>
+          </div>
+        ))}
+      </div>
     </div>
   );
 }
@@ -68,5 +107,3 @@ Step2.propTypes = {
     })
   ).isRequired,
 };
-
-export default Step2;

frontend/src/components/Step3.jsx

@@ -1,25 +1,71 @@
+import React from "react";
+import TextField from "@mui/material/TextField";
+import Button from "@mui/material/Button";
 import { useInstructionCreation } from "../contexts/InstructionCreationContext";
 
-function Step3() {
-  const { instructionCreation, handleChangeCreation } =
-    useInstructionCreation();
-  console.info(instructionCreation);
+export default function Step3() {
+  const { setInstructionList, instructionList } = useInstructionCreation();
+
+  // eslint-disable-next-line no-unused-vars
+  const [addInstruction, setAddInstruction] = React.useState([]);
+  const [description, setDescription] = React.useState("");
+  const handleAddingInstruction = () => {
+    const instructionToAdd = {
+      id: instructionList.length,
+      name: description,
+    };
+    setAddInstruction((prev) => [...prev, instructionToAdd]);
+    setInstructionList((prev) => [...prev, instructionToAdd]);
+  };
+  const handleReset = () => {
+    setDescription("");
+  };
+
+  const handleDeleteInstruction = (id) => {
+    setInstructionList(
+      instructionList.filter((instruction) => instruction.id !== id)
+    );
+  };
+
+  const combineHandler = async () => {
+    handleReset();
+    await handleAddingInstruction();
+  };
+
   return (
     <div>
       <h1>Step 3</h1>
-      <h2>Instructions</h2>
-      <form>
-        <input
-          id="instructtionInput"
-          type="text"
-          name="description"
-          placeholder="instructions"
-          value={instructionCreation.description}
-          onChange={handleChangeCreation}
-        />
-      </form>
+      <TextField
+        className="instruction"
+        id="instruction"
+        maxRows={4}
+        label="instruction"
+        helperText="Instruction"
+        variant="filled"
+        value={description}
+        onChange={(e) => setDescription(e.target.value)}
+        name="quantity"
+      />
+      <Button
+        onClick={() => {
+          combineHandler();
+        }}
+      >
+        Ajouter une instruction
+      </Button>
+      <div className="instruction-list">
+        {instructionList.map((item) => (
+          <div key={item.id}>
+            <span>{item.name}</span>
+            <button
+              type="button"
+              onClick={() => handleDeleteInstruction(item.id)}
+            >
+              ❌
+            </button>
+          </div>
+        ))}
+      </div>
     </div>
   );
 }
-
-export default Step3;