refactor and styles css b00tc4mp#407

berlem · Apr 25, 2024 · 8d53173 · 8d53173
1 parent 1d920cf
commit 8d53173
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 100 deletions.
diff --git a/staff/belen-ivars/project/api/index.js b/staff/belen-ivars/project/api/index.js
@@ -16,7 +16,8 @@ import {
 	toggleFavRecipeHandler,
 	retrieveFavRecipesHandler,
 	searchRecipesHandler,
-	getIngredientsListHandler
+	getIngredientsListHandler,
+	retrieveCompleteRecipeHandler
 
 } from './handlers/index.js'
 
@@ -52,6 +53,8 @@ mongoose.connect(process.env.MONGODB_URL)
 
 		server.get('/recipe/:recipeId', getIngredientsListHandler)
 
+		server.get('/complete-recipe/:recipeId', retrieveCompleteRecipeHandler)
+
 		server.listen(process.env.PORT, () => console.log(`server running on port ${process.env.PORT}`))
 	})
 

diff --git a/staff/belen-ivars/project/app/src/components/DietOptions.jsx b/staff/belen-ivars/project/app/src/components/DietOptions.jsx
@@ -25,34 +25,40 @@ export default function DietOptions(props) {
 	return (
 		<div>
 			Select your diet:
-			<div>
-				<input
-					type="checkbox"
-					id="gluten"
-					name="gluten"
-					value="GlutenFree"
-					checked={isGlutenChecked}
-					onChange={handleGlutenOnChange}
-				/>
-				Gluten Free
-				<input
-					type="checkbox"
-					id="vegan"
-					name="vegan"
-					value="Vegan"
-					checked={isVeganChecked}
-					onChange={handleVeganOnChange}
-				/>
-				Vegan
-				<input
-					type="checkbox"
-					id="veggie"
-					name="veggie"
-					value="Vegeterian"
-					checked={isVeggieChecked}
-					onChange={handleVeggieOnChange}
-				/>
-				Vegeterian
+			<div className="flex flex-col">
+				<div>
+					<input
+						type="checkbox"
+						id="gluten"
+						name="gluten"
+						value="GlutenFree"
+						checked={isGlutenChecked}
+						onChange={handleGlutenOnChange}
+					/>
+					Gluten Free
+				</div>
+				<div>
+					<input
+						type="checkbox"
+						id="vegan"
+						name="vegan"
+						value="Vegan"
+						checked={isVeganChecked}
+						onChange={handleVeganOnChange}
+					/>
+					Vegan
+				</div>
+				<div>
+					<input
+						type="checkbox"
+						id="veggie"
+						name="veggie"
+						value="Vegeterian"
+						checked={isVeggieChecked}
+						onChange={handleVeggieOnChange}
+					/>
+					Vegeterian
+				</div>
 			</div>
 		</div>
 	);

diff --git a/staff/belen-ivars/project/app/src/components/NewRecipe.jsx b/staff/belen-ivars/project/app/src/components/NewRecipe.jsx
@@ -3,6 +3,7 @@ import logic from "../logic"
 import { useContext } from 'react'
 import session from "../logic/session"
 import Context from "../Context"
+import { getEnglishKey, dietTranslations, methodTranslations, complexityTranslations } from "../assets/translation"
 
 export default function NewRecipe(props) {
 	console.log('NewRecipe')
@@ -26,7 +27,10 @@ export default function NewRecipe(props) {
 		const image = imageInput.value
 		const ingredients = ingredientsInput.value
 		const diet = dietInput.value
-		const complexity = complexityInput.value
+		const complexity = getEnglishKey(complexityTranslations, complexityInput.value)
+
+		// const complexity = complexityInput.value
+
 		const method = methodInput.value
 
 
@@ -55,7 +59,7 @@ export default function NewRecipe(props) {
 			<Field id="image-input" type="url" placeholder='Inclou una imatge'>Imatge</Field>
 			<Field id="ingredients-input" type="text" placeholder='exemple1, exemple2,...'>Ingredients</Field>
 			<Field id="diet-input" type="text" placeholder='glutenfree, vegan or vegetarian'>Tipus de dieta</Field>
-			<Field id="complexity-input" type="text" placeholder='easy, medium or complex' >Nivell de complexitat</Field>
+			<Field id="complexity-input" type="text" placeholder='easy, regular or complex' >Nivell de complexitat</Field>
 			<Field id="method-input" type="text" placeholder='steamed, oven, microwave, grill, fresh or cook'>Mètode de cocció</Field>
 
 

diff --git a/staff/belen-ivars/project/app/src/components/Recipe.jsx b/staff/belen-ivars/project/app/src/components/Recipe.jsx
@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom'
 
 import logic from "../logic"
 
-import { Button, Container, Field, Form, Link } from "../library"
+import { Button, Container } from "../library"
 import { useContext } from '../hooks'
 
 import session from '../logic/session'
@@ -17,30 +17,6 @@ function Recipe(props) {
 	const context = useContext()
 	const navigate = useNavigate()
 
-	async function handleSubmit(event) {
-		event.preventDefault()
-
-		const title = event.target.title.value ? event.target.title.value : null
-		const description = event.target.description.value ? event.target.description.value : null
-		const image = event.target.image.value ? event.target.image.value : null
-		console.log(props.recipe._id)
-		const ingredients = event.target.ingredients.value ? event.target.ingredients.value : null
-		const diet = event.target.diet.value ? event.target.diet.value : null
-		const complexity = event.target.complexity.value ? event.target.complexity.value : null
-		const method = event.target.method.value ? event.target.complexity.value : null
-
-		try {
-			await logic.editRecipe(props.recipe._id, title, description, image, ingredients, diet, complexity, method)
-			props.onSuccess()
-
-			setView(null)
-			document.getElementById("edit-form").reset()
-
-		} catch (error) {
-			context.handleError(error)
-		}
-	}
-
 	async function handleDeleteClick(event) {
 		event.preventDefault()
 
@@ -67,13 +43,9 @@ function Recipe(props) {
 	}
 
 	const handleRecipeClick = () => {
-		props.onRecipeClick(props.recipe)
+		props.onRecipeClick(props.recipe._id)
 	}
 
-	useEffect(() => {
-
-	}, [handleSubmit])
-
 	useEffect(() => {
 		async function getIngredients() {
 			try {
@@ -93,7 +65,7 @@ function Recipe(props) {
 			<img className="recipe-image" src={props.recipe.image} />
 		</Container>
 		<Container className="container-info-recipe" >
-			<div>
+			<div className='container-ingredients-list'>
 				<h3 className='recipe-subtitle'> Ingredients </h3>
 				<ul className='recipe-list'>
 					{ingredientsList.map((ingredient, index) => (
@@ -114,23 +86,13 @@ function Recipe(props) {
 		</Container>
 		<div>
 			{session.sessionUserId === props.recipe.author && view === null && <Button className='button-recipe' onClick={handleDeleteClick}>🗑️</Button>}
-			{session.sessionUserId === props.recipe.author && view === null && <Button className='button-recipe' onClick={() => setView('edit')}>Edit</Button>}
+			{session.sessionUserId === props.recipe.author && view === null && <Button className='button-recipe' onClick={() => props.onEditClick(props.recipe)}>Edit</Button>}
 			<Button className='button-recipe' onClick={handleToggleFavClick}>{props.recipe.fav ? '❤️' : '🤍'}</Button>
 			<Button onClick={handleRecipeClick} >Mostra més</Button>
 
 		</div>
 
-		{view === 'edit' && <Button onClick={() => setView(null)}>Cancel</Button>}
-
-		{view === 'edit' && <Container className='new-form'>
-			<Form id='edit-form' onSubmit={handleSubmit}>
-				<Field type='text' id='title' placeholder={props.recipe.title} />
-				<Field type='text' id='description' placeholder={props.recipe.description} />
-				<Field type='url' id='image' placeholder={props.recipe.image} />
-				<Button type='submit' > Modificar </Button>
 
-			</Form>
-		</Container>}
 	</article>
 
 

diff --git a/staff/belen-ivars/project/app/src/components/Recipes.jsx b/staff/belen-ivars/project/app/src/components/Recipes.jsx
@@ -2,12 +2,14 @@ import { useEffect, useState } from "react"
 import Recipe from './Recipe'
 import { useContext } from "../hooks"
 import logic from "../logic"
-import { Container } from "../library"
+import { Container, Button, Field, Form } from "../library"
 
 function Recipes(props) {
 	console.log('Recipes')
 
 	const [recipes, setRecipes] = useState([])
+	const [view, setView] = useState(null)
+	const [recipeToEdit, setRecipeToEdit] = useState(null)
 
 	const context = useContext()
 
@@ -18,30 +20,74 @@ function Recipes(props) {
 				const content = await props.showRecipes()
 				if (props.resetInputs) props.resetInputs()
 				setRecipes(content)
-				console.log(content)
 			} catch (error) {
 				context.handleError(error)
 			}
 		})()
 	}
 
+	async function handleSubmit(event) {
+		event.preventDefault()
+
+		const title = event.target.title.value ? event.target.title.value : null
+		const description = event.target.description.value ? event.target.description.value : null
+		const image = event.target.image.value ? event.target.image.value : null
+		const ingredients = event.target.ingredients.value ? event.target.ingredients.value : null
+		const diet = event.target.diet.value ? event.target.diet.value : null
+		const complexity = event.target.complexity.value ? event.target.complexity.value : null
+		const method = event.target.method.value ? event.target.method.value : null
+
+		try {
+			await logic.editRecipe(recipeToEdit._id, title, description, image, ingredients, diet, complexity, method)
+			refreshRecipes()
+			setView(null)
+			document.getElementById("edit-form").reset()
+
+		} catch (error) {
+			context.handleError(error)
+		}
+	}
+
+	function handleEditClick(recipeObject) {
+		setRecipeToEdit(recipeObject)
+		setView('edit')
+	}
+
 	useEffect(() => {
-		console.log('Recipes effect')
 
 		refreshRecipes()
 	}, [props.stamp])
 
 	return <div className="recipes">
 
-		{recipes.length === 0 ? <div >
-			<Container>
-				<h1 className="recipe-title">No s'han trobat receptes</h1>
-				<p className="recipe-text">
-					Oooohhh, no hi ha receptes que conicidisquen amb els teus criteris de búsqueda!
-				</p>
+		{view !== 'edit' && <>
+			{recipes.length === 0 ? <div >
+				<Container>
+					<h1 className="recipe-title">No s'han trobat receptes</h1>
+					<p className="recipe-text">
+						Oooohhh, no hi ha receptes que conicidisquen amb els teus criteris de búsqueda!
+					</p>
+
+				</Container>
+			</div> : recipes.map(recipe => <Recipe onEditClick={handleEditClick} onRecipeClick={props.setRecipe} key={recipe._id} recipe={recipe} onError={props.onError} onSuccess={refreshRecipes} />)}
+		</>}
+
+
+		{view === 'edit' && <Container className='absolute z-10 h-screen top-2 new-form'>
+			<Button onClick={() => setView(null)}>Cancel</Button>
+			<Form id='edit-form' onSubmit={handleSubmit}>
+				<Field type='text' id='title' placeholder={recipeToEdit.title} />
+				<Field type='text' id='description' placeholder={recipeToEdit.description} />
+				<Field type='url' id='image' placeholder={recipeToEdit.image} />
+				<Field type='text' id='ingredients' placeholder={recipeToEdit.ingredients} />
+				<Field type='text' id='diet' placeholder={recipeToEdit.diet} />
+				<Field type='text' id='complexity' placeholder={recipeToEdit.complexity} />
+				<Field type='text' id='method' placeholder={recipeToEdit.method} />
+
+				<Button type='submit' > Modificar </Button>
 
-			</Container>
-		</div> : recipes.map(recipe => <Recipe onRecipeClick={props.setRecipe} key={recipe._id} recipe={recipe} onError={props.onError} onSuccess={refreshRecipes} />)}
+			</Form>
+		</Container>}
 
 	</div >
 

diff --git a/staff/belen-ivars/project/app/src/index.css b/staff/belen-ivars/project/app/src/index.css
@@ -28,7 +28,7 @@ font-family: 'Ubuntu', sans serif;
 }
 
 .recipe-subtitle {
-@apply font-semibold text-center bg-yellow-300/50 border-spacing-0;
+@apply font-semibold text-center  text-green-900 bg-yellow-300/50 border-spacing-0;
 font-family: 'Ubuntu', sans serif;
 }
 
@@ -38,7 +38,8 @@ font-family: 'Ubuntu', sans serif;
 }
 
 .recipe-list {
-  @apply list-inside list-disc capitalize decoration-yellow-300;
+  @apply font-light list-inside list-disc capitalize;
+  font-family: 'Ubuntu', sans serif;
 }
 
 .recipe-description {
@@ -152,13 +153,17 @@ font-family: 'Ubuntu', sans serif;
 }
 
 .container-info-recipe {
-  @apply grid grid-cols-2 items-start place-content-between border-yellow-300/40 text-clip overflow-hidden;
+  @apply grid grid-cols-2 items-start place-content-between border-yellow-300/40 text-clip overflow-hidden ;
 }
 
 .container-description {
   @apply  shadow-inner shadow-green-700/50 text-clip overflow-hidden
 }
 
+.container-ingredients-list {
+  @apply text-clip overflow-hidden max-h-36;
+}
+
 .login-register {
   @apply flex flex-col items-center ;
 }
@@ -191,7 +196,7 @@ font-family: 'Ubuntu', sans serif;
   @apply flex flex-col items-center mb-[3rem] bg-cover; 
 
 }
-
+}
 /* Avisos */
 
 .Feedback {
@@ -216,6 +221,4 @@ font-family: 'Ubuntu', sans serif;
 
 .Feedback--fatal {
   @apply bg-[red] text-black;
-}
-
 }
diff --git a/staff/belen-ivars/project/app/src/logic/index.js b/staff/belen-ivars/project/app/src/logic/index.js
@@ -11,6 +11,7 @@ import toggleFavRecipe from './toggleFavRecipe'
 import retrieveFavRecipes from './retrieveFavRecipes'
 import searchRecipes from './searchRecipes'
 import getIngredientsList from './getIngredientsList'
+import retrieveCompleteRecipe from './retrieveCompleteRecipe'
 
 const logic = {
 	registerUser,
@@ -25,7 +26,8 @@ const logic = {
 	toggleFavRecipe,
 	retrieveFavRecipes,
 	searchRecipes,
-	getIngredientsList
+	getIngredientsList,
+	retrieveCompleteRecipe
 }
 
 export default logic