Skip to content

Commit

Permalink
refactor: update recipe ingredients data format
Browse files Browse the repository at this point in the history
  • Loading branch information
@stantanasi
stantanasi committed Aug 17, 2024
1 parent 9203bb0 commit df2b436
Show file tree
Hide file tree
Showing 7 changed files with 141 additions and 199 deletions.
81 changes: 31 additions & 50 deletions data/recipes.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@
"cookingTime": 30,
"restTime": 480,
"servings": 12,
"ingredients": [
"steps": [
{
"title": "Biscuit dacquois",
"items": [
"title": "Le biscuit dacquois",
"ingredients": [
{
"quantity": 100,
"unit": "g",
Expand All @@ -37,11 +37,19 @@
"unit": "g",
"name": "de farine"
}
],
"actions": [
"Tamisez le sucre glace, la farine et la poudre d’amande ou noisette selon le choix",
"En parallèle, montez les blancs avec le sucre semoule jusqu’à obtenir une meringue lisse et brillante.",
"Versez les poudres sur la meringue et mélangez délicatement à la maryse. On essaie de garder un maximum de volume.",
"Sur une plaque et une feuille de papier cuisson, dressez deux disques de 18/16cm de diamètre avec une douille unie 8.",
"Saupoudrez de sucre glace et enfournez 10/15 minutes à 180°C. La cuisson dépend du four donc à surveiller.",
"Laissez refroidir sur une grille."
]
},
{
"title": "Croustillant praliné",
"items": [
"title": "Le croustillant",
"ingredients": [
{
"quantity": 90,
"unit": "g",
Expand All @@ -57,11 +65,18 @@
"unit": "g",
"name": "de feuillantine"
}
],
"actions": [
"Faites fondre le chocolat et mélangez le au praliné",
"Ajouter les crêpes dentelles émiettées et mélangez de nouveau.",
"Taillez un disque de biscuit pour qu’il entre dans le cercle sans toucher les bords.",
"Déposez le croustillant par-dessus. Bien le tasser.",
"Le recouvrir d’une feuille de papier cuisson et le réserver au congélateur au minimum 1 heure."
]
},
{
"title": "Mousse chocolat",
"items": [
"title": "La mousse chocolat",
"ingredients": [
{
"quantity": 115,
"unit": "g",
Expand All @@ -87,33 +102,7 @@
"unit": "g",
"name": "de crème liquide 30% MG"
}
]
}
],
"steps": [
{
"title": "Le biscuit dacquois",
"actions": [
"Tamisez le sucre glace, la farine et la poudre d’amande ou noisette selon le choix",
"En parallèle, montez les blancs avec le sucre semoule jusqu’à obtenir une meringue lisse et brillante.",
"Versez les poudres sur la meringue et mélangez délicatement à la maryse. On essaie de garder un maximum de volume.",
"Sur une plaque et une feuille de papier cuisson, dressez deux disques de 18/16cm de diamètre avec une douille unie 8.",
"Saupoudrez de sucre glace et enfournez 10/15 minutes à 180°C. La cuisson dépend du four donc à surveiller.",
"Laissez refroidir sur une grille."
]
},
{
"title": "Le croustillant",
"actions": [
"Faites fondre le chocolat et mélangez le au praliné",
"Ajouter les crêpes dentelles émiettées et mélangez de nouveau.",
"Taillez un disque de biscuit pour qu’il entre dans le cercle sans toucher les bords.",
"Déposez le croustillant par-dessus. Bien le tasser.",
"Le recouvrir d’une feuille de papier cuisson et le réserver au congélateur au minimum 1 heure."
]
},
{
"title": "La mousse chocolat",
],
"actions": [
"Mélanger au batteur les jaunes d’œufs ensemble.",
"En parallèle, réalisez le sirop dans une casserole avec l’eau et le sucre qui doit cuire jusqu’à la température de 120°, ne pas dépasser les 121° !",
Expand All @@ -125,6 +114,7 @@
},
{
"title": "Le montage",
"ingredients": [],
"actions": [
"Préparez le cercle inox de 20cm de diamètre et 4,5cm de haut en déposant du rhodoïd sur les parois.",
"Déposez de la mousse sur les bords du cercle. Ajoutez ensuite le biscuit avec le croustillant au fond.",
Expand All @@ -136,6 +126,7 @@
},
{
"title": "La finition",
"ingredients": [],
"actions": [
"Démoulez l’entremets et enlever le rhodoïd.",
"Pour décoration simple, saupoudrez le dessus de cacao amer. Vous pourriez faire un glaçage miroir cacao si vous le souhaitez (Recette sur mon blog ou sur ma chaîne youtube).",
Expand All @@ -156,10 +147,10 @@
"cookingTime": 0,
"restTime": 0,
"servings": 1,
"ingredients": [
"steps": [
{
"title": "",
"items": [
"ingredients": [
{
"quantity": 145,
"unit": "g",
Expand All @@ -185,12 +176,7 @@
"unit": "g",
"name": "de gélatine"
}
]
}
],
"steps": [
{
"title": "",
],
"actions": [
"Faire tremper les feuilles de gélatine dans de l’eau froide",
"Réaliser un sirop en portant à ébullition l’eau et le sucre",
Expand All @@ -215,10 +201,10 @@
"cookingTime": 2,
"restTime": 0,
"servings": 1,
"ingredients": [
"steps": [
{
"title": "",
"items": [
"ingredients": [
{
"quantity": 15,
"unit": "gr",
Expand Down Expand Up @@ -249,12 +235,7 @@
"unit": "cuillère à soupe",
"name": "de concentré de vanille"
}
]
}
],
"steps": [
{
"title": "",
],
"actions": [
"Dans un mug, faire fondre le beurre au micro-ondes",
"on ajoute le sucre, mélange",
Expand Down
9 changes: 1 addition & 8 deletions models/recipe.model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,6 @@ import { Buffer } from 'buffer'
import AsyncStorage from '@react-native-async-storage/async-storage';

export interface IIngredient {
title: string;
items: IIngredientItem[];
}

export interface IIngredientItem {
quantity: number;
unit: string;
name: string;
Expand All @@ -18,6 +13,7 @@ export interface IIngredientItem {

export interface IStep {
title: string;
ingredients: IIngredient[];
actions: string[];
}

Expand All @@ -30,7 +26,6 @@ export interface IRecipe {
cookingTime: number;
restTime: number
servings: number
ingredients: IIngredient[];
steps: IStep[];
createdAt: string;
updatedAt: string;
Expand All @@ -46,7 +41,6 @@ export default class RecipeModel implements IRecipe {
cookingTime: number = 0
restTime: number = 0
servings: number = 0
ingredients: IIngredient[] = []
steps: IStep[] = []
createdAt: string = (new Date()).toISOString()
updatedAt: string = (new Date()).toISOString()
Expand Down Expand Up @@ -217,7 +211,6 @@ export default class RecipeModel implements IRecipe {
cookingTime: this.cookingTime,
restTime: this.restTime,
servings: this.servings,
ingredients: this.ingredients,
steps: this.steps,
createdAt: this.createdAt,
updatedAt: this.updatedAt,
Expand Down
73 changes: 17 additions & 56 deletions screens/recipe-save/RecipeSaveScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ export default function RecipeSaveScreen({ navigation, route }: Props) {
const [restTimeHours, setRestTimeHours] = useState(Math.floor((recipe?.restTime ?? 0) / 60))
const [restTimeMinutes, setRestTimeMinutes] = useState((recipe?.restTime ?? 0) % 60)
const [servings, setServings] = useState(recipe?.servings ?? 0)
const [ingredients, setIngredients] = useState(recipe?.ingredients ?? [])
const [steps, setSteps] = useState(recipe?.steps ?? [])

const [isLoading, setIsLoading] = useState(false)
Expand All @@ -45,7 +44,6 @@ export default function RecipeSaveScreen({ navigation, route }: Props) {
setRestTimeHours(Math.floor((data?.restTime ?? 0) / 60))
setRestTimeMinutes((data?.restTime ?? 0) % 60)
setServings(data?.servings ?? 0)
setIngredients(data?.ingredients ?? [])
setSteps(data?.steps ?? [])
})
}, [])
Expand All @@ -60,7 +58,6 @@ export default function RecipeSaveScreen({ navigation, route }: Props) {
cookingTime: cookingTimeHours * 60 + cookingTimeMinutes,
restTime: restTimeHours * 60 + restTimeMinutes,
servings: servings,
ingredients: ingredients,
steps: steps,
})

Expand Down Expand Up @@ -196,45 +193,21 @@ export default function RecipeSaveScreen({ navigation, route }: Props) {
<View>
<Text style={styles.sectionTitle}>Ingrédients</Text>

{ingredients.map((ingredient, index) => (
{steps.map((step, index) => (
<View key={index} style={{ flex: 1, paddingHorizontal: 13, paddingVertical: 8 }}>
<View style={styles.removableItem}>
<View style={{ flex: 1 }}>
<Text style={styles.label}>Étape {index + 1}</Text>
<TextInput
value={ingredient.title}
onChangeText={(value) => setIngredients((prev) => {
const newState = [...prev]
newState[index].title = value
return newState
})}
placeholder='Exemple : Pour la préparation'
style={styles.input}
/>
</View>
<Text style={styles.label}>Étape {index + 1}: {step.title}</Text>

<Pressable
onPress={() => setIngredients((prev) => {
const newState = [...prev]
newState.splice(index, 1)
return newState
})}
>
<Text style={styles.removeButton}>×</Text>
</Pressable>
</View>

{ingredient.items.map((item, i) => (
{step.ingredients.map((ingredients, i) => (
<View key={i} style={[styles.removableItem, { paddingHorizontal: 13, paddingVertical: 8 }]}>
<View style={{ flex: 1 }}>
<View style={styles.ingredientItemQuantityUnit}>
<View style={{ flex: 0.4 }}>
<Text style={styles.subLabel}>Quantité</Text>
<TextInput
value={item.quantity.toString()}
onChangeText={(value) => setIngredients((prev) => {
value={ingredients.quantity.toString()}
onChangeText={(value) => setSteps((prev) => {
const newState = [...prev]
newState[index].items[i].quantity = +value
newState[index].ingredients[i].quantity = +value
return newState
})}
keyboardType='numeric'
Expand All @@ -244,10 +217,10 @@ export default function RecipeSaveScreen({ navigation, route }: Props) {
<View style={{ flex: 0.6 }}>
<Text style={styles.subLabel}>Mesure</Text>
<TextInput
value={item.unit}
onChangeText={(value) => setIngredients((prev) => {
value={ingredients.unit}
onChangeText={(value) => setSteps((prev) => {
const newState = [...prev]
newState[index].items[i].unit = value
newState[index].ingredients[i].unit = value
return newState
})}
style={styles.input}
Expand All @@ -258,10 +231,10 @@ export default function RecipeSaveScreen({ navigation, route }: Props) {
<View>
<Text style={styles.subLabel}>Ingrédient</Text>
<TextInput
value={item.name}
onChangeText={(value) => setIngredients((prev) => {
value={ingredients.name}
onChangeText={(value) => setSteps((prev) => {
const newState = [...prev]
newState[index].items[i].name = value
newState[index].ingredients[i].name = value
return newState
})}
style={styles.input}
Expand All @@ -270,9 +243,9 @@ export default function RecipeSaveScreen({ navigation, route }: Props) {
</View>

<Pressable
onPress={() => setIngredients((prev) => {
onPress={() => setSteps((prev) => {
const newState = [...prev]
newState[index].items.splice(i, 1)
newState[index].ingredients.splice(i, 1)
return newState
})}
>
Expand All @@ -282,9 +255,9 @@ export default function RecipeSaveScreen({ navigation, route }: Props) {
))}

<Pressable
onPress={() => setIngredients((prev) => {
onPress={() => setSteps((prev) => {
const newState = [...prev]
newState[index].items.push({
newState[index].ingredients.push({
quantity: 0,
unit: '',
name: '',
Expand All @@ -296,19 +269,6 @@ export default function RecipeSaveScreen({ navigation, route }: Props) {
</Pressable>
</View>
))}

<Pressable
onPress={() => setIngredients((prev) => {
const newState = [...prev]
newState.push({
title: '',
items: [],
})
return newState
})}
>
<Text style={[styles.button, { alignSelf: 'flex-start' }]}>Ajouter une étape</Text>
</Pressable>
</View>

<View>
Expand Down Expand Up @@ -385,6 +345,7 @@ export default function RecipeSaveScreen({ navigation, route }: Props) {
const newState = [...prev]
newState.push({
title: '',
ingredients: [],
actions: [],
})
return newState
Expand Down
13 changes: 5 additions & 8 deletions screens/recipe/RecipeScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@ import { useEffect, useState } from 'react';
import { Pressable, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';

import { RootStackParamList } from '../../navigation/types';
import Ingredient from './component/Ingredient';
import Step from './component/Step';
import AutoHeightImage from '../../components/AutoHeightImage';
import RecipeModel from '../../models/recipe.model';
import Ingredients from './component/Ingredients';

type Props = NativeStackScreenProps<RootStackParamList, 'Recipe'>;

Expand Down Expand Up @@ -84,13 +84,10 @@ export default function RecipeScreen({ navigation, route }: Props) {
</Pressable>
</View>

{recipe.ingredients.map((ingredient, index) => (
<Ingredient
key={index}
ingredient={ingredient}
portionFactor={portionSize / recipe.servings}
/>
))}
<Ingredients
recipe={recipe}
portionFactor={portionSize / recipe.servings}
/>
</View>

<View style={styles.section}>
Expand Down
Loading

0 comments on commit df2b436

Please sign in to comment.