From 1c2a392d00288b941a04cfea63d682319fd0d70e Mon Sep 17 00:00:00 2001
From: Rayhan Hassou <Rayhan.HASSOU@etu.uca.fr>
Date: Mon, 27 Nov 2023 13:27:26 +0100
Subject: [PATCH] add new routes for filtering and the search bar works !

---
 .../Ingredients/IIngredientService.tsx        |  3 +-
 .../Ingredients/IngredientsServices.tsx       | 18 ++++++++--
 LeftOvers/components/FoodElementText.tsx      | 26 +++++++++------
 LeftOvers/screens/IngredientSelection.tsx     | 33 +++++++++++++++++--
 4 files changed, 64 insertions(+), 16 deletions(-)

diff --git a/LeftOvers/Services/Ingredients/IIngredientService.tsx b/LeftOvers/Services/Ingredients/IIngredientService.tsx
index d8c9339..e2ac404 100644
--- a/LeftOvers/Services/Ingredients/IIngredientService.tsx
+++ b/LeftOvers/Services/Ingredients/IIngredientService.tsx
@@ -3,5 +3,6 @@ import Ingredient from "../../Models/Ingredient";
 export default interface IIngredientService {
     getAllIngredient(): Promise<Ingredient[]>;
     getIngredientById(id: Number): Promise<Ingredient | null>;
-    getIngredientByLetter(id: String): Promise<any>;
+    getIngredientByLetter(id: String): Promise<Ingredient[]>;
+    getfilteredIngredient(prompt: String): Promise<Ingredient[]>;
 }
\ No newline at end of file
diff --git a/LeftOvers/Services/Ingredients/IngredientsServices.tsx b/LeftOvers/Services/Ingredients/IngredientsServices.tsx
index e247ec2..7d8a069 100644
--- a/LeftOvers/Services/Ingredients/IngredientsServices.tsx
+++ b/LeftOvers/Services/Ingredients/IngredientsServices.tsx
@@ -18,8 +18,12 @@ export default class IngredientService implements IIngredientService {
 
 
     async getIngredientById(id: Number): Promise<Ingredient | null>{
-
-        return;
+        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>{
@@ -30,4 +34,14 @@ export default class IngredientService implements IIngredientService {
             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;
+    }
 }
diff --git a/LeftOvers/components/FoodElementText.tsx b/LeftOvers/components/FoodElementText.tsx
index 1fe03c7..12d46c0 100644
--- a/LeftOvers/components/FoodElementText.tsx
+++ b/LeftOvers/components/FoodElementText.tsx
@@ -1,24 +1,27 @@
 import React from 'react';
 import {StyleSheet,Pressable, Text, View, Image} from 'react-native';
-import Separator from '../components/Separator';
-import plus from '../assets/images/plus.png'; 
-import moins from '../assets/images/minus.png'; 
+import Separator from '../components/Separator'; 
 
 
 
 interface foodElementImageProps {
-  source : string
+  source : string | null
   title  : string
 }
 
+const componentHeight = 60; 
+const componentWidth = 280;
+
 
 export default function FoodElementText(props : any) {
+  const isTextOverflowing = props.title.length * 10 > 260;
+
   return (
     <Pressable style={styles.button}>
       <View style={styles.container}>
         <View style={styles.view}>
             <Text style={styles.text}>{props.title}</Text>
-            <Separator/>
+            {!isTextOverflowing && <Separator />}
         </View>
       </View>
     </Pressable>
@@ -26,11 +29,13 @@ export default function FoodElementText(props : any) {
 }
 
 const styles = StyleSheet.create({
+
+  
   button: {
     alignItems: 'center',
     justifyContent: 'center',
-    width : 270,
-    height: 60,
+    width : componentWidth,
+    minHeight: componentHeight,
     borderRadius: 5,
     elevation: 3,
     backgroundColor: '#E3DEC9',
@@ -40,8 +45,9 @@ const styles = StyleSheet.create({
     lineHeight: 21,
     fontWeight: 'bold',
     letterSpacing: 0.25,
-    padding : 7,
+    padding: 7,
     color: 'black',
+    width: 250,
   },
   view: {
     alignItems: 'flex-start',
@@ -49,8 +55,8 @@ const styles = StyleSheet.create({
     marginRight: 5 // Centre le contenu horizontalement
   },
   container: {
-    width :260,
-    height: 50,
+    width : componentWidth - 10,
+    minHeight : componentHeight - 10,
     borderRadius: 5,
     elevation: 3,
     borderWidth: 2,
diff --git a/LeftOvers/screens/IngredientSelection.tsx b/LeftOvers/screens/IngredientSelection.tsx
index 6236a53..47d6ba1 100644
--- a/LeftOvers/screens/IngredientSelection.tsx
+++ b/LeftOvers/screens/IngredientSelection.tsx
@@ -19,6 +19,33 @@ export default function IngredientSelection(props) {
   const [selectedIngredients, setSelectedIngredients] = useState([]);
   const ingredientService = new IngredientService();
 
+  const [searchQuery, setSearchQuery] = useState('');
+  const [filteredIngredients, setFilteredIngredients] = 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);
+    }
+  };
+
+  // Appelée à chaque changement de la recherche
+  const handleSearch = (query) => {
+    setSearchQuery(query);
+    filterIngredients(query);
+  };
+
+
   const loadIngredients = async () => {
     try {
       const ingredients = await ingredientService.getAllIngredient();
@@ -87,7 +114,7 @@ export default function IngredientSelection(props) {
       <TopBar title="Ingredient selection" />
       <View style={styles.page}>
         <View style={styles.element}>
-          
+
           <View style={[styles.horizontalAlignement, { margin: 10 }]}>
             {alphabetArray.map((source, index) => (
               <Pressable key={index} onPress={() => handleLetterPress(source)}>
@@ -99,8 +126,8 @@ export default function IngredientSelection(props) {
           <View>
             <Searchbar
               placeholder="Rechercher"
-              onChangeText={query => setSearchValue(query)}
-              value={searchValue}
+              onChangeText={handleSearch}
+              value={searchQuery}
               style={{
                 margin: 10,
                 backgroundColor: '#F2F0E4',