From 82f11413a94b8a6ecabcbe0301e32970214896a9 Mon Sep 17 00:00:00 2001
From: Karim Gharbi <gharbi.karim@outlook.de>
Date: Sun, 9 Jun 2024 16:55:26 +0200
Subject: [PATCH] Bug fix

---
 frontend/src/components/recipeUpload/recipeUpload.css | 8 +++++++-
 frontend/src/components/recipeUpload/recipeUpload.tsx | 9 +++++----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/recipeUpload/recipeUpload.css b/frontend/src/components/recipeUpload/recipeUpload.css
index 4d45cde..3a9aa93 100644
--- a/frontend/src/components/recipeUpload/recipeUpload.css
+++ b/frontend/src/components/recipeUpload/recipeUpload.css
@@ -445,6 +445,7 @@ body {
     top: -35px;
     left: 10px;
     text-transform: uppercase;
+    width: 5%;
   }
   
   .form-container .form-groupIngredient input {
@@ -580,7 +581,6 @@ body {
     font-weight: 700;
     font-size: 16px;
     text-transform: uppercase;
-    
   }
   
   .form-container .form-groupCategory input {
@@ -662,3 +662,9 @@ body {
     justify-content: right;
   }
   
+#stepsLabel{
+  z-index: 1;
+  float: left;
+  width: 10%;
+  max-width: 10%;
+}
\ No newline at end of file
diff --git a/frontend/src/components/recipeUpload/recipeUpload.tsx b/frontend/src/components/recipeUpload/recipeUpload.tsx
index b15ce34..353741f 100644
--- a/frontend/src/components/recipeUpload/recipeUpload.tsx
+++ b/frontend/src/components/recipeUpload/recipeUpload.tsx
@@ -11,9 +11,8 @@ export default function Body(){
   const [timeEffort, settimeeffort] = useState('');
   const [stars, setstars] = useState('');
   const [description, setdescription] = useState('');
-  const [ingredients, setIngredients] = useState(Array(10).fill(''));
-  const [steps, setSteps] = useState(Array(10).fill(''));
-  //const [calories, setcalories] = useState('');
+  const [ingredients, setIngredients] = useState<string[]>([]);
+  const [steps, setSteps] = useState<string[]>([]);
   const [file, setFile] = useState<File | null>(null);
 
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -81,6 +80,8 @@ export default function Body(){
     formData.append('recipetimeeffort', timeEffort);
     formData.append('recipestars', stars);
     formData.append('recipedescription', description);
+    formData.append('recipeingredients', JSON.stringify(ingredients));
+    formData.append('recipesteps', JSON.stringify(steps));
     if (file) {
         formData.append('recipepicture', file);
     }
@@ -202,7 +203,7 @@ return (
       <div id='blocker1'></div>
       
       <div className="form-groupIngredient">
-        <label htmlFor="ingredientInput">Steps</label>
+        <label className="stepsLabel" htmlFor="ingredientInput">Steps</label>
         {[...Array(stepCounter)].map((_, index) => (
           <div key={index}>
             <input