add new routes for filtering and the search bar works !

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[]>;
 }

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;
+    }
 }

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'; 
 
 
 
 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',
@@ -42,6 +47,7 @@ const styles = StyleSheet.create({
     letterSpacing: 0.25,
     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,

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();
@@ -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',