implement translations to components b00tc4mp#407

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

Hide file tree

Showing 7 changed files with 25 additions and 23 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': 'coure' }
+export const methodTranslations = { 'steamed': 'al vapor', 'oven': 'forn', 'microwave': 'microones', 'grill': 'planxa', 'fresh': 'fresc', 'cook': 'cuit' }
 
 export const getEnglishKey = (translationsList, stringToTranslate) => {
 	for (let key in translationsList) {

diff --git a/staff/belen-ivars/project/app/src/components/DietOptions.jsx b/staff/belen-ivars/project/app/src/components/DietOptions.jsx
@@ -1,5 +1,3 @@
-import OptionsFilters from "./OptionsFilters"
-
 import { useState } from "react"
 
 export default function DietOptions(props) {

diff --git a/staff/belen-ivars/project/app/src/components/NewRecipe.jsx b/staff/belen-ivars/project/app/src/components/NewRecipe.jsx
@@ -26,12 +26,10 @@ export default function NewRecipe(props) {
 		const text = textInput.value
 		const image = imageInput.value
 		const ingredients = ingredientsInput.value
-		const diet = dietInput.value
-		const complexity = getEnglishKey(complexityTranslations, complexityInput.value)
-
-		// const complexity = complexityInput.value
 
-		const method = methodInput.value
+		const diet = getEnglishKey(dietTranslations, dietInput.value)
+		const complexity = getEnglishKey(complexityTranslations, complexityInput.value)
+		const method = getEnglishKey(methodTranslations, methodInput.value)
 
 
 		try {
@@ -59,8 +57,8 @@ 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, 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>
+			<Field id="complexity-input" type="text" placeholder='fàcil, regular o complexe' >Nivell de complexitat</Field>
+			<Field id="method-input" type="text" placeholder='al vapor, forn, microones, planxa, fresc or cuit'>Mètode de cocció</Field>
 
 
 			<Button type="submit">Post</Button>

diff --git a/staff/belen-ivars/project/app/src/components/NewSearch.jsx b/staff/belen-ivars/project/app/src/components/NewSearch.jsx
@@ -1,5 +1,5 @@
 import { useState } from "react"
-import { Button, Field, Link, Form, Container } from "../library"
+import { Button, Field, Form, Container } from "../library"
 import DietOptions from "./DietOptions"
 
 export default function NewSearch(props) {

diff --git a/staff/belen-ivars/project/app/src/components/Recipe.jsx b/staff/belen-ivars/project/app/src/components/Recipe.jsx
@@ -7,6 +7,7 @@ import { Button, Container } from "../library"
 import { useContext } from '../hooks'
 
 import session from '../logic/session'
+import { complexityTranslations, dietTranslations, methodTranslations } from '../assets/translation'
 
 function Recipe(props) {
 
@@ -75,13 +76,13 @@ function Recipe(props) {
 			</div>
 			<div>
 				<h3 className='recipe-subtitle'> Tipus de dieta </h3>
-				<p className='recipe-text'>{props.recipe.diet}</p>
+				<p className='recipe-text'>{dietTranslations[props.recipe.diet]}</p>
 
 				<h3 className='recipe-subtitle'> Nivell de complexitat </h3>
-				<p className='recipe-text'>{props.recipe.complexity}</p>
+				<p className='recipe-text'>{complexityTranslations[props.recipe.complexity]}</p>
 
 				<h3 className='recipe-subtitle'> Mètode </h3>
-				<p className='recipe-text'>{props.recipe.method}</p>
+				<p className='recipe-text'>{methodTranslations[props.recipe.method]}</p>
 			</div>
 		</Container>
 		<div>

diff --git a/staff/belen-ivars/project/app/src/components/Recipes.jsx b/staff/belen-ivars/project/app/src/components/Recipes.jsx
@@ -3,6 +3,8 @@ import Recipe from './Recipe'
 import { useContext } from "../hooks"
 import logic from "../logic"
 import { Container, Button, Field, Form } from "../library"
+import { complexityTranslations, dietTranslations, methodTranslations } from '../assets/translation'
+
 
 function Recipes(props) {
 	console.log('Recipes')
@@ -37,6 +39,8 @@ function Recipes(props) {
 		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()
@@ -74,15 +78,16 @@ function Recipes(props) {
 
 
 		{view === 'edit' && <Container className='absolute z-10 h-screen top-2 new-form'>
+			<h2 className='form-title'>Modifica la teua recepta</h2>
 			<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} />
+				<Field type='text' id='diet' placeholder={dietTranslations[recipeToEdit.diet]} />
+				<Field type='text' id='complexity' placeholder={complexityTranslations[recipeToEdit.complexity]} />
+				<Field type='text' id='method' placeholder={methodTranslations[recipeToEdit.method]} />
 
 				<Button type='submit' > Modificar </Button>
 

diff --git a/staff/belen-ivars/project/app/src/pages/CompleteRecipe.jsx b/staff/belen-ivars/project/app/src/pages/CompleteRecipe.jsx
@@ -7,7 +7,7 @@ import { Button, Container, Field, Form, Link } from "../library"
 import { useContext } from '../hooks'
 
 import session from '../logic/session'
-import { complexityTranslations } from '../assets/translation'
+import { complexityTranslations, dietTranslations, methodTranslations } from '../assets/translation'
 
 export default function CompleteRecipe() {
 
@@ -103,13 +103,13 @@ export default function CompleteRecipe() {
 				</div>
 				<div>
 					<h3 className='recipe-subtitle'> Tipus de dieta </h3>
-					<p className='recipe-text'>{recipe.diet}</p>
+					<p className='recipe-text'>{dietTranslations[recipe.diet]}</p>
 
 					<h3 className='recipe-subtitle'> Nivell de complexitat </h3>
 					<p className='recipe-text'>{complexityTranslations[recipe.complexity]}</p>
 
 					<h3 className='recipe-subtitle'> Mètode </h3>
-					<p className='recipe-text'>{recipe.method}</p>
+					<p className='recipe-text'>{methodTranslations[recipe.method]}</p>
 				</div>
 			</Container>
 			<Container className="container-description">
@@ -134,9 +134,9 @@ export default function CompleteRecipe() {
 						<Field type='text' id='description' placeholder={recipe.description} >Descripció</Field>
 						<Field type='url' id='image' placeholder='Enllaça ací la imatge' >Imatge</Field>
 						<Field type='text' id='ingredients' >Ingredients</Field>
-						<Field type='text' id='diet' placeholder={recipe.diet} >Tipus de dieta</Field>
-						<Field type='text' id='complexity' placeholder={recipe.complexity} >Nivell de complexitat</Field>
-						<Field type='text' id='method' placeholder={recipe.method} >Mètode de cocció</Field>
+						<Field type='text' id='diet' placeholder={dietTranslations[recipe.diet]} >Tipus de dieta</Field>
+						<Field type='text' id='complexity' placeholder={complexityTranslations[recipe.complexity]} >Nivell de complexitat</Field>
+						<Field type='text' id='method' placeholder={methodTranslations[recipe.method]} >Mètode de cocció</Field>
 						<Button type='submit' > Modificar </Button>
 
 					</Form>