From b630b34731db1a261a471ca3a9b05ee21dc93dac Mon Sep 17 00:00:00 2001 From: TRISTAN ZVUNKA Date: Thu, 25 Jan 2024 21:44:59 +0100 Subject: [PATCH 1/4] step 2 & 3 ok --- frontend/src/components/Step2.jsx | 106 ++++++++++-------- frontend/src/components/Step3.jsx | 55 ++++++--- .../contexts/IngredientCreationContext.jsx | 21 +--- .../contexts/InstructionCreationContext.jsx | 15 +-- 4 files changed, 109 insertions(+), 88 deletions(-) diff --git a/frontend/src/components/Step2.jsx b/frontend/src/components/Step2.jsx index 1ae46fa..a569ce2 100644 --- a/frontend/src/components/Step2.jsx +++ b/frontend/src/components/Step2.jsx @@ -3,59 +3,79 @@ 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([]); + 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 = { + name: ingredientName, + quantity, + unit, + }; + setAddIngredient((prev) => [...prev, ingredientToAdd]); + setIngredientList((prev) => [...prev, ingredientToAdd]); }; - + console.info(addIngredient); return (

Step 2

+ setQuantity(e.target.value)} + name="quantity" + /> + setUnit(e.target.value)} + name=" unit" + /> + setIngredientName(e.target.value)} + name="ingredient" + > + {ingredient.map((option) => ( + + {option.name} + + ))} + - {ingredientsFields.map((ingredientField, index) => ( - <> - - {ingredient.map((option) => ( - - {option.name} - - ))} - - -

{ingredient.unit}

- - ))} +
+ {ingredientList.map((item) => ( +
+ {item.name} + {item.quantity} + {item.unit} + +
+ ))} +
); } @@ -68,5 +88,3 @@ Step2.propTypes = { }) ).isRequired, }; - -export default Step2; diff --git a/frontend/src/components/Step3.jsx b/frontend/src/components/Step3.jsx index f47c6ce..86b60e4 100644 --- a/frontend/src/components/Step3.jsx +++ b/frontend/src/components/Step3.jsx @@ -1,25 +1,46 @@ +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(); + + const [addInstruction, setAddInstruction] = React.useState([]); + const [description, setDescription] = React.useState(""); + const handleAddingInstruction = () => { + const instructionToAdd = { + name: description, + }; + setAddInstruction((prev) => [...prev, instructionToAdd]); + setInstructionList((prev) => [...prev, instructionToAdd]); + }; + console.info(addInstruction); return (

Step 3

-

Instructions

-
- -
+ setDescription(e.target.value)} + name="quantity" + /> + +
+ {instructionList.map((item) => ( +
+ {item.name} + +
+ ))} +
); } - -export default Step3; diff --git a/frontend/src/contexts/IngredientCreationContext.jsx b/frontend/src/contexts/IngredientCreationContext.jsx index 6bf3dcf..b616bdb 100644 --- a/frontend/src/contexts/IngredientCreationContext.jsx +++ b/frontend/src/contexts/IngredientCreationContext.jsx @@ -6,23 +6,14 @@ export const useIngredientCreation = () => useContext(IngredientCreationContext); export function IngredientProvider({ children }) { - const [ingredientCreation, setIngredientCreation] = useState({ - ingredientName: "", - kcal: "", - unit: "", - quantity: "", - }); - - const handleChangeCreation = (e) => { - setIngredientCreation({ - ...ingredientCreation, - [e.target.name]: e.target.value, - }); - }; + const [ingredientList, setIngredientList] = useState([]); const value = useMemo(() => { - return { ingredientCreation, handleChangeCreation }; - }, [ingredientCreation, handleChangeCreation]); + return { + ingredientList, + setIngredientList, + }; + }, [ingredientList, setIngredientList]); return ( diff --git a/frontend/src/contexts/InstructionCreationContext.jsx b/frontend/src/contexts/InstructionCreationContext.jsx index afc1760..d4d4729 100644 --- a/frontend/src/contexts/InstructionCreationContext.jsx +++ b/frontend/src/contexts/InstructionCreationContext.jsx @@ -6,20 +6,11 @@ export const useInstructionCreation = () => useContext(InstructionCreationContext); export function InstructionProvider({ children }) { - const [instructionCreation, setInstructionCreation] = useState({ - description: "", - }); - - const handleChangeCreation = (e) => { - setInstructionCreation({ - ...instructionCreation, - [e.target.name]: e.target.value, - }); - }; + const [instructionList, setInstructionList] = useState([]); const value = useMemo(() => { - return { instructionCreation, handleChangeCreation }; - }, [instructionCreation, handleChangeCreation]); + return { instructionList, setInstructionList }; + }, [instructionList, setInstructionList]); return ( From 03c90ba38d7eb2c45b7a7e9cacadc605d073d2df Mon Sep 17 00:00:00 2001 From: Elie Rakoto Date: Fri, 26 Jan 2024 08:47:24 +0100 Subject: [PATCH 2/4] fix --- frontend/src/components/Step4.jsx | 40 +++++++++++++++++++++++-------- 1 file changed, 30 insertions(+), 10 deletions(-) diff --git a/frontend/src/components/Step4.jsx b/frontend/src/components/Step4.jsx index 666c2a1..aadc810 100644 --- a/frontend/src/components/Step4.jsx +++ b/frontend/src/components/Step4.jsx @@ -1,26 +1,46 @@ -import PropTypes from "prop-types"; +import axios from "axios"; import { useIngredientCreation } from "../contexts/IngredientCreationContext"; import { useInstructionCreation } from "../contexts/InstructionCreationContext"; import { useRecipeCreation } from "../contexts/RecipeCreationContext"; -function Step4({ post }) { - const { ingredientCreation } = useIngredientCreation(); - const { instructionCreation } = useInstructionCreation(); +function Step4() { + const { ingredientList } = useIngredientCreation(); + const { instructionList } = useInstructionCreation(); const { recipeCreation } = useRecipeCreation(); - console.info(ingredientCreation); - console.info(instructionCreation); + console.info(ingredientList); + console.info(instructionList); console.info(recipeCreation); + + const Post = () => { + axios + .post( + `${import.meta.env.VITE_BACKEND_URL}/api/recipes`, + { + name: recipeCreation.recipeName, + title: recipeCreation.recipeDesc, + prep_time: recipeCreation.prepTime, + nb_people: recipeCreation.nbPeople, + tag1: recipeCreation.tag1, + tag2: recipeCreation.tag2, + tag3: recipeCreation.tag3, + difficulty: recipeCreation.difficulty, + }, + { + withCredentials: true, + } + ) + .then((res) => res.status(201)) + .catch((err) => console.error(err)); + }; + return (

Step 4

-
); } -Step4.propTypes = { - post: PropTypes.func.isRequired, -}; export default Step4; From 081b277297918a01fa2869975fa7b9fcc170a6d5 Mon Sep 17 00:00:00 2001 From: TRISTAN ZVUNKA Date: Fri, 26 Jan 2024 09:29:34 +0100 Subject: [PATCH 3/4] added infos in steps --- frontend/src/components/Step2.jsx | 18 +++++-- frontend/src/components/Step3.jsx | 17 ++++++- frontend/src/components/Step4.jsx | 26 ++++++---- .../contexts/InstructionCreationContext.jsx | 6 ++- frontend/src/pages/CreateRecipe.jsx | 48 +++++++++---------- 5 files changed, 73 insertions(+), 42 deletions(-) diff --git a/frontend/src/components/Step2.jsx b/frontend/src/components/Step2.jsx index a569ce2..d4b1df0 100644 --- a/frontend/src/components/Step2.jsx +++ b/frontend/src/components/Step2.jsx @@ -8,6 +8,7 @@ import { useIngredientCreation } from "../contexts/IngredientCreationContext"; export default function Step2({ ingredient }) { const { setIngredientList, ingredientList } = useIngredientCreation(); + // eslint-disable-next-line no-unused-vars const [addIngredient, setAddIngredient] = React.useState([]); const [ingredientName, setIngredientName] = React.useState(""); const [quantity, setQuantity] = React.useState(""); @@ -21,7 +22,17 @@ export default function Step2({ ingredient }) { setAddIngredient((prev) => [...prev, ingredientToAdd]); setIngredientList((prev) => [...prev, ingredientToAdd]); }; - console.info(addIngredient); + const handleReset = () => { + setIngredientName(""); + setQuantity(""); + setUnit(""); + }; + + const combineHandler = async () => { + handleReset(); + await handleAddIngredient(); + }; + return (

Step 2

@@ -62,10 +73,7 @@ export default function Step2({ ingredient }) { ))} - +
{ingredientList.map((item) => (
diff --git a/frontend/src/components/Step3.jsx b/frontend/src/components/Step3.jsx index 86b60e4..631ae45 100644 --- a/frontend/src/components/Step3.jsx +++ b/frontend/src/components/Step3.jsx @@ -6,6 +6,7 @@ import { useInstructionCreation } from "../contexts/InstructionCreationContext"; 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 = () => { @@ -15,7 +16,15 @@ export default function Step3() { setAddInstruction((prev) => [...prev, instructionToAdd]); setInstructionList((prev) => [...prev, instructionToAdd]); }; - console.info(addInstruction); + const handleReset = () => { + setDescription(""); + }; + + const combineHandler = async () => { + handleReset(); + await handleAddingInstruction(); + }; + return (

Step 3

@@ -30,7 +39,11 @@ export default function Step3() { onChange={(e) => setDescription(e.target.value)} name="quantity" /> -
diff --git a/frontend/src/components/Step4.jsx b/frontend/src/components/Step4.jsx index aadc810..d2e8095 100644 --- a/frontend/src/components/Step4.jsx +++ b/frontend/src/components/Step4.jsx @@ -10,20 +10,30 @@ function Step4() { console.info(ingredientList); console.info(instructionList); console.info(recipeCreation); + const { + recipeName, + recipeDesc, + prepTime, + nbPeople, + tag1, + tag2, + tag3, + difficulty, + } = recipeCreation; const Post = () => { axios .post( `${import.meta.env.VITE_BACKEND_URL}/api/recipes`, { - name: recipeCreation.recipeName, - title: recipeCreation.recipeDesc, - prep_time: recipeCreation.prepTime, - nb_people: recipeCreation.nbPeople, - tag1: recipeCreation.tag1, - tag2: recipeCreation.tag2, - tag3: recipeCreation.tag3, - difficulty: recipeCreation.difficulty, + name: recipeName, + title: recipeDesc, + prep_time: prepTime, + nb_people: nbPeople, + tag1, + tag2, + tag3, + difficulty, }, { withCredentials: true, diff --git a/frontend/src/contexts/InstructionCreationContext.jsx b/frontend/src/contexts/InstructionCreationContext.jsx index d4d4729..3ed5a28 100644 --- a/frontend/src/contexts/InstructionCreationContext.jsx +++ b/frontend/src/contexts/InstructionCreationContext.jsx @@ -9,9 +9,11 @@ export function InstructionProvider({ children }) { const [instructionList, setInstructionList] = useState([]); const value = useMemo(() => { - return { instructionList, setInstructionList }; + return { + instructionList, + setInstructionList, + }; }, [instructionList, setInstructionList]); - return ( {children} diff --git a/frontend/src/pages/CreateRecipe.jsx b/frontend/src/pages/CreateRecipe.jsx index 16c4205..d322d4e 100644 --- a/frontend/src/pages/CreateRecipe.jsx +++ b/frontend/src/pages/CreateRecipe.jsx @@ -83,32 +83,30 @@ export default function CreateRecipe() { ) : ( - <> - Step {activeStep + 1} - - - - {activeStep === steps.length - 1 ? ( - - ) : ( - - )} - - + Step {activeStep + 1} + )} + +
+ {activeStep === 0 && } + {activeStep === 1 && } + {activeStep === 2 && } + {activeStep === 3 && } +
+ + + + {activeStep === steps.length - 1 ? ( + + ) : ( + )} -
- {activeStep === 0 && } - {activeStep === 1 && } - {activeStep === 2 && } - {activeStep === 3 && } -
); From 1367ed2752d5dd4529caa27b4dbd033c1faaebdb Mon Sep 17 00:00:00 2001 From: TRISTAN ZVUNKA Date: Mon, 29 Jan 2024 10:15:13 +0100 Subject: [PATCH 4/4] steps finished --- backend/src/controllers/userControllers.js | 3 +- backend/src/models/UserManager.js | 11 +++- backend/src/router.js | 5 +- frontend/src/components/Step1.jsx | 6 +- frontend/src/components/Step2.jsx | 13 +++- frontend/src/components/Step3.jsx | 14 ++++- frontend/src/components/Step4.jsx | 70 +++++++++++++++------- frontend/src/pages/CreateRecipe.jsx | 4 +- 8 files changed, 90 insertions(+), 36 deletions(-) diff --git a/backend/src/controllers/userControllers.js b/backend/src/controllers/userControllers.js index 2a0b35c..52cc8e2 100644 --- a/backend/src/controllers/userControllers.js +++ b/backend/src/controllers/userControllers.js @@ -40,7 +40,7 @@ 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}`, @@ -48,7 +48,6 @@ const edit = async (req, res, next) => { ); 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); diff --git a/backend/src/models/UserManager.js b/backend/src/models/UserManager.js index 256a275..d6a9d30 100644 --- a/backend/src/models/UserManager.js +++ b/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 diff --git a/backend/src/router.js b/backend/src/router.js index 6c56897..bbc50a4 100644 --- a/backend/src/router.js +++ b/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( diff --git a/frontend/src/components/Step1.jsx b/frontend/src/components/Step1.jsx index ec11233..9eed819 100644 --- a/frontend/src/components/Step1.jsx +++ b/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", }, ]; diff --git a/frontend/src/components/Step2.jsx b/frontend/src/components/Step2.jsx index d4b1df0..498f608 100644 --- a/frontend/src/components/Step2.jsx +++ b/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 }) { {item.name} {item.quantity} {item.unit} - +
))}
diff --git a/frontend/src/components/Step3.jsx b/frontend/src/components/Step3.jsx index 631ae45..ada91e0 100644 --- a/frontend/src/components/Step3.jsx +++ b/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) => (
{item.name} - +
))}
diff --git a/frontend/src/components/Step4.jsx b/frontend/src/components/Step4.jsx index d2e8095..a985218 100644 --- a/frontend/src/components/Step4.jsx +++ b/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 (

Step 4

-
diff --git a/frontend/src/pages/CreateRecipe.jsx b/frontend/src/pages/CreateRecipe.jsx index d322d4e..9cb7b41 100644 --- a/frontend/src/pages/CreateRecipe.jsx +++ b/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() { {activeStep === steps.length - 1 ? ( - + "" ) : ( )}