working on visual appareance with css b00tc4mp#407

staff/belen-ivars/project/api/handlers/index.js

@@ -8,6 +8,7 @@ import editRecipeHandler from './editeRecipeHandler.js'
 import toggleFavRecipeHandler from './toggleFavRecipeHandler.js'
 import retrieveFavRecipesHandler from './retrieveFavRecipesHandler.js'
 import searchRecipesHandler from './searchRecipesHandler.js'
+import getIngredientsListHandler from './getIngredientsListHandler.js'
 
 
 export {
@@ -20,5 +21,6 @@ export {
 	editRecipeHandler,
 	toggleFavRecipeHandler,
 	retrieveFavRecipesHandler,
-	searchRecipesHandler
+	searchRecipesHandler,
+	getIngredientsListHandler
 }

staff/belen-ivars/project/api/index.js

@@ -15,7 +15,8 @@ import {
 	editRecipeHandler,
 	toggleFavRecipeHandler,
 	retrieveFavRecipesHandler,
-	searchRecipesHandler
+	searchRecipesHandler,
+	getIngredientsListHandler
 
 } from './handlers/index.js'
 
@@ -49,6 +50,8 @@ mongoose.connect(process.env.MONGODB_URL)
 
 		server.get('/recipes/search', searchRecipesHandler)
 
+		server.get('/recipe/:recipeId', getIngredientsListHandler)
+
 		server.listen(process.env.PORT, () => console.log(`server running on port ${process.env.PORT}`))
 	})
 

staff/belen-ivars/project/api/logic/index.js

@@ -9,6 +9,7 @@ import toggleFavRecipe from './toggleFavRecipe.js'
 import retrieveFavRecipes from './retrieveFavRecipes.js'
 import checkIngredient from './checkIngredient.js'
 import findRecipes from './findRecipes.js'
+import getIngredientsList from './getIngredientsList.js'
 
 const logic = {
 	registerUser,
@@ -21,7 +22,8 @@ const logic = {
 	toggleFavRecipe,
 	retrieveFavRecipes,
 	checkIngredient,
-	findRecipes
+	findRecipes,
+	getIngredientsList
 }
 
 export default logic

staff/belen-ivars/project/app/src/components/FavsButton.jsx

@@ -13,7 +13,7 @@ export default function FavsButton() {
 
 	return <div>
 
-		<Link className="link-profile" onClick={handleFavRecipesClick}>💛 My Favs </Link>
+		<Link className="link-profile-items" onClick={handleFavRecipesClick}>💛 Les millors 💛 </Link>
 
 
 	</div>

staff/belen-ivars/project/app/src/components/Logout.jsx

@@ -18,7 +18,7 @@ function Logout() {
 
 	return <>
 
-		<Link className="link-profile" onClick={handleLogoutClick}>Logout</Link>
+		<Link className="link-profile-items" onClick={handleLogoutClick}>Tancar sessió</Link>
 	</>
 }
 

staff/belen-ivars/project/app/src/components/NewRecipe.jsx

@@ -46,21 +46,21 @@ export default function NewRecipe(props) {
 		props.onCancel()
 	}
 
-	return <Container className="new-recipe">
-		<h2>New recipe</h2>
+	return <Container className="new-form">
+		<h2 className="form-title">Puja la teua recepta</h2>
 
 		<Form onSubmit={handleSubmit}>
-			<Field id="title-input" type="text" >Title</Field>
-			<Field id="description-input" type="text">Description</Field>
-			<Field id="image-input" type="url" >Image</Field>
-			<Field id="ingredients-input" type="text" placeholder='example1, example2,...'>Ingredients</Field>
-			<Field id="diet-input" type="text" >Diet</Field>
-			<Field id="complexity-input" type="text" >Complexity</Field>
-			<Field id="method-input" type="text" >Method</Field>
+			<Field id="title-input" type="text" placeholder='Títol de la recepta'>Títol</Field>
+			<Field id="description-input" type="text" placeholder='Descriu els pasos'>Descripció</Field>
+			<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="method-input" type="text" placeholder='steamed, oven, microwave, grill, fresh or cook'>Mètode de cocció</Field>
 
 
 			<Button type="submit">Post</Button>
-			<Button onClick={handleCancel}>Cancel</Button>
+			<Button onClick={handleCancel}>Cancela</Button>
 		</Form>
 	</Container>
 }

staff/belen-ivars/project/app/src/components/NewSearch.jsx

@@ -38,7 +38,9 @@ export default function NewSearch(props) {
 		props.onCancel()
 	}
 
-	return <Container className="new-recipe">
+	return <Container className="new-form">
+		<h2 className="form-title">Busca les millors receptes</h2>
+
 		<Form onSubmit={handleSubmit}>
 			<Field id="search-elements" placeholder="Search..." className="search" />
 
@@ -47,7 +49,7 @@ export default function NewSearch(props) {
 
 			<div>
 				<Button type='submit'>🔍</Button>
-				<Button onClick={handleCancel}>Cancel</Button>
+				<Button onClick={handleCancel}>Cancelar</Button>
 			</div>
 		</Form>
 	</Container>

staff/belen-ivars/project/app/src/components/Recipe.jsx

@@ -12,19 +12,25 @@ function Recipe(props) {
 
 	console.log('Recipe')
 	const [view, setView] = useState(null)
+	const [ingredientsList, setIngredientsList] = useState([])
 
 	const context = useContext()
 	const navigate = useNavigate()
 
-	const handleSubmit = async (event) => {
+	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)
+			await logic.editRecipe(props.recipe._id, title, description, image, ingredients, diet, complexity, method)
 			props.onSuccess()
 
 			setView(null)
@@ -35,7 +41,7 @@ function Recipe(props) {
 		}
 	}
 
-	const handleDeleteClick = async (event) => {
+	async function handleDeleteClick(event) {
 		event.preventDefault()
 
 		try {
@@ -47,7 +53,7 @@ function Recipe(props) {
 		}
 	}
 
-	const handleToggleFavClick = async (event) => {
+	async function handleToggleFavClick(event) {
 		event.preventDefault
 		try {
 			await logic.toggleFavRecipe(props.recipe._id)
@@ -68,34 +74,66 @@ function Recipe(props) {
 
 	}, [handleSubmit])
 
+	useEffect(() => {
+		async function getIngredients() {
+			try {
+				const ingredientsListFormated = await logic.getIngredientsList(props.recipe._id)
+				setIngredientsList(ingredientsListFormated)
+			} catch (error) {
+				context.handleError(error)
+			}
+		}
+		getIngredients()
+	}, [props.recipe._id])
 
 	return <article className="recipe">
 
-		<Container className="container-recipe">
-			<h2 className="recipe-title"> {props.recipe.title}</h2>
+		<Container className="container-top-recipe">
+			<h1 className="recipe-title"> {props.recipe.title}</h1>
 			<img className="recipe-image" src={props.recipe.image} />
-			<p className='recipe-description'>{props.recipe.description}</p>
 		</Container>
-
+		<Container className="container-info-recipe" >
+			<div>
+				<h3 className='recipe-subtitle'> Ingredients </h3>
+				<ul className='recipe-list'>
+					{ingredientsList.map((ingredient, index) => (
+						<li className='ingredient-item-list' key={index}>{ingredient}</li>
+					))}
+				</ul>
+			</div>
+			<div>
+				<h3 className='recipe-subtitle'> Tipus de dieta </h3>
+				<p className='recipe-text'>{props.recipe.diet}</p>
+
+				<h3 className='recipe-subtitle'> Nivell de complexitat </h3>
+				<p className='recipe-text'>{props.recipe.complexity}</p>
+
+				<h3 className='recipe-subtitle'> Mètode </h3>
+				<p className='recipe-text'>{props.recipe.method}</p>
+			</div>
+		</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>}
 			<Button className='button-recipe' onClick={handleToggleFavClick}>{props.recipe.fav ? '❤️' : '🤍'}</Button>
-			<Button onClick={handleRecipeClick} >Show more</Button>
+			<Button onClick={handleRecipeClick} >Mostra més</Button>
 
 		</div>
 
 		{view === 'edit' && <Button onClick={() => setView(null)}>Cancel</Button>}
 
-		{view === 'edit' && <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>}
+		{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>
+
+
 }
 
 export default Recipe

staff/belen-ivars/project/app/src/components/Recipes.jsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react"
 import Recipe from './Recipe'
 import { useContext } from "../hooks"
 import logic from "../logic"
+import { Container } from "../library"
 
 function Recipes(props) {
 	console.log('Recipes')
@@ -32,9 +33,17 @@ function Recipes(props) {
 
 	return <div className="recipes">
 
-		{recipes.length === 0 ? <div>No recipes</div> : recipes.map(recipe => <Recipe onRecipeClick={props.setRecipe} key={recipe._id} recipe={recipe} onError={props.onError} onSuccess={refreshRecipes} />)}
+		{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>
 
-	</div>
+			</Container>
+		</div> : recipes.map(recipe => <Recipe onRecipeClick={props.setRecipe} key={recipe._id} recipe={recipe} onError={props.onError} onSuccess={refreshRecipes} />)}
+
+	</div >
 
 }
 

staff/belen-ivars/project/app/src/components/TopProfileImage.jsx

@@ -20,14 +20,17 @@ export default function TopProfileImage({ name, email }) {
 		}
 	}
 
-	return <Link className="link-menu" onClick={handleProfileClick}>
-		<Gravatar email={email} /> {name}
-		{isOpen && (
-			<Container className='profile-menu'>
-				<FavsButton />
-				<Logout />
-			</Container>
-		)}
-	</Link>
+	return <div className='profile-menu'>
+		<Link className="link-profile-menu" onClick={handleProfileClick}>
+			<Gravatar email={email} /> {name}
+			{isOpen && (
+				<Container >
+					<FavsButton />
+					<Logout />
+				</Container>
+			)}
+		</Link>
+	</div>
+
 }