implement all filter options and refactor b00tc4mp#407

berlem · Apr 25, 2024 · a002356 · a002356
1 parent 644feba
commit a002356
Show file tree

Hide file tree

Showing 15 changed files with 244 additions and 128 deletions.
diff --git a/staff/belen-ivars/project/app/src/assets/translation.js b/staff/belen-ivars/project/app/src/assets/translation.js
@@ -1,6 +1,6 @@
 export const dietTranslations = { 'glutenfree': 'glutenfree', 'vegan': 'vegà', 'vegetarian': 'vegetarià' }
 export const complexityTranslations = { 'easy': 'fàcil', 'regular': 'regular', 'complex': 'complexe' }
-export const methodTranslations = { 'steamed': 'al vapor', 'oven': 'forn', 'microwave': 'microones', 'grill': 'planxa', 'fresh': 'fresc', 'cook': 'cuit' }
+export const methodTranslations = { 'steamed': 'al vapor', 'oven': 'forn', 'microwave': 'microones', 'grill': 'planxa', 'fresh': 'fresc', 'cooked': 'cuit' }
 
 export const getEnglishKey = (translationsList, stringToTranslate) => {
 	for (let key in translationsList) {

diff --git a/staff/belen-ivars/project/app/src/components/ComplexityOptions.jsx b/staff/belen-ivars/project/app/src/components/ComplexityOptions.jsx
@@ -1,6 +1,63 @@
-import OptionsFilters from "./OptionsFilters"
+import { useState } from "react"
 
-export default function ComplexityOptions() {
-	const options = ['very easy', 'easy', 'medium', 'complex', 'very complex']
-	return <OptionsFilters title="Complexity level" options={options} />
+export default function ComplexityOptions(props) {
+	const [isEasyChecked, setIsEasyChecked] = useState(false);
+	const [isRegularChecked, setIsRegularChecked] = useState(false);
+	const [isComplexChecked, setIsComplexChecked] = useState(false);
+
+	const handleEasyOnChange = () => {
+		setIsEasyChecked(!isEasyChecked);
+		props.complexityChange('easy')
+	};
+
+	const handleRegularOnChange = () => {
+		setIsRegularChecked(!isRegularChecked);
+		props.complexityChange('regular')
+	};
+
+	const handleComplexOnChange = () => {
+		setIsComplexChecked(!isComplexChecked);
+		props.complexityChange('complex')
+	};
+
+	return (
+		<div>
+			Tria la complexitat de la recepta:
+			<div className="flex flex-col">
+				<div>
+					<input
+						type="checkbox"
+						id="easy"
+						name="easy"
+						value="Easy"
+						checked={isEasyChecked}
+						onChange={handleEasyOnChange}
+					/>
+					Fàcil
+				</div>
+				<div>
+					<input
+						type="checkbox"
+						id="regular"
+						name="regular"
+						value="Regular"
+						checked={isRegularChecked}
+						onChange={handleRegularOnChange}
+					/>
+					Regular
+				</div>
+				<div>
+					<input
+						type="checkbox"
+						id="complex"
+						name="complex"
+						value="Complex"
+						checked={isComplexChecked}
+						onChange={handleComplexOnChange}
+					/>
+					Complexa
+				</div>
+			</div>
+		</div>
+	);
 }
diff --git a/staff/belen-ivars/project/app/src/components/DietOptions.jsx b/staff/belen-ivars/project/app/src/components/DietOptions.jsx
@@ -22,7 +22,7 @@ export default function DietOptions(props) {
 
 	return (
 		<div>
-			Select your diet:
+			Selecciona una dieta:
 			<div className="flex flex-col">
 				<div>
 					<input
@@ -44,7 +44,7 @@ export default function DietOptions(props) {
 						checked={isVeganChecked}
 						onChange={handleVeganOnChange}
 					/>
-					Vegan
+					Vegà
 				</div>
 				<div>
 					<input
@@ -55,7 +55,7 @@ export default function DietOptions(props) {
 						checked={isVeggieChecked}
 						onChange={handleVeggieOnChange}
 					/>
-					Vegeterian
+					Vegeterià
 				</div>
 			</div>
 		</div>

diff --git a/staff/belen-ivars/project/app/src/components/Dropdown.jsx b/staff/belen-ivars/project/app/src/components/Dropdown.jsx
diff --git a/staff/belen-ivars/project/app/src/components/MethodOptions.jsx b/staff/belen-ivars/project/app/src/components/MethodOptions.jsx
@@ -1,24 +1,114 @@
-import { Container } from "../library"
-import OptionsFilters from "./OptionsFilters"
 import { useState } from "react"
 
-export default function MethodOptions() {
-	const [isOpen, setIsOpen] = useState(false)
+export default function MethodOptions(props) {
+	const [isSteamedChecked, setIsSteamedChecked] = useState(false);
+	const [isOvenChecked, setIsOvenChecked] = useState(false);
+	const [isMicrowaveChecked, setIsMicrowaveChecked] = useState(false);
+	const [isGrillChecked, setIsGrillChecked] = useState(false);
+	const [isFreshChecked, setIsFreshChecked] = useState(false);
+	const [isCookedChecked, setIsCookedChecked] = useState(false);
 
-	const options = ['steamed', 'oven', 'microwave', 'grill', 'fresh', 'cook']
+	const handleSteamedOnChange = () => {
+		setIsSteamedChecked(!isSteamedChecked);
+		props.methodChange('steamed')
+	};
 
-	function handleMethodlick(event) {
-		event.preventDefault()
+	const handleOvenOnChange = () => {
+		setIsOvenChecked(!isOvenChecked);
+		props.methodChange('oven')
+	};
 
-		setIsOpen(!isOpen)
+	const handleMicrowaveOnChange = () => {
+		setIsMicrowaveChecked(!isMicrowaveChecked);
+		props.methodChange('microwave')
+	};
 
-		if (isOpen) {
-			setIsOpen(false)
-		}
-	}
-	return <Container className="options" onClick={handleMethodlick}>
-		{isOpen &&
-			<OptionsFilters title="Method" options={options} />
-		}
-	</Container>
+	const handleGrillOnChange = () => {
+		setIsGrillChecked(!isGrillChecked);
+		props.methodChange('grill')
+	};
+
+	const handleFreshOnChange = () => {
+		setIsFreshChecked(!isFreshChecked);
+		props.methodChange('fresh')
+	};
+
+	const handleCookedOnChange = () => {
+		setIsCookedChecked(!isCookedChecked);
+		props.methodChange('cooked')
+	};
+
+	return (
+		<div>
+			Tria el mètode d'elaboració:
+			<div className="flex flex-col">
+				<div>
+					<input
+						type="checkbox"
+						id="steamed"
+						name="steamed"
+						value="Steamed"
+						checked={isSteamedChecked}
+						onChange={handleSteamedOnChange}
+					/>
+					Al vapor
+				</div>
+				<div>
+					<input
+						type="checkbox"
+						id="oven"
+						name="oven"
+						value="Oven"
+						checked={isOvenChecked}
+						onChange={handleOvenOnChange}
+					/>
+					Forn
+				</div>
+				<div>
+					<input
+						type="checkbox"
+						id="microwave"
+						name="microwave"
+						value="Microwave"
+						checked={isMicrowaveChecked}
+						onChange={handleMicrowaveOnChange}
+					/>
+					Microones
+				</div>
+				<div>
+					<input
+						type="checkbox"
+						id="grill"
+						name="grill"
+						value="Grill"
+						checked={isGrillChecked}
+						onChange={handleGrillOnChange}
+					/>
+					Planxa
+				</div>
+				<div>
+					<input
+						type="checkbox"
+						id="fresh"
+						name="fresh"
+						value="Fresh"
+						checked={isFreshChecked}
+						onChange={handleFreshOnChange}
+					/>
+					Fresc
+				</div>
+				<div>
+					<input
+						type="checkbox"
+						id="cooked"
+						name="cooked"
+						value="Cooked"
+						checked={isCookedChecked}
+						onChange={handleCookedOnChange}
+					/>
+					Cuit
+				</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
@@ -48,7 +48,7 @@ export default function NewRecipe(props) {
 		props.onCancel()
 	}
 
-	return <Container className="new-form">
+	return <Container className="new-form-footer">
 		<h2 className="form-title">Puja la teua recepta</h2>
 
 		<Form onSubmit={handleSubmit}>

diff --git a/staff/belen-ivars/project/app/src/components/NewSearch.jsx b/staff/belen-ivars/project/app/src/components/NewSearch.jsx
@@ -1,9 +1,13 @@
 import { useState } from "react"
 import { Button, Field, Form, Container } from "../library"
 import DietOptions from "./DietOptions"
+import ComplexityOptions from "./ComplexityOptions"
+import MethodOptions from "./MethodOptions"
 
 export default function NewSearch(props) {
 	const [diet, setDiet] = useState([])
+	const [complexity, setComplexity] = useState([])
+	const [method, setMethod] = useState([])
 
 	function handleChangeDiet(dietType) {
 		const index = diet.indexOf(dietType)
@@ -17,6 +21,30 @@ export default function NewSearch(props) {
 		setDiet(newDiet)
 	}
 
+	function handleChangeComplexity(complexityLevel) {
+		const index = complexity.indexOf(complexityLevel)
+
+		let newComplexity
+		if (index === -1) {
+			newComplexity = complexity.concat(complexityLevel)
+		} else {
+			newComplexity = complexity.filter((_, _index) => _index !== index);
+		}
+		setComplexity(newComplexity)
+	}
+
+	function handleChangeMethod(methodOption) {
+		const index = method.indexOf(methodOption)
+
+		let newMethod
+		if (index === -1) {
+			newMethod = method.concat(methodOption)
+		} else {
+			newMethod = method.filter((_, _index) => _index !== index);
+		}
+		setMethod(newMethod)
+	}
+
 	function handleSubmit(event) {
 		event.preventDefault()
 
@@ -29,6 +57,14 @@ export default function NewSearch(props) {
 			const formatedDiet = diet.join('-')
 			props.setDiet(formatedDiet)
 		}
+		if (complexity.length > 0) {
+			const formatedComplexity = complexity.join('-')
+			props.setComplexity(formatedComplexity)
+		}
+		if (method.length > 0) {
+			const formatedMethod = method.join('-')
+			props.setMethod(formatedMethod)
+		}
 		props.onPublish()
 	}
 
@@ -38,14 +74,15 @@ export default function NewSearch(props) {
 		props.onCancel()
 	}
 
-	return <Container className="new-form">
+	return <Container className="new-form-footer">
 		<h2 className="form-title">Busca les millors receptes</h2>
 
 		<Form onSubmit={handleSubmit}>
 			<Field id="search-elements" placeholder="Search..." className="search" />
 
 			<DietOptions dietChange={handleChangeDiet}></DietOptions>
-
+			<ComplexityOptions complexityChange={handleChangeComplexity}></ComplexityOptions>
+			<MethodOptions methodChange={handleChangeMethod}></MethodOptions>
 
 			<div>
 				<Button type='submit'>🔍</Button>