From d438a4105303f6baf93239cfd5922048398eb7df Mon Sep 17 00:00:00 2001
From: TRISTAN ZVUNKA <tristan.zvunka@gmail.com>
Date: Tue, 6 Feb 2024 16:13:47 +0100
Subject: [PATCH] steps ok

---
 frontend/src/components/Step1.jsx          |   6 +-
 frontend/src/components/Step2.jsx          | 108 +++++++++++----------
 frontend/src/components/Step3.jsx          |  50 +++++-----
 frontend/src/components/Step4.jsx          | 101 +++++++++++++------
 frontend/src/pages/CreateRecipe.jsx        |  20 ++--
 frontend/src/pages/style/CreateRecipe.scss | 105 +++++++++++++++++++-
 6 files changed, 274 insertions(+), 116 deletions(-)

diff --git a/frontend/src/components/Step1.jsx b/frontend/src/components/Step1.jsx
index 4b98de6..cdc5460 100644
--- a/frontend/src/components/Step1.jsx
+++ b/frontend/src/components/Step1.jsx
@@ -24,7 +24,11 @@ function Step1({ tag }) {
   return (
     <div className="step-one">
       <div className="step-one-content content-left">
-        <h3> Votre recette commence ici... </h3>
+        <h2>
+          {" "}
+          Veuillez remplir les champs ci-dessous avant de passer à l'étape
+          suivante...{" "}
+        </h2>
         <TextField
           label="Nom de votre recette"
           value={recipeCreation.recipeName}
diff --git a/frontend/src/components/Step2.jsx b/frontend/src/components/Step2.jsx
index 189249c..dad1f75 100644
--- a/frontend/src/components/Step2.jsx
+++ b/frontend/src/components/Step2.jsx
@@ -43,16 +43,7 @@ export default function Step2({ ingredient }) {
       setUnit(ingredientItem.unit);
     }
   };
-  /* const handleInputChange = (e) => {
-    setIngredientName(e.target.value);
-    const ingredientItem = ingredient.find(
-      (item) => item.name === e.target.value
-    );
-    if (ingredientItem) {
-      setKcal(ingredientItem.kcal);
-      setUnit(ingredientItem.unit);
-    }
-  }; */
+
   const handleReset = () => {
     setIngredientName("");
     setQuantity("");
@@ -70,51 +61,62 @@ export default function Step2({ ingredient }) {
   };
 
   return (
-    <div>
-      <h1>Step 2</h1>
-      <Autocomplete
-        value={ingredientName}
-        onChange={handleInputChange}
-        id="ingredient-autocomplete"
-        options={ingredient.map((option) => option.name)}
-        /* eslint-disable-next-line react/jsx-props-no-spreading */
-        renderInput={(params) => <TextField {...params} label="Ingrédient" />}
-      />
-      <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="kcal"
-        id="Kcal"
-        label="Kcal"
-        variant="filled"
-        value={kcal}
-        name="kcal"
-      />
-      <Button onClick={() => combineHandler()}> Ajouter l'ingrédient</Button>
+    <div className="step-two">
+      <h2> Ajouter tous les ingrédients nécessaires... </h2>
+      <div className="selection-div">
+        <Autocomplete
+          className="ingredient-autocomplete"
+          value={ingredientName}
+          onChange={handleInputChange}
+          id="ingredient-autocomplete"
+          options={ingredient.map((option) => option.name)}
+          /* eslint-disable-next-line react/jsx-props-no-spreading */
+          renderInput={(params) => <TextField {...params} label="Ingrédient" />}
+        />
+        <div className="ingredient-selection">
+          <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="kcal"
+            id="Kcal"
+            label="Kcal"
+            variant="filled"
+            value={kcal}
+            name="kcal"
+          />
+          <Button onClick={() => combineHandler()}>
+            {" "}
+            Ajouter l'ingrédient
+          </Button>
+        </div>
+      </div>
       <div className="ingredient-list">
         {ingredientList.map((item) => (
-          <div key={item.index}>
-            <span>{item.name}</span>
-            <span style={{ margin: "0 10px" }}>{item.quantity}</span>
-            <span>{item.unit}</span>
+          <div className="ingredient-item" key={item.index}>
+            <span className="ingredient-span"> - {item.name} : </span>
+            <span className="ingredient-span" style={{ margin: "0 10px" }}>
+              {item.quantity}
+            </span>
+            <span className="ingredient-span">{item.unit}</span>
             <button
               type="button"
               onClick={() => handleDeleteIngredient(item.id)}
diff --git a/frontend/src/components/Step3.jsx b/frontend/src/components/Step3.jsx
index ada91e0..b2dd6b8 100644
--- a/frontend/src/components/Step3.jsx
+++ b/frontend/src/components/Step3.jsx
@@ -33,31 +33,37 @@ export default function Step3() {
   };
 
   return (
-    <div>
-      <h1>Step 3</h1>
-      <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="step-three">
+      <h2>
+        Décrivez les différentes étapes de réalisation de votre recette...
+      </h2>
+      <div className="instruction-content">
+        <TextField
+          className="instruction-field"
+          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>
       <div className="instruction-list">
         {instructionList.map((item) => (
-          <div key={item.id}>
-            <span>{item.name}</span>
+          <div className="instruction-item" key={item.id}>
+            <span> Instruction n°{item.id + 1}</span>
+            <span className="instruction-span-desc">{item.name}</span>
             <button
+              className="delete-instruction"
               type="button"
               onClick={() => handleDeleteInstruction(item.id)}
             >
diff --git a/frontend/src/components/Step4.jsx b/frontend/src/components/Step4.jsx
index 14def77..c0834fd 100644
--- a/frontend/src/components/Step4.jsx
+++ b/frontend/src/components/Step4.jsx
@@ -11,6 +11,7 @@ function Step4() {
   const { recipeCreation } = useRecipeCreation();
   const [insertId, setInsertId] = useState(null);
   const [selectedFile, setSelectedFile] = useState(null);
+  const [selectedFileUrl, setselectedFileUrl] = useState(null);
 
   console.info({ ingredientList, instructionList, recipeCreation, insertId });
 
@@ -35,6 +36,17 @@ function Step4() {
   const handleFileInput = (e) => {
     setSelectedFile(e.target.files[0]);
   };
+  const handleImageUpload = (e) => {
+    if (e.target.files && e.target.files[0]) {
+      const imgFile = e.target.files[0];
+      setselectedFileUrl(URL.createObjectURL(imgFile));
+    }
+  };
+
+  const combineImagehandler = (e) => {
+    handleFileInput(e);
+    handleImageUpload(e);
+  };
   const handlePostRecipe = async () => {
     try {
       const formData = new FormData();
@@ -114,37 +126,66 @@ function Step4() {
   }, [insertId]);
 
   return (
-    <div>
-      <h1>Step 4</h1>
-      <Typography>
-        {" "}
-        Sélectionnez une image pour illustrer votre recette !
-      </Typography>
-      <input type="file" onChange={handleFileInput} />
-      <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 className="step-four">
+      <div className="step-four-content">
+        <h1>Vérifiez avant de valider...</h1>
+        <Typography>
+          {" "}
+          Sélectionnez une image pour illustrer votre recette !
+        </Typography>
+        <input type="file" onChange={combineImagehandler} />
+        {selectedFileUrl ? (
+          <img
+            src={selectedFileUrl}
+            alt="Preview"
+            style={{
+              maxWidth: "500px",
+              maxHeight: "500px",
+              objectFit: "cover",
+            }}
+          />
+        ) : null}
+        <div className="recipe-name">
+          <span className="item-span-title">
+            {" "}
+            Nom de la recette : {recipeName}{" "}
+          </span>
+          <span className="item-span-desc"> Description: {recipeDesc} </span>
+          <span className="item-span-prop">
+            {" "}
+            Temps de préparation: {prepTime}{" "}
+          </span>
+          <span className="item-span-prop">
+            {" "}
+            Nombre de participants: {nbPeople}{" "}
+          </span>
+          <span className="item-span-prop"> Tag 1: {tag1} </span>
+          <span className="item-span-prop"> Tag 2: {tag2} </span>
+          <span className="item-span-prop"> Tag 3: {tag3} </span>
+          <span className="item-span-prop"> Difficulté: {difficulty} </span>
+        </div>
+        <div className="ingredient-list">
+          <span className="ingredients-title">Ingrédients: </span>
+          {ingredientList.map((item) => (
+            <div key={item.id} value={item.name}>
+              - {item.name}, {item.quantity} {item.unit}
+            </div>
+          ))}
+        </div>
+        <div className="instruction-list">
+          <span className="instructions-title">Instructions: </span>
+          {instructionList.map((item) => (
+            <div key={item.id}>
+              <span> - {item.name}</span>
+            </div>
+          ))}
+        </div>
       </div>
-      <button type="submit" onClick={() => handlePostRecipe()}>
+      <button
+        className="submit-recipe"
+        type="submit"
+        onClick={() => handlePostRecipe()}
+      >
         Poster la recette
       </button>
     </div>
diff --git a/frontend/src/pages/CreateRecipe.jsx b/frontend/src/pages/CreateRecipe.jsx
index e5708d8..fad617d 100644
--- a/frontend/src/pages/CreateRecipe.jsx
+++ b/frontend/src/pages/CreateRecipe.jsx
@@ -61,15 +61,17 @@ export default function CreateRecipe() {
   return (
     <div className="body-content create-page">
       <Box>
-        <Stepper activeStep={activeStep}>
-          {steps.map((label) => {
-            return (
-              <Step key={label}>
-                <StepLabel>{label}</StepLabel>
-              </Step>
-            );
-          })}
-        </Stepper>
+        <div className="stepper">
+          <Stepper activeStep={activeStep}>
+            {steps.map((label) => {
+              return (
+                <Step key={label}>
+                  <StepLabel>{label}</StepLabel>
+                </Step>
+              );
+            })}
+          </Stepper>
+        </div>
         {activeStep > 3 && (
           <>
             <Typography sx={{ mt: 2, mb: 1 }}>
diff --git a/frontend/src/pages/style/CreateRecipe.scss b/frontend/src/pages/style/CreateRecipe.scss
index 950b9c6..cff373a 100644
--- a/frontend/src/pages/style/CreateRecipe.scss
+++ b/frontend/src/pages/style/CreateRecipe.scss
@@ -27,8 +27,111 @@
   .content-right {
     margin-top: 5.25rem;
   }
-}
 
+  .step-two {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    width: 100%;
+    gap: 2rem;
+  }
+  .selection-div {
+    display: flex;
+    justify-content: space-between;
+    gap: 1.45rem;
+    align-items: center;
+  }
+  .ingredient-autocomplete {
+    width: 49%;
+  }
+  .ingredient-list {
+    display: flex;
+    flex-direction: column;
+  }
+  .ingredient-item {
+    display: flex;
+    justify-content: space-between;
+    width: 25%;
+    margin-left: 10%;
+    margin-right: 30%;
+    margin-top: 1rem;
+    padding: 0.5rem;
+  }
+  .ingredient-span {
+    font-size: 1.25rem;
+  }
+  .step-three {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    width: 100%;
+    gap: 2rem;
+  }
+  .instruction-content {
+    display: flex;
+    justify-content: space-between;
+    gap: 1.45rem;
+    align-items: center;
+  }
+  .instruction-field {
+    width: 100%;
+  }
+  .instruction-item {
+    display: flex;
+    justify-content: space-between;
+    width: 80%;
+    margin-left: 10%;
+    margin-right: 30%;
+    margin-top: 1rem;
+    padding: 0.5rem;
+    gap: 1rem;
+  }
+  .ingredient-span {
+    font-size: 1.25rem;
+  }
+  .instruction-span-desc {
+    font-size: 1.25rem;
+  }
+  .step-four-content {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    width: 100%;
+    gap: 2rem;
+  }
+  .submit-recipe {
+    margin-top: 2rem;
+  }
+  .instructions-title {
+    margin-top: 0.5rem;
+    font-size: 1.75rem;
+    margin-bottom: 0.5rem;
+  }
+  .ingredients-title {
+    margin-top: 0.5rem;
+    font-size: 1.75rem;
+    margin-bottom: 0.5rem;
+  }
+  .recipe-name {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    font-size: 1rem;
+  }
+}
 .steps {
   margin-top: 2rem;
 }
+@media screen and (max-width: 800px) {
+  .body-content.create-page {
+    width: 100vw;
+  }
+  .stepper {
+    visibility: hidden;
+  }
+  .step-one {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+}