recipe style

WildCodeSchool-2023-09 · Feb 5, 2024 · 945f26c · 945f26c
1 parent 8344899
commit 945f26c
Show file tree

Hide file tree

Showing 6 changed files with 157 additions and 118 deletions.
diff --git a/backend/public/assets/recipeUploads/23d71ad70273f0f93be7229c2f9c6557-IMG_6281.jpg b/backend/public/assets/recipeUploads/23d71ad70273f0f93be7229c2f9c6557-IMG_6281.jpg
diff --git a/backend/public/assets/recipeUploads/b3c90aba89c9b346250c7379a2645c18-IMG_6281.jpg b/backend/public/assets/recipeUploads/b3c90aba89c9b346250c7379a2645c18-IMG_6281.jpg
diff --git a/backend/src/router.js b/backend/src/router.js
@@ -28,6 +28,21 @@ router.post("/login", AuthControllers.login);
 router.post("/users", AuthMiddleware.hashPwd, UserControllers.add);
 router.get("/verify-token", AuthControllers.verifyToken);
 
+const RecipeControllers = require("./controllers/recipeControllers");
+
+router.get("/recipes", RecipeControllers.browse); // Route to get a list of items
+router.get("/recipes/:id", RecipeControllers.read); // Route to get a specific item by ID
+
+const TagControllers = require("./controllers/tagControllers");
+
+router.get("/tags", TagControllers.browse);
+
+const InstructionControllers = require("./controllers/instructionControllers");
+const IngredientControllers = require("./controllers/ingredientControllers");
+
+router.get("/ingredientbyrecipe/:id", IngredientControllers.readByRecipe); // Route to get ingredients for a specific Recipe
+router.get("/instructionbyrecipe/:id", InstructionControllers.readByRecipe); // Route to get instructions for a specific Recipe
+
 router.use(AuthMiddleware.verifyToken);
 
 router.put(
@@ -55,10 +70,7 @@ router.get("/email/:email", AuthControllers.readByEmail);
 /* ************************************************************************* */
 
 // Import recipeControllers module for handling item-related operations
-const RecipeControllers = require("./controllers/recipeControllers");
 
-router.get("/recipes", RecipeControllers.browse); // Route to get a list of items
-router.get("/recipes/:id", RecipeControllers.read); // Route to get a specific item by ID
 router.get("/recipebyuser/:id", RecipeControllers.readByUser);
 router.post(
   "/recipes",
@@ -70,11 +82,9 @@ router.post(
 /* ************************************************************************* */
 
 // Import ingredientControllers module for handling item-related operations
-const IngredientControllers = require("./controllers/ingredientControllers");
 
 router.get("/ingredients", IngredientControllers.browse); // Route to get a list of items
 router.get("/ingredient/:id", IngredientControllers.read); // Route to get a specific item by ID
-router.get("/ingredientbyrecipe/:id", IngredientControllers.readByRecipe); // Route to get ingredients for a specific Recipe
 router.get("/units", IngredientControllers.browseUnits); // Route to get a list of units
 /* ************************************************************************* */
 // RECIPE_INGREDIENT
@@ -97,10 +107,8 @@ router.get("/commentbyuser/:id", CommentControllers.readByUser); // Route to get
 /* ************************************************************************* */
 
 // Import recipeControllers module for handling item-related operations
-const InstructionControllers = require("./controllers/instructionControllers");
 
 router.get("/instruction/:id", InstructionControllers.read); // Route to get a specific item by ID
-router.get("/instructionbyrecipe/:id", InstructionControllers.readByRecipe); // Route to get instructions for a specific Recipe
 router.post("/instruction", InstructionControllers.add); // Route to get a specific item by ID
 
 /* ************************************************************************* */
@@ -114,13 +122,6 @@ router.get("/favbyrecipe/:id", FavControllers.readByUser); // Route to get a spe
 router.post("/favbyrecipe", FavControllers.add);
 router.delete("/favbyrecipe/:id", FavControllers.destroy);
 
-const TagControllers = require("./controllers/tagControllers");
-
-// Route to get a list of items
-router.get("/users", UserControllers.browse);
-router.get("/recipes", RecipeControllers.browse);
-router.get("/tags", TagControllers.browse);
-
 /* ************************************************************************* */
 
 module.exports = router;
diff --git a/frontend/src/components/Step1.jsx b/frontend/src/components/Step1.jsx
@@ -22,104 +22,108 @@ function Step1({ tag }) {
     },
   ];
   return (
-    <div>
-      <h3> Votre recette commence ici... </h3>
-      <TextField
-        label="Nom de votre recette"
-        value={recipeCreation.recipeName}
-        onChange={handleChangeCreation}
-        variant="filled"
-        name="recipeName"
-      />
-      <TextField
-        label="Description"
-        value={recipeCreation.recipeDesc}
-        onChange={handleChangeCreation}
-        variant="filled"
-        name="recipeDesc"
-        multiline
-        maxRows={4}
-      />
-      <TextField
-        label="Temps de préparation (en minutes)"
-        value={recipeCreation.prepTime}
-        onChange={handleChangeCreation}
-        name="prepTime"
-        variant="filled"
-      />
-      <TextField
-        label="Nombre de personnes"
-        value={recipeCreation.nbPeople}
-        name="nbPeople"
-        onChange={handleChangeCreation}
-        variant="filled"
-        type="number"
-      />
-      <TextField
-        id="Difficulty"
-        select
-        label="Difficulté"
-        defaultValue={difficulties[0].value}
-        helperText="Choisissez la difficulté de votre recette"
-        variant="filled"
-        name="difficulty"
-        onChange={handleChangeCreation}
-      >
-        {difficulties.map((option) => (
-          <MenuItem key={option.value} value={option.value}>
-            {option.label}
-          </MenuItem>
-        ))}
-      </TextField>
-      <TextField
-        key={tag.id}
-        id="Tag1"
-        select
-        label="Tag 1"
-        name="tag1"
-        helperText="Choisissez un tag parmi la liste"
-        variant="filled"
-        onChange={handleChangeCreation}
-      >
-        {tag.map((option) => (
-          <MenuItem key={option.id} value={option.name}>
-            {option.name}
-          </MenuItem>
-        ))}
-      </TextField>
-      <TextField
-        className="tag-selection"
-        key={tag.id}
-        id="Tag2"
-        select
-        label="Tag 2"
-        name="tag2"
-        helperText="Choisissez un tag parmi la liste"
-        variant="filled"
-        onChange={handleChangeCreation}
-      >
-        {tag.map((option) => (
-          <MenuItem key={option.id} value={option.name}>
-            {option.name}
-          </MenuItem>
-        ))}
-      </TextField>
-      <TextField
-        key={tag.id}
-        id="Tag3"
-        select
-        label="Tag 3"
-        name="tag3"
-        helperText="Choisissez un tag parmi la liste"
-        variant="filled"
-        onChange={handleChangeCreation}
-      >
-        {tag.map((option) => (
-          <MenuItem key={option.id} value={option.name}>
-            {option.name}
-          </MenuItem>
-        ))}
-      </TextField>
+    <div className="step-one">
+      <div className="step-one-content content-left">
+        <h3> Votre recette commence ici... </h3>
+        <TextField
+          label="Nom de votre recette"
+          value={recipeCreation.recipeName}
+          onChange={handleChangeCreation}
+          variant="filled"
+          name="recipeName"
+        />
+        <TextField
+          label="Description"
+          value={recipeCreation.recipeDesc}
+          onChange={handleChangeCreation}
+          variant="filled"
+          name="recipeDesc"
+          multiline
+          maxRows={4}
+        />
+        <TextField
+          label="Temps de préparation (en minutes)"
+          value={recipeCreation.prepTime}
+          onChange={handleChangeCreation}
+          name="prepTime"
+          variant="filled"
+        />
+        <TextField
+          label="Nombre de personnes"
+          value={recipeCreation.nbPeople}
+          name="nbPeople"
+          onChange={handleChangeCreation}
+          variant="filled"
+          type="number"
+        />
+      </div>
+      <div className="step-one-content content-right">
+        <TextField
+          id="Difficulty"
+          select
+          label="Difficulté"
+          defaultValue={difficulties[0].value}
+          helperText="Choisissez la difficulté de votre recette"
+          variant="filled"
+          name="difficulty"
+          onChange={handleChangeCreation}
+        >
+          {difficulties.map((option) => (
+            <MenuItem key={option.value} value={option.value}>
+              {option.label}
+            </MenuItem>
+          ))}
+        </TextField>
+        <TextField
+          key={tag.id}
+          id="Tag1"
+          select
+          label="Tag 1"
+          name="tag1"
+          helperText="Choisissez un tag parmi la liste"
+          variant="filled"
+          onChange={handleChangeCreation}
+        >
+          {tag.map((option) => (
+            <MenuItem key={option.id} value={option.name}>
+              {option.name}
+            </MenuItem>
+          ))}
+        </TextField>
+        <TextField
+          className="tag-selection"
+          key={tag.id}
+          id="Tag2"
+          select
+          label="Tag 2"
+          name="tag2"
+          helperText="Choisissez un tag parmi la liste"
+          variant="filled"
+          onChange={handleChangeCreation}
+        >
+          {tag.map((option) => (
+            <MenuItem key={option.id} value={option.name}>
+              {option.name}
+            </MenuItem>
+          ))}
+        </TextField>
+        <TextField
+          key={tag.id}
+          id="Tag3"
+          select
+          label="Tag 3"
+          name="tag3"
+          helperText="Choisissez un tag parmi la liste"
+          variant="filled"
+          onChange={handleChangeCreation}
+        >
+          {tag.map((option) => (
+            <MenuItem key={option.id} value={option.name}>
+              {option.name}
+            </MenuItem>
+          ))}
+        </TextField>
+      </div>
     </div>
   );
 }

diff --git a/frontend/src/pages/CreateRecipe.jsx b/frontend/src/pages/CreateRecipe.jsx
@@ -13,8 +13,10 @@ import Step2 from "../components/Step2";
 import Step3 from "../components/Step3";
 import Step4 from "../components/Step4";
 
+import "./style/CreateRecipe.scss";
+
 const steps = [
-  "Nom, photo et description",
+  "Nom et description",
   "Ingrédients",
   "Instructions",
   "Confirmation",
@@ -57,8 +59,8 @@ export default function CreateRecipe() {
   };
 
   return (
-    <div className="Cards">
-      <Box className="body-content" sx={{ width: "100%" }}>
+    <div className="body-content create-page">
+      <Box>
         <Stepper activeStep={activeStep}>
           {steps.map((label) => {
             return (
@@ -68,7 +70,7 @@ export default function CreateRecipe() {
             );
           })}
         </Stepper>
-        {activeStep > 3 ? (
+        {activeStep > 3 && (
           <>
             <Typography sx={{ mt: 2, mb: 1 }}>
               Recette créée avec succès ! Elle sera prochainement validée par
@@ -82,8 +84,6 @@ export default function CreateRecipe() {
               </Button>
             </Box>
           </>
-        ) : (
-          <Typography sx={{ mt: 2, mb: 1 }}>Step {activeStep + 1}</Typography>
         )}
       </Box>
       <div className="steps">

diff --git a/frontend/src/pages/style/CreateRecipe.scss b/frontend/src/pages/style/CreateRecipe.scss
@@ -0,0 +1,34 @@
+@import "../../vars.scss";
+
+.create-page {
+  display: flex;
+  flex-direction: column;
+  padding: 2rem;
+  background-color: $white-color;
+  border-radius: 2rem;
+
+  .step-one {
+    display: flex;
+    justify-content: space-around;
+    flex-direction: row;
+    width: 100%;
+  }
+
+  .step-one-content {
+    display: flex;
+    flex-direction: column;
+    width: 45%;
+  }
+
+  .content-left {
+    gap: 1.45rem;
+  }
+
+  .content-right {
+    margin-top: 5.25rem;
+  }
+}
+
+.steps {
+  margin-top: 2rem;
+}