upgrade parameters for selected ingredient, the modal is functionnal, to do : filters selection

LeftOvers/App.js

@@ -10,6 +10,11 @@ const generateList = () => {
   list.push('Pineapple');
   list.push('Tomato');
   list.push('Meat')
+  list.push('d)àrok');
+  list.push('dddd');
+  list.push('fff');
+  list.push('fffgg')
+  list.push('Apple');
   return list;
 };
 

LeftOvers/components/ParameterTopBar.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Appbar } from 'react-native-paper';
+
+interface TopBarProps{
+    source : string
+    firstImage  : string
+    lastImage : string
+  }
+  
+  
+  export default function ParameterTopBar(props : any) {
+
+    const goFilter = () =>{
+        props.onEventFilter('Hello');
+    }
+
+    const goIngredients = () =>{
+        props.onEventIngredient('Hello');
+    }
+
+    return (
+        <Appbar.Header  style={{backgroundColor: '#F2F0E4', justifyContent: 'center'}} >
+            <Appbar.Action icon="magnify" onPress={goIngredients} />
+            <Appbar.Action icon="dots-vertical" onPress={goFilter} />
+      </Appbar.Header>
+    );
+  }

LeftOvers/components/RecipeElement.tsx

@@ -22,6 +22,7 @@ export default function RecipeElement(props : any) {
   const scrollViewHeight = 100;
 
 
+
   return (
     <Pressable style={[styles.button, { height: dynamicHeight }]}>
       <View style={[styles.view, { height: dynamicHeight - 10}]}>

LeftOvers/components/SelectedIngredient.tsx

@@ -31,7 +31,6 @@ export default function SelectedIngredient(props: SelectedIngredientProps) {
   };
 
   const handlePress = () => {
-    // Supposons que vous voulez envoyer la valeur 'Hello' au parent
     props.onEvent('Hello');
   };
 

LeftOvers/screens/RecipeSuggestion.tsx

@@ -1,30 +1,72 @@
 import React, { useState } from 'react';
-import { View, StyleSheet, Text, Image, ScrollView} from 'react-native';
+import { View, StyleSheet, Text, Image, Pressable} from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
-import { Modal, Portal, PaperProvider } from 'react-native-paper';
+import { Modal, Portal, PaperProvider} from 'react-native-paper';
 import TopBar from '../components/TopBar';
 import RecipeElement from '../components/RecipeElement';
 import SelectedIngredient from '../components/SelectedIngredient';
 import FoodElementText from '../components/FoodElementText';
 import brochette from '../assets/images/brochette.png'; 
+import ParameterTopBar from '../components/ParameterTopBar';
+import bracketLeft from '../assets/images/angle_bracket_left.png';
+import bracketRight from '../assets/images/angle_bracket_right.png';
 
 
 export default function RecipeSuggestion(props) {
 
   const imageList = [];
   const [visible, setVisible] = React.useState(false);
+  const [visibleFilters, setVisibleFilters] = React.useState(false);
+  const [visibleIngredients, setVisibleIngredients] = React.useState(true);
+  const [minCpt, setMinCpt] = useState(0);
+  const [maxCpt, setMaxCpt] = useState(4);
+  const listeIngredient = props.list;
+  const limitedList = listeIngredient.slice(minCpt, maxCpt);
   const showModal = () => setVisible(true);
   const hideModal = () => setVisible(false);
   const containerStyle = {
     backgroundColor: 'white',
-    height: 350,
-    width: 370,
+    height: 400,
+    width: 380,
   };
   
   const handleChildEvent = (value) => {
    setVisible(!visible)
   };
 
+  const handleChildEventGoFilters = (value) => {
+    setVisibleIngredients(false);
+    setVisibleFilters(true);
+  }
+
+  const handleChildEventGoIngredients = (value) => {
+      setVisibleFilters(false);
+      setVisibleIngredients(true);
+      console.log("jai change pour iingredient");
+  }
+
+  const decreaseCounter = () => {
+    if (minCpt > 0) {
+      setMinCpt(minCpt - 4);
+      setMaxCpt(maxCpt - 4)
+    } 
+  };
+
+  const increaseCounter = () => {
+    if (maxCpt < listeIngredient.length) {
+      setMinCpt(minCpt + 4);
+      setMaxCpt(maxCpt + 4)
+    } 
+  };
+
+  const imageElements = limitedList.map((source, index) => (
+      <View style={[styles.horizontalAlignement, { marginBottom: 10 }]}>
+        <FoodElementText key={index} title={source} />
+        <Image source={brochette} style={{ width: 20, height: 20 }} />
+        <Image source={brochette} style={{ width: 20, height: 20 }} />
+      </View>
+  ));
+
   return (
     <SafeAreaProvider>
       <TopBar />
@@ -49,21 +91,30 @@ export default function RecipeSuggestion(props) {
             <PaperProvider>
                 <Portal>
                     <Modal visible={visible} onDismiss={hideModal} contentContainerStyle={containerStyle}>
-                        <View style={[styles.page, { justifyContent: 'space-around' }]}>
-                            <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
-                                    <View style={[styles.horizontalAlignement, { marginBottom: 10 }]}>
-                                        <FoodElementText title="test" />
-                                        <Image source={brochette} style={{ width: 20, height: 20 }} />
-                                        <Image source={brochette} style={{ width: 20, height: 20 }} />
-                                    </View>
+                        <ParameterTopBar  onEventFilter={handleChildEventGoFilters} onEventIngredient={handleChildEventGoIngredients}></ParameterTopBar>
+
+                        {visibleIngredients && (
+                        <View style={[styles.page, { justifyContent: 'space-between' }]}>   
+                                    {imageElements}
+                                    <View id="IngredientList" style={[styles.horizontalAlignement, {marginTop: 10}]}>
+                                        <Pressable onPress={decreaseCounter} id="GoLeft" >
+                                          <Image source={bracketLeft} style={{ width: 20, height: 20 }} />
+                                        </Pressable>
+
+                                        <Pressable onPress={increaseCounter} id="GoRight">
+                                          <Image source={bracketRight} style={{ width: 20, height: 20 }} />
+                                        </Pressable>
+                                      </View>
+                        </View>
+                        )} 
+
+                        {visibleFilters &&(
+                           <View style={[styles.page, { justifyContent: 'space-between'}]}>
+                              <Text>HEHEHEHEHEHEHE</Text>
+                          </View>
+                        )}
+
 
-                                    <View style={[styles.horizontalAlignement, { marginBottom: 10 }]}>
-                                        <FoodElementText title="test" />
-                                        <Image source={brochette} style={{ width: 20, height: 20 }} />
-                                        <Image source={brochette} style={{ width: 20, height: 20 }} />
-                                    </View>
-                            </ScrollView>
-                        </View>           
                     </Modal>
                 </Portal>
             </PaperProvider>
@@ -91,7 +142,7 @@ const styles = StyleSheet.create({
     position: 'absolute',
     top: '50%', // Centre verticalement
     left: '50%', // Centre horizontalement
-    transform: [{ translateX: -185 }, { translateY: -175 }], // Ajustez en fonction de la moitié de la hauteur et de la largeur
+    transform: [{ translateX: -185 }, { translateY: -120 }], // Ajustez en fonction de la moitié de la hauteur et de la largeur
   },
   horizontalAlignement: {
     display: 'flex',