From da6c25d296acb00051d3d4bf4175900db0ce8060 Mon Sep 17 00:00:00 2001
From: Rayhan Hassou <Rayhan.HASSOU@etu.uca.fr>
Date: Mon, 13 Nov 2023 15:49:36 +0100
Subject: [PATCH] add modal

---
 LeftOvers/components/SelectedIngredient.tsx | 127 ++++++++++----------
 LeftOvers/components/TopBar.tsx             |   6 +-
 LeftOvers/screens/RecipeSuggestion.tsx      | 122 +++++++++++++------
 3 files changed, 150 insertions(+), 105 deletions(-)

diff --git a/LeftOvers/components/SelectedIngredient.tsx b/LeftOvers/components/SelectedIngredient.tsx
index 6886287..26e690c 100644
--- a/LeftOvers/components/SelectedIngredient.tsx
+++ b/LeftOvers/components/SelectedIngredient.tsx
@@ -1,89 +1,90 @@
-import React,  { useState }  from 'react';
-import {StyleSheet,Pressable, Text, View, Image} from 'react-native';
-import bracketLeft from '../assets/images/angle_bracket_left.png'; 
+import React, { useState } from 'react';
+import { View, StyleSheet, Pressable, Image, Text } from 'react-native';
+import bracketLeft from '../assets/images/angle_bracket_left.png';
 import bracketRight from '../assets/images/angle_bracket_right.png';
 import parameter from '../assets/images/parameter.png';
 import FoodElementText from './FoodElementText';
 
-interface selectedIngredientProps {
-    listeIngredient : string[]
-    listeImage  : string[]
-    
+interface SelectedIngredientProps {
+  listeIngredient: string[];
+  listeImage: string[];
+  onEvent: (value: string) => void;
 }
 
-export default function SelectedIngredient(props : any) {
-
-    const [cpt, setCpt] = useState(0);
+export default function SelectedIngredient(props: SelectedIngredientProps) {
+  const [cpt, setCpt] = useState(0);
 
   const decreaseCounter = () => {
     if (cpt > 0) {
       setCpt(cpt - 1);
-    }
-    else{
-        setCpt( props.listeIngredient.length - 1);
+    } else {
+      setCpt(props.listeIngredient.length - 1);
     }
   };
 
   const increaseCounter = () => {
     if (cpt < props.listeIngredient.length - 1) {
       setCpt(cpt + 1);
-    }else{
-        setCpt(0);
+    } else {
+      setCpt(0);
     }
   };
 
-    return (
-      <View style={styles.view}>
-        <View id="Top" style={styles.horizontalAlignement}>
-            <Text style={styles.text}>Selected ingredients</Text>
-            <Pressable>
-                <Image source={parameter} style={{ width: 15, height: 15 }} />
-            </Pressable>
-        </View>
+  const handlePress = () => {
+    // Supposons que vous voulez envoyer la valeur 'Hello' au parent
+    props.onEvent('Hello');
+  };
 
-        <View id="IngredientList" style={styles.horizontalAlignement}>
-            <Pressable onPress={decreaseCounter} id="GoLeft" style={{}}>
-                <Image source={bracketLeft} style={{ width: 40, height: 40 }} />
-            </Pressable>
+  return (
+    <View style={styles.view}>
+      <View id="Top" style={styles.horizontalAlignement}>
+        <Text style={styles.text}>Selected ingredients</Text>
+        <Pressable onPress={handlePress}>
+          <Image source={parameter} style={{ width: 15, height: 15 }} />
+        </Pressable>
+      </View>
 
-            <FoodElementText title={props.listeIngredient[cpt]} />
+      <View id="IngredientList" style={styles.horizontalAlignement}>
+        <Pressable onPress={decreaseCounter} id="GoLeft" style={{}}>
+          <Image source={bracketLeft} style={{ width: 40, height: 40 }} />
+        </Pressable>
 
-            <Pressable onPress={increaseCounter} id="GoRight" style={{}}>
-                <Image source={bracketRight} style={{ width: 40, height: 40 }} />
-            </Pressable>
-        </View>
+        <FoodElementText title={props.listeIngredient[cpt]} />
+
+        <Pressable onPress={increaseCounter} id="GoRight" style={{}}>
+          <Image source={bracketRight} style={{ width: 40, height: 40 }} />
+        </Pressable>
       </View>
-    );
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({
-      view: {
-        width : 350,
-        height: 110,
-        borderRadius: 15,
-        elevation: 3,
-        borderWidth: 2,
-        borderColor: 'black',
-        display: "flex",
-        flexWrap: "wrap",
-        backgroundColor: '#E3DEC9',
-      },
-      horizontalAlignement: {
-        display: "flex",
-        height : 30,
-        width: 350,
-        flexDirection : 'row',
-        justifyContent : 'space-around',
-        alignItems: 'center',
-        marginTop: 10,
-      },
-      text: {
-        fontSize: 14,
-        lineHeight: 21,
-        fontWeight: 'bold',
-        letterSpacing: 0.25,
-        color: 'black',
-      }
-  });
-
-
+  view: {
+    width: 350,
+    height: 110,
+    borderRadius: 15,
+    elevation: 3,
+    borderWidth: 1,
+    borderColor: 'black',
+    display: 'flex',
+    flexWrap: 'wrap',
+    backgroundColor: '#E3DEC9',
+  },
+  horizontalAlignement: {
+    display: 'flex',
+    height: 30,
+    width: 350,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    marginTop: 10,
+  },
+  text: {
+    fontSize: 14,
+    lineHeight: 21,
+    fontWeight: 'bold',
+    letterSpacing: 0.25,
+    color: 'black',
+  },
+});
diff --git a/LeftOvers/components/TopBar.tsx b/LeftOvers/components/TopBar.tsx
index c305bfc..639422d 100644
--- a/LeftOvers/components/TopBar.tsx
+++ b/LeftOvers/components/TopBar.tsx
@@ -1,7 +1,5 @@
-import React, { startTransition } from 'react';
-import {StyleSheet,Pressable, Text, View, Image} from 'react-native';
+import React from 'react';
 import { Appbar } from 'react-native-paper';
-import backward from '../assets/images/backward_arrows.png'; 
 
 interface TopBarProps{
     source : string
@@ -20,7 +18,7 @@ interface TopBarProps{
     return (
         <Appbar.Header  style={{backgroundColor: '#F2F0E4'}} >
             <Appbar.BackAction onPress={_goBack} />
-            <Appbar.Content title="Title" />
+            <Appbar.Content title="Recipes" />
             <Appbar.Action icon="magnify" onPress={_handleSearch} />
             <Appbar.Action icon="dots-vertical" onPress={_handleMore} />
       </Appbar.Header>
diff --git a/LeftOvers/screens/RecipeSuggestion.tsx b/LeftOvers/screens/RecipeSuggestion.tsx
index f02b18c..0892ff9 100644
--- a/LeftOvers/screens/RecipeSuggestion.tsx
+++ b/LeftOvers/screens/RecipeSuggestion.tsx
@@ -1,46 +1,92 @@
-import React from 'react';
-import {StyleSheet, View} from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
-import TopBar from '../components/TopBar';
+import React, { useState } from 'react';
+import { View, StyleSheet, Text, Image} from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
-import SelectedIngredient from '../components/SelectedIngredient';
+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'; 
 
-interface RecipeSuggestionProps{
-    source : string
-    firstImage  : string
-    lastImage : string
-  }
 
-  export default function RecipeSuggestion(props : any) {
+export default function RecipeSuggestion(props) {
 
-    const imageList=[]
-    return (
-        <SafeAreaProvider>
-            <TopBar></TopBar>
-          
-                <View style={styles.page}>
-                    <SelectedIngredient listeIngredient={props.list}  imageList={imageList} style={styles.element}></SelectedIngredient>
-                    <View style={{marginTop: 100}}>
-                        <RecipeElement number="13" title="Pizza with Pineaples"  imageList={imageList} textList={props.list} description="delicious plate that will please you" style={styles.element}></RecipeElement>
-                    </View>
-                </View>
+  const imageList = [];
+  const [visible, setVisible] = React.useState(false);
+  const showModal = () => setVisible(true);
+  const hideModal = () => setVisible(false);
+  const containerStyle = {
+    backgroundColor: 'white',
+    height: 350,
+    width: 350,
+  };
+  
+  const handleChildEvent = (value) => {
+   setVisible(!visible)
+  };
 
-        </SafeAreaProvider>
-    );
-  }
+  return (
+    <SafeAreaProvider>
+      <TopBar />
+      <View style={styles.page}>
+        <SelectedIngredient 
+          listeIngredient={props.list} 
+          listeImage={imageList} 
+          onEvent={handleChildEvent} 
+        />
+        <View style={{ marginTop: 100 }}>
+          <RecipeElement
+            number="13"
+            title="Pizza with Pineapples"
+            imageList={imageList}
+            textList={props.list}
+            description="delicious plate that will please you"
+            style={styles.element}
+          />
+        </View>
+      </View>
+      <View style={styles.modal}>
+            <PaperProvider>
+                <Portal>
+                    <Modal visible={visible} onDismiss={hideModal} contentContainerStyle={containerStyle}>
+                        <View style={styles.page}>
+                            <View>
+                                <FoodElementText title="test"></FoodElementText>
+                                <Image source={brochette} style={{ width: 10, height: 10 }}/>
+                            </View>
+                           
+                            <FoodElementText title="test"></FoodElementText>
+                            <FoodElementText title="test"></FoodElementText>
+                            <FoodElementText title="test"></FoodElementText>
+                            <FoodElementText title="test"></FoodElementText>
+                        </View>
+                    </Modal>
+                </Portal>
+            </PaperProvider>
+        </View>
+    </SafeAreaProvider>
+  );
+}
 
-  const styles = StyleSheet.create({
-    page: {
-      flex: 1, 
-      backgroundColor: '#59BDCD',
-      alignItems: 'center',
-      display: "flex",
-      flexWrap: "wrap",
-      padding: 20,   
-    },
-    element: {
-        marginTop: 20,
-    }
+const styles = StyleSheet.create({
+  page: {
+    flex: 1,
+    backgroundColor: '#59BDCD',
+    alignItems: 'center',
+    display: 'flex',
+    flexWrap: 'wrap',
+    padding: 20,
+  },
+  element: {
+    marginTop: 20,
+  },
+  backdrop: {
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  modal :{
+    position: 'absolute',
+    top: '50%', // Centre verticalement
+    left: '50%', // Centre horizontalement
+    transform: [{ translateX: -150 }, { translateY: -150 }], // Ajustez en fonction de la moitié de la hauteur et de la largeur
+  }
 });
-