merge with WORK-RHA

LeftOvers/Models/Ingredient.tsx

@@ -0,0 +1,23 @@
+export default class Ingredient {
+    private _id: number;
+    private _name: string;
+
+    constructor(id: number, name: string) {
+      this._id = id;
+      this._name = name;
+    }
+
+    get name(): string {
+        return this._name;
+    }
+
+    get id(): number{
+        return this._id;
+    }
+    
+
+    static convertApiResponse(apiResponse: string): Ingredient[] {
+      const parsedResponses = JSON.parse(apiResponse);
+      return parsedResponses.map((item: any) => new Ingredient(item.id, item.name));
+    }
+  }

LeftOvers/Models/Profil.tsx

@@ -0,0 +1,27 @@
+export default class Profil {
+    private _id: number;
+    private _name: string;
+    private _allergy: string[];
+    private _diets: string[];
+
+    constructor(id: number, name: string) {
+      this._id = id;
+      this._name = name;
+    }
+
+    get name(): string {
+        return this._name;
+    }
+
+    get id(): number{
+        return this._id;
+    }
+
+    get allergy(): string[]{
+        return this._allergy;
+    }
+
+    get diets(): string[]{
+        return this._diets;
+    }
+  }

LeftOvers/Models/Recipes.tsx

@@ -0,0 +1,49 @@
+import Ingredient from "./Ingredient";
+
+export default class Recipes {
+    private _id: number;
+    private _name: string;
+    private _description: string; 
+    private _time_to_cook: number;
+    private _steps: string[];
+    private _ingredients: Ingredient[];
+
+    constructor(id: number, name: string, description: string, time_to_cook: number, steps: string[], ingredients: Ingredient[]) {
+      this._id = id;
+      this._name = name;
+      this._description = description;
+      this._time_to_cook = time_to_cook;
+      this._steps = steps;
+      this._ingredients = ingredients;
+    }
+
+    get name(): string {
+        return this._name;
+    }
+
+    get id(): number{
+        return this._id;
+    }
+
+    get description(): string{
+        return this._description;
+    }
+
+    get time_to_cook(): number{
+        return this._time_to_cook;
+    }
+
+    get steps(): string[]{
+        return this._steps;
+    }
+
+    get ingredients(): Ingredient[]{
+        return this._ingredients;
+    }
+    
+
+    static convertApiResponse(apiResponse: string): Recipes[] {
+      const parsedResponses = JSON.parse(apiResponse);
+      return parsedResponses.map((item: any) => new Recipes(item.id, item.name, item.description, item.time_to_cook, item.steps, item.ingredient));
+    }
+  }

LeftOvers/Services/Ingredients/IIngredientService.tsx

@@ -0,0 +1,8 @@
+import Ingredient from "../../Models/Ingredient";
+
+export default interface IIngredientService {
+    getAllIngredient(): Promise<Ingredient[]>;
+    getIngredientById(id: Number): Promise<Ingredient | null>;
+    getIngredientByLetter(id: String): Promise<Ingredient[]>;
+    getfilteredIngredient(prompt: String): Promise<Ingredient[]>;
+}

LeftOvers/Services/Ingredients/IngredientsServices.tsx

@@ -0,0 +1,47 @@
+import Ingredient from "../../Models/Ingredient";
+import IIngredientService from "./IIngredientService";
+import axios from 'axios';
+
+export default class IngredientService implements IIngredientService {
+    private readonly API_URL = "http://localhost:3000/ingredients";
+
+    constructor() {}
+
+    async getAllIngredient(): Promise<Ingredient[]> {
+        try {
+            const response = await axios.get(this.API_URL);
+            return response.data as Ingredient[];
+        } catch (error) {
+            throw new Error('Erreur lors de la récupération des ingrédients : ' + error.message);
+        }
+    }
+
+
+    async getIngredientById(id: Number): Promise<Ingredient | null>{
+        try {
+            const response = await axios.get(`${this.API_URL}/${id}`);
+            return response.data as Ingredient;
+        } catch (error) {
+            throw new Error('Erreur lors de la récupération des ingrédients : ' + error.message);
+        }
+    }
+    
+    async getIngredientByLetter(letter: String): Promise<any>{
+        try {
+            const response = await axios.get(`${this.API_URL}/letter/${letter}`);
+            return response.data as Ingredient[];
+        } catch (error) {
+            throw new Error('Erreur lors de la récupération des ingrédients : ' + error.message);
+        }
+    }
+
+    async getfilteredIngredient(prompt: String): Promise<Ingredient[]> {
+        try {
+            const response = await axios.get(`${this.API_URL}/filter/${prompt}`);
+            return response.data as Ingredient[];
+        } catch (error) {
+            throw new Error('Erreur lors de la récupération des ingrédients : ' + error.message);
+        }
+        return;
+    }
+}

LeftOvers/Services/Recipes/IRecipesServices.tsx

@@ -0,0 +1,6 @@
+import Recipes from "../../Models/Recipes";
+
+export default interface IRecipesService {
+    getAllRecipes(): Promise<Recipes[]>;
+    getRecipeById(id: Number): Promise<Recipes | null>;
+}

LeftOvers/Services/Recipes/RecipesServices.tsx

@@ -0,0 +1,30 @@
+import axios from 'axios';
+import IRecipesService from "./IRecipesServices";
+import Recipes from "../../Models/Recipes";
+
+export default class RecipesService implements IRecipesService {
+    private readonly API_URL = "http://localhost:3000/recipes";
+
+    constructor() {}
+
+    async getAllRecipes(): Promise<Recipes[]> {
+        try {
+            const response = await axios.get(this.API_URL);
+            return response.data as Recipes[];
+        } catch (error) {
+            throw new Error('Erreur lors de la récupération des ingrédients : ' + error.message);
+        }
+    }
+
+
+    async getRecipeById(id: Number): Promise<Recipes | null>{
+        try {
+            const response = await axios.get(`${this.API_URL}/${id}`);
+            console.log(response);
+            return response.data as Recipes;
+        } catch (error) {
+            throw new Error('Erreur lors de la récupération des ingrédients : ' + error.message);
+        }
+    }
+    
+}

LeftOvers/components/FoodElementText.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
-import { StyleSheet,Pressable, Text, View } from 'react-native';
+import {StyleSheet,Pressable, Text, View, Image} from 'react-native';
-
+import Separator from '../components/Separator'; 
 import ColorContext from '../theme/ColorContext';
 
 
@@ -8,6 +8,9 @@ interface foodElementImageProps {
     title  : string
 }
 
+const componentHeight = 60; 
+const componentWidth = 280;
+
 
 export default function FoodElementText(props : any) {
     const {colors, toggleColors } = useContext(ColorContext)

LeftOvers/navigation/CookingStackScreen.tsx

@@ -1,5 +1,4 @@
 import React, { useContext } from 'react'
-import { StyleSheet } from 'react-native'
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 import IngredientSelection from '../screens/IngredientSelection';
@@ -19,16 +18,10 @@ export default function CookingStackScreen() {
                 options={{
                     headerStyle: {backgroundColor: theme === 'light' ? '#F2F0E4' : '#3F3C42'},
                     headerTitle: () => (
-                        <HeaderTitle title='Profile Modification'/>
+                        <HeaderTitle title='Ingredient Selection'/>
                     )
                 }}
             />
         </CookingStack.Navigator>
     )
 }
-
-const styles = StyleSheet.create({
-    headerBarContainer: {
-        backgroundColor: '#F2F0E4',
-    },
-})

LeftOvers/package-lock.json

@@ -14,6 +14,7 @@
         "@react-navigation/native": "^6.1.9",
         "@react-navigation/native-stack": "^6.9.17",
         "@types/react": "~18.2.14",
+        "axios": "^1.6.2",
         "expo": "~49.0.15",
         "expo-blur": "^12.4.1",
         "expo-linear-gradient": "~12.3.0",
@@ -6891,6 +6892,29 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/axios": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz",
+      "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/babel-core": {
       "version": "7.0.0-bridge.0",
       "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz",
@@ -14809,6 +14833,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/pump": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
@@ -22841,6 +22870,28 @@
       "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
       "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg=="
     },
+    "axios": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz",
+      "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
+      "requires": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      },
+      "dependencies": {
+        "form-data": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+          "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
+    },
     "babel-core": {
       "version": "7.0.0-bridge.0",
       "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz",
@@ -28590,6 +28641,11 @@
         "ipaddr.js": "1.9.1"
       }
     },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "pump": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",

LeftOvers/package.json

@@ -15,6 +15,7 @@
     "@react-navigation/native": "^6.1.9",
     "@react-navigation/native-stack": "^6.9.17",
     "@types/react": "~18.2.14",
+    "axios": "^1.6.2",
     "expo": "~49.0.15",
     "expo-blur": "^12.4.1",
     "expo-linear-gradient": "~12.3.0",

LeftOvers/screens/HomePage.tsx

@@ -182,4 +182,3 @@ export default function HomePage({ navigation, props }) {
         </SafeAreaProvider>
     );
 }
-

LeftOvers/screens/IngredientSelection.tsx

@@ -1,93 +1,133 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
-import {View, StyleSheet, Text, Image, Pressable, ScrollView} from 'react-native';
+import { View, StyleSheet, Text, Image, Pressable, ActivityIndicator, FlatList } from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { Searchbar } from 'react-native-paper';
 
 import FoodElementText from '../components/FoodElementText';
 import CustomButton from '../components/CustomButton';
+import Ingredient from '../Models/Ingredient';
+import IngredientService from '../Services/Ingredients/IngredientsServices';
 
 import plus from '../assets/images/plus.png';
 import moins from '../assets/images/minus.png';
-import meat from '../assets/images/meat_icon.png';
-import vegetable from '../assets/images/vegetable_icon.png';
-import fruit from '../assets/images/fruit_icon.png';
-
 
 export default function IngredientSelection(props) {
-    const [searchQuery, setSearchQuery] = React.useState('');
+  const alphabetArray: Array<string> = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState();
+  const [response, setResponse] = useState<Ingredient[] | undefined>(undefined);
+  const [selectedIngredients, setSelectedIngredients] = useState([]);
+  const ingredientService = new IngredientService();
+
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const filterIngredients = async (query) => {
+    try {
+      setIsLoading(true);
+      if (query === '') {
+        // Si le query (prompt) est vide, charger tous les ingrédients
+        loadIngredients();
+      } else {
+        const filtered = await ingredientService.getfilteredIngredient(query);
+        setResponse(filtered);
+      }
+    } catch (error) {
+      setError(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
-    const onChangeSearch = query => setSearchQuery(query);
+  // Appelée à chaque changement de la recherche
+  const handleSearch = (query) => {
+    setSearchQuery(query);
+    filterIngredients(query);
+  };
 
-    type ItemProps = {value: string}
 
-    const AvailaibleItem = ({value}: ItemProps) => (
+  const loadIngredients = async () => {
+    try {
+      const ingredients = await ingredientService.getAllIngredient();
+      setResponse(ingredients);
+    } catch (error) {
+      setError(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadIngredients();
+  }, []);
+
+  const AvailableItem = ({ value }: { value: Ingredient }) => (
     <>
       <View style={styles.horizontalAlignement}>
-                <FoodElementText title={value} />
+        <FoodElementText title={value.name} />
-                <Pressable>
+        <Pressable onPress={() => SelectIngredient(value)}>
           <Image source={plus} style={{ width: 20, height: 20 }} />
         </Pressable>
-            </View><View style={{ height: 30 }}></View>
+      </View>
+      <View style={{ height: 30 }}></View>
     </>
-    )
+  );
 
-    const ChooseItem = ({value}: ItemProps) => (
+  const ChooseItem = ({ value }: { value: Ingredient }) => (
     <>
       <View style={styles.horizontalAlignement}>
-                <FoodElementText title={value} />
+        <FoodElementText title={value.name} />
-                <Pressable>
+        <Pressable onPress={() => RemoveIngredient(value.id)}>
           <Image source={moins} style={{ width: 20, height: 20 }} />
         </Pressable>
-            </View><View style={{ height: 30 }}></View>
+      </View>
+      <View style={{ height: 30 }}></View>
     </>
-    )
+  );
 
+  const SelectIngredient = (newIngredient: Ingredient) => {
+    const exists = selectedIngredients.find((ingredient) => ingredient.id === newIngredient.id);
 
-    const styles = StyleSheet.create({
+    if (!exists) {
-        page: {
+      setSelectedIngredients([...selectedIngredients, newIngredient]);
-            flex: 1,
-            backgroundColor: '#59BDCD',
-            alignItems: 'center',
-            display: 'flex',
-            flexWrap: 'wrap',
-            padding: 20,
-        },
-        element: {
-            backgroundColor:'#F2F0E4', 
-            borderRadius: 30,
-        },
-        horizontalAlignement: {
-            display: 'flex',
-            height: 30,
-            width: 350,
-            flexDirection: 'row',
-            justifyContent: 'space-around',
-            alignItems: 'center',
-            marginTop: 15,
     }
-    });
+  };
+
+  const RemoveIngredient = (idIngredient: number) => {
+    const updatedIngredients = selectedIngredients.filter((ingredient) => ingredient.id !== idIngredient);
+    setSelectedIngredients(updatedIngredients);
+  };
+
+  const handleLetterPress = async (letter: string) => {
+    try {
+      const ingredientsByLetter = await ingredientService.getIngredientByLetter(letter);
+      setResponse(ingredientsByLetter);
+    } catch (error) {
+      setError(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
   return (
     <SafeAreaProvider>
       <View style={styles.page}>
         <View style={styles.element}>
-                    <View style={[styles.horizontalAlignement, {justifyContent: 'center'}]}>
+
-                        <Pressable>
+          <View style={[styles.horizontalAlignement, { margin: 10 }]}>
-                            <Image source={meat} style={{ width: 30, height: 30 }} />
+            {alphabetArray.map((source, index) => (
-                        </Pressable>
+              <Pressable key={index} onPress={() => handleLetterPress(source)}>
-                        <Pressable>
+                <Text style={{ color: "blue" }}>{source}</Text>
-                            <Image source={vegetable} style={{ width: 30, height: 30 }} />
-                        </Pressable>
-                        <Pressable>
-                            <Image source={fruit} style={{ width: 30, height: 30 }} />
               </Pressable>
+            ))}
           </View>
+
           <View>
             <Searchbar
-                            placeholder="Search"
+              placeholder="Rechercher"
-                            onChangeText={onChangeSearch}
+              onChangeText={handleSearch}
               value={searchQuery}
-                            style={{margin: 10, 
+              style={{
+                margin: 10,
                 backgroundColor: '#F2F0E4',
                 borderWidth: 1,
                 borderColor: "#ACA279",
@@ -95,30 +135,40 @@ export default function IngredientSelection(props) {
                 height: 50,
               }} />
           </View>
-                    <View style={{ flex: 1}} >
+          
-                        <ScrollView contentContainerStyle={{ alignItems: 'center', height: 300}}>
+          <View style={{ alignItems: 'center', height: 300}}>
-                            {props.listIngredient.map((source, index) => (
+              <FlatList
-                                <AvailaibleItem key={index} value={source}></AvailaibleItem>
+                data={response ? response : []}
-                            ))}
+                renderItem={({ item }) => (
-                        </ScrollView>
+                  <AvailableItem value={item} />
+                )}
+                keyExtractor={(item, index) => index.toString()}
+                ListEmptyComponent={() => (
+                  isLoading ? <ActivityIndicator size="large" /> : <Text>Erreur lors du traitement des données</Text>
+                )}
+                style={{ flex: 1 }}
+              />
           </View>
           <View style={{ height: 20 }}></View>
         </View>
 
         <View style={[styles.element, { marginTop: 40 }]}>
           <View style={[styles.horizontalAlignement, { justifyContent: "flex-start", marginLeft: 10 }]}>
-                        <Text style={{fontSize: 20, color: '#ACA279'}}>Available</Text>
+            <Text style={{ fontSize: 20, color: '#ACA279' }}>Selected</Text>
           </View>
-                  
           <View style={{ height: 5 }}></View>
 
-                    <View style={{ flex: 1}} > 
+          <View style={{ alignItems: 'center', maxHeight: 200}}>
-                        <ScrollView contentContainerStyle={{ alignItems: 'center', height: 150}}>
+              <FlatList
-                            {props.listIngredient.map((source, index) => (
+                data={selectedIngredients}
-                                <ChooseItem key={index} value={source}></ChooseItem>
+                renderItem={({ item }) => (
-                            ))}
+                  <ChooseItem value={item} />
-                        </ScrollView>
+                )}
+                keyExtractor={(item, index) => index.toString()}
+                style={{ flex: 1 }}
+              />
           </View>
+
           <View style={{ height: 20 }}></View>
         </View>
 
@@ -128,3 +178,27 @@ export default function IngredientSelection(props) {
     </SafeAreaProvider>
   );
 }
+
+const styles = StyleSheet.create({
+  page: {
+    flex: 1,
+    backgroundColor: '#59BDCD',
+    alignItems: 'center',
+    display: 'flex',
+    flexWrap: 'wrap',
+    padding: 20,
+  },
+  element: {
+    backgroundColor: '#F2F0E4',
+    borderRadius: 30,
+  },
+  horizontalAlignement: {
+    display: 'flex',
+    height: 30,
+    width: 350,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    marginTop: 15,
+  }
+});

LeftOvers/screens/RecipeDetails.tsx

@@ -1,19 +1,53 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { View, StyleSheet, Text} from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import RecipeElementReduce from '../components/RecipeElementReduce';
-import AllergiesTab from '../components/AllergiesTab';
+import AllergiesTab from '../components/ListWithoutSelect';
+import RecipesService from '../Services/Recipes/RecipesServices';
+import Recipes from '../Models/Recipes';
 
 
 export default function RecipeDetails(props) {
+
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState();
+    const [response, setResponse] = useState<Recipes | undefined>(undefined);
+    const recipesService = new RecipesService();
+
+    const loadRecipe = async () => {
+      try {
+        const recipe = await recipesService.getRecipeById(props.id);
+        setResponse(recipe);
+      } catch (error) {
+        setError(error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    useEffect(() => {
+      loadRecipe();
+    }, []);
+
+    function convertToHoursMinutes(totalMinutes: number): string {
+      const hours = Math.floor(totalMinutes / 60);
+      const minutes = totalMinutes % 60;
+  
+      const hoursString = hours > 0 ? `${hours} h` : '';
+      const minutesString = minutes > 0 ? ` ${minutes} min` : '';
+  
+      return `${hoursString}${minutesString}`.trim();
+  }
+
     return (
+      
         <SafeAreaProvider>
           <View style={styles.page}>
             <RecipeElementReduce 
-                title={props.title} 
+                title={response.name} 
-                number={props.number}
+                number={response.id}
-                duree={props.duree}/>
+                duree={convertToHoursMinutes(response.time_to_cook)}/>
 
             <View style={{height: 20}}></View>
 
@@ -22,9 +56,10 @@ export default function RecipeDetails(props) {
                     <Text style={{fontSize: 20, color: '#ACA279'}}>Preparation</Text>
               </View>
               <View style={{margin: 20}}>
-                <AllergiesTab title="Ingredient" content={props.ingredient}></AllergiesTab>
+              <AllergiesTab title="Ingredient" content={response.ingredients.map(ingredient => `- ${ingredient.name}`)}></AllergiesTab>
+
                 <View style={{height: 5}}></View>
-                <AllergiesTab title="Ustensils" content={props.ustensils}></AllergiesTab>
+                {/* <AllergiesTab title="Ustensils" content={null}></AllergiesTab>*/}
               </View>
             </View >
 
@@ -35,7 +70,8 @@ export default function RecipeDetails(props) {
                   <Text style={{fontSize: 20, color: '#ACA279'}}>Cooking</Text>
               </View>
               <View style={{margin: 20}}>
-                <AllergiesTab title="Steps" content={props.steps}></AllergiesTab>
+              <AllergiesTab title="Steps" content={response.steps.map((step, index) => `${index + 1} - ${step}`)}></AllergiesTab>
+
               </View>
             </View>
             

LeftOvers/screens/RecipeSuggestion.tsx

@@ -167,7 +167,7 @@ const styles = StyleSheet.create({
   horizontalAlignement: {
     display: 'flex',
     height: 30,
-    width: 350,
+    width: '80%',
     flexDirection: 'row',
     justifyContent: 'space-around',
     alignItems: 'center',