add steps, modified stepper

frontend/src/components/Step1.jsx

@@ -1,9 +1,19 @@
-function Step1() {
+import PropTypes from "prop-types";
+
+function Step1({ name, image, description }) {
   return (
     <div>
-      <h1>Step 1</h1>
+      <p>Step 1</p>
+      <p>{name}</p>
+      <p>{image}</p>
+      <p>{description}</p>
     </div>
   );
 }
+Step1.propTypes = {
+  name: PropTypes.string.isRequired,
+  image: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+};
 
 export default Step1;

frontend/src/components/Step2.jsx

@@ -1,9 +1,41 @@
-function Step2() {
+import PropTypes from "prop-types";
+
+function Step2({ ingredient, material }) {
   return (
     <div>
-      <h1>Step 1</h1>
+      <h1>Step 2</h1>
+      <div>
+        <label htmlFor="select-ingredient">
+          <select id="select-ingredient">
+            <option value="">Choisir son ingredient :</option>
+            {ingredient &&
+              ingredient.map((ingr) => (
+                <option key={ingr.ID} value={ingr.name}>
+                  {ingr.name} {ingr.kcal} {ingr.unit}
+                </option>
+              ))}
+          </select>
+        </label>
+      </div>
+      <div>
+        <label htmlFor="select-material">
+          <select id="select-material">
+            <option value="">Choisir son materiel :</option>
+            {material &&
+              material.map((mate) => (
+                <option key={mate.ID} value={mate.name}>
+                  {mate.name}
+                </option>
+              ))}
+          </select>
+        </label>
+      </div>
     </div>
   );
 }
+Step2.propTypes = {
+  ingredient: PropTypes.string.isRequired,
+  material: PropTypes.string.isRequired,
+};
 
 export default Step2;

frontend/src/components/Step3.jsx

@@ -1,9 +1,24 @@
-function Step3() {
+import PropTypes from "prop-types";
+
+function Step3({ instruction }) {
   return (
     <div>
-      <h1>Step 1</h1>
+      <h1>Step 3</h1>
+      <h2>Instructions</h2>
+      <form>
+        <input
+          id="instructtionInput"
+          type="text"
+          name="instruction"
+          placeholder="instructions"
+          value={instruction}
+        />
+      </form>
     </div>
   );
 }
+Step3.propTypes = {
+  instruction: PropTypes.string.isRequired,
+};
 
 export default Step3;

frontend/src/components/Step4.jsx

@@ -1,9 +1,17 @@
-function Step4() {
+import PropTypes from "prop-types";
+
+function Step4({ post }) {
   return (
     <div>
-      <h1>Step 1</h1>
+      <h1>Step 4</h1>
+      <button type="submit" onClick={post}>
+        Poster la recette
+      </button>
     </div>
   );
 }
+Step4.propTypes = {
+  post: PropTypes.func.isRequired,
+};
 
 export default Step4;

frontend/src/pages/CreateRecipe.jsx

@@ -1,20 +1,49 @@
+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";
 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 (
-    <Box className="body-content" sx={{ width: "100%" }}>
-      <Stepper activeStep={activeStep}>
-        {steps.map((label) => {
-          return (
-            <Step key={label}>
-              <StepLabel>{label}</StepLabel>
-            </Step>
-          );
-        })}
-      </Stepper>
-      {activeStep > 3 ? (
-        <>
-          <Typography sx={{ mt: 2, mb: 1 }}>
-            Recette créée avec succès ! Elle sera prochainement validé par nos
-            modérateurs.
-          </Typography>
-          <Box sx={{ display: "flex", flexDirection: "row", pt: 2 }}>
-            <Box sx={{ flex: "1 1 auto" }} />
-            <Button onClick={handleReset}> Un doute ? Recommencez </Button>
-          </Box>
-        </>
-      ) : (
-        <>
-          <Typography sx={{ mt: 2, mb: 1 }}>Step {activeStep + 1}</Typography>
-          <Box sx={{ display: "flex", flexDirection: "row", pt: 2 }}>
-            <Button
-              color="inherit"
-              disabled={activeStep === 0}
-              onClick={handleBack}
-              sx={{ mr: 1 }}
-            >
-              RETOUR
-            </Button>
-            <Box sx={{ flex: "1 1 auto" }} />
-            {activeStep === steps.length - 1 ? (
-              <Button onClick={handleNext}>GO NAM NAM !</Button>
-            ) : (
-              <Button onClick={handleNext}>SUIVANT</Button>
-            )}
-          </Box>
-        </>
-      )}
-    </Box>
+    <div className="Cards">
+      <Box className="body-content" sx={{ width: "100%" }}>
+        <Stepper activeStep={activeStep}>
+          {steps.map((label) => {
+            return (
+              <Step key={label}>
+                <StepLabel>{label}</StepLabel>
+              </Step>
+            );
+          })}
+        </Stepper>
+        {activeStep > 3 ? (
+          <>
+            <Typography sx={{ mt: 2, mb: 1 }}>
+              Recette créée avec succès ! Elle sera prochainement validée par
+              nos modérateurs.
+            </Typography>
+            <Box sx={{ display: "flex", flexDirection: "row", pt: 2 }}>
+              <Box sx={{ flex: "1 1 auto" }} />
+              <Button onClick={handleReset}>
+                {" "}
+                Je veux en créer une autre !{" "}
+              </Button>
+            </Box>
+          </>
+        ) : (
+          <>
+            <Typography sx={{ mt: 2, mb: 1 }}>Step {activeStep + 1}</Typography>
+            <Box sx={{ display: "flex", flexDirection: "row", pt: 2 }}>
+              <Button
+                color="inherit"
+                disabled={activeStep === 0}
+                onClick={handleBack}
+                sx={{ mr: 1 }}
+              >
+                RETOUR
+              </Button>
+              <Box sx={{ flex: "1 1 auto" }} />
+              {activeStep === steps.length - 1 ? (
+                <Button onClick={handleNext}>GO NAM NAM !</Button>
+              ) : (
+                <Button onClick={handleNext}>SUIVANT</Button>
+              )}
+            </Box>
+          </>
+        )}
+        if (activeStep === 0)
+        <Step1 tag={allTags} />
+        else if (activeStep === 1)
+        <Step2 ingredient={allIngredients} material={allMaterials} />
+        else if (activeStep === 2)
+        <Step3 />
+        else if (activeStep === 3)
+        <Step4 />;
+      </Box>
+    </div>
   );
 }