add on models recipe and steps. Add on Services function for recipes. binding on page ingredientSelection and recipesDetails are done

LeftOvers/App.tsx

@@ -37,15 +37,9 @@ export default function App() {
 const ingredients = generateList();
   
   return (
-    <IngredientSelection listIngredient={ingredients}></IngredientSelection>
+    /*<IngredientSelection listIngredient={ingredients}></IngredientSelection>*/
     /*<RecipeSuggestion list={ingredients} diets={die} allergy={all}></RecipeSuggestion>*/
-    /*<RecipeDetails ingredient={ingredient} 
-    ustensils={ustensils} 
-    steps={steps} 
-    title="Chocolat Cake" 
-    number="63"
-    duree="30 minutes"
-    ></RecipeDetails>*/
+    <RecipeDetails id={123}></RecipeDetails>
   );
 }
 

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/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/screens/IngredientSelection.tsx

@@ -11,7 +11,6 @@ import Ingredient from '../Models/Ingredient';
 import IngredientService from '../Services/Ingredients/IngredientsServices';
 
 export default function IngredientSelection(props) {
-  const [searchValue, setSearchValue] = 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();
@@ -20,7 +19,6 @@ export default function IngredientSelection(props) {
   const ingredientService = new IngredientService();
 
   const [searchQuery, setSearchQuery] = useState('');
-  const [filteredIngredients, setFilteredIngredients] = useState([]);
 
   const filterIngredients = async (query) => {
     try {

LeftOvers/screens/RecipeDetails.tsx

@@ -1,20 +1,56 @@
-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 TopBar from '../components/TopBar';
 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>
-          <TopBar title="Recipe Detail"/>
+          {response && (
+  <>
+   <TopBar title="Recipe Detail"/>
           <View style={styles.page}>
             <RecipeElementReduce 
-                title={props.title} 
-                number={props.number}
-                duree={props.duree}/>
+                title={response.name} 
+                number={response.id}
+                duree={convertToHoursMinutes(response.time_to_cook)}/>
 
             <View style={{height: 20}}></View>
 
@@ -23,9 +59,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 >
 
@@ -36,11 +73,15 @@ 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>
             
           </View>
+        </>
+      )}
+          
         </SafeAreaProvider>
       );
     }