diff --git a/frontend/src/components/Step1.jsx b/frontend/src/components/Step1.jsx
index 3c7d2a7..49a52f2 100644
--- a/frontend/src/components/Step1.jsx
+++ b/frontend/src/components/Step1.jsx
@@ -1,9 +1,19 @@
-function Step1() {
+import PropTypes from "prop-types";
+
+function Step1({ name, image, description }) {
return (
-
Step 1
+
Step 1
+
{name}
+
{image}
+
{description}
);
}
+Step1.propTypes = {
+ name: PropTypes.string.isRequired,
+ image: PropTypes.string.isRequired,
+ description: PropTypes.string.isRequired,
+};
export default Step1;
diff --git a/frontend/src/components/Step2.jsx b/frontend/src/components/Step2.jsx
index 10d4bb6..25188cb 100644
--- a/frontend/src/components/Step2.jsx
+++ b/frontend/src/components/Step2.jsx
@@ -1,9 +1,41 @@
-function Step2() {
+import PropTypes from "prop-types";
+
+function Step2({ ingredient, material }) {
return (
-
Step 1
+
Step 2
+
+
+
+
+
+
);
}
+Step2.propTypes = {
+ ingredient: PropTypes.string.isRequired,
+ material: PropTypes.string.isRequired,
+};
export default Step2;
diff --git a/frontend/src/components/Step3.jsx b/frontend/src/components/Step3.jsx
index d368f3f..a04f996 100644
--- a/frontend/src/components/Step3.jsx
+++ b/frontend/src/components/Step3.jsx
@@ -1,9 +1,24 @@
-function Step3() {
+import PropTypes from "prop-types";
+
+function Step3({ instruction }) {
return (
-
Step 1
+ Step 3
+ Instructions
+
);
}
+Step3.propTypes = {
+ instruction: PropTypes.string.isRequired,
+};
export default Step3;
diff --git a/frontend/src/components/Step4.jsx b/frontend/src/components/Step4.jsx
index 89100ba..03d9a70 100644
--- a/frontend/src/components/Step4.jsx
+++ b/frontend/src/components/Step4.jsx
@@ -1,9 +1,17 @@
-function Step4() {
+import PropTypes from "prop-types";
+
+function Step4({ post }) {
return (
-
Step 1
+ Step 4
+
);
}
+Step4.propTypes = {
+ post: PropTypes.func.isRequired,
+};
export default Step4;
diff --git a/frontend/src/pages/CreateRecipe.jsx b/frontend/src/pages/CreateRecipe.jsx
index f5199c3..f899f15 100644
--- a/frontend/src/pages/CreateRecipe.jsx
+++ b/frontend/src/pages/CreateRecipe.jsx
@@ -1,4 +1,6 @@
+import axios from "axios";
import * as React from "react";
+import { useEffect } from "react";
import Box from "@mui/material/Box";
import Stepper from "@mui/material/Stepper";
import Step from "@mui/material/Step";
@@ -6,15 +8,42 @@ import StepLabel from "@mui/material/StepLabel";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
+import Step1 from "../components/Step1";
+import Step2 from "../components/Step2";
+import Step3 from "../components/Step3";
+import Step4 from "../components/Step4";
+
const steps = [
"Nom, photo et description",
"Ingrédients et matériel",
- " Instructions",
+ "Instructions",
"Confirmation",
];
export default function CreateRecipe() {
const [activeStep, setActiveStep] = React.useState(0);
+ const [allIngredients, setAllIngredients] = React.useState([]);
+ const [allMaterials, setAllMaterials] = React.useState([]);
+ const [allTags, setAllTags] = React.useState([]);
+ const getData = () => {
+ const endpoints = [
+ "http://localhost:3310/api/ingredients",
+ "http://localhost:3310/api/materials",
+ "http://localhost:3310/api/tags",
+ ];
+ Promise.all(endpoints.map((endpoint) => axios.get(endpoint))).then(
+ ([{ data: ingredients }, { data: materials }, { data: tags }]) => {
+ setAllIngredients(ingredients);
+ setAllMaterials(materials);
+ setAllTags(tags);
+ }
+ );
+ };
+
+ useEffect(() => {
+ getData();
+ }, []);
+
const handleNext = () => {
setActiveStep((prevActiveStep) => prevActiveStep + 1);
};
@@ -26,48 +55,61 @@ export default function CreateRecipe() {
};
return (
-
-
- {steps.map((label) => {
- return (
-
- {label}
-
- );
- })}
-
- {activeStep > 3 ? (
- <>
-
- Recette créée avec succès ! Elle sera prochainement validé par nos
- modérateurs.
-
-
-
-
-
- >
- ) : (
- <>
- Step {activeStep + 1}
-
-
-
- {activeStep === steps.length - 1 ? (
-
- ) : (
-
- )}
-
- >
- )}
-
+
+
+
+ {steps.map((label) => {
+ return (
+
+ {label}
+
+ );
+ })}
+
+ {activeStep > 3 ? (
+ <>
+
+ Recette créée avec succès ! Elle sera prochainement validée par
+ nos modérateurs.
+
+
+
+
+
+ >
+ ) : (
+ <>
+ Step {activeStep + 1}
+
+
+
+ {activeStep === steps.length - 1 ? (
+
+ ) : (
+
+ )}
+
+ >
+ )}
+ if (activeStep === 0)
+
+ else if (activeStep === 1)
+
+ else if (activeStep === 2)
+
+ else if (activeStep === 3)
+ ;
+
+
);
}