From 11b7df605ce092b24f4489c25d2162f072d642f4 Mon Sep 17 00:00:00 2001 From: Rayhan Hassou Date: Tue, 14 Nov 2023 10:24:10 +0100 Subject: [PATCH] upgrade parameters for selected ingredient, the modal is functionnal, to do : filters selection --- LeftOvers/App.js | 5 ++ LeftOvers/components/ParameterTopBar.tsx | 27 +++++++ LeftOvers/components/RecipeElement.tsx | 1 + LeftOvers/components/SelectedIngredient.tsx | 1 - LeftOvers/screens/RecipeSuggestion.tsx | 89 ++++++++++++++++----- 5 files changed, 103 insertions(+), 20 deletions(-) create mode 100644 LeftOvers/components/ParameterTopBar.tsx diff --git a/LeftOvers/App.js b/LeftOvers/App.js index 1310760..5271af4 100644 --- a/LeftOvers/App.js +++ b/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; }; diff --git a/LeftOvers/components/ParameterTopBar.tsx b/LeftOvers/components/ParameterTopBar.tsx new file mode 100644 index 0000000..6f84163 --- /dev/null +++ b/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 ( + + + + + ); + } \ No newline at end of file diff --git a/LeftOvers/components/RecipeElement.tsx b/LeftOvers/components/RecipeElement.tsx index c53f34e..57b5588 100644 --- a/LeftOvers/components/RecipeElement.tsx +++ b/LeftOvers/components/RecipeElement.tsx @@ -22,6 +22,7 @@ export default function RecipeElement(props : any) { const scrollViewHeight = 100; + return ( diff --git a/LeftOvers/components/SelectedIngredient.tsx b/LeftOvers/components/SelectedIngredient.tsx index 26e690c..a6c3ffd 100644 --- a/LeftOvers/components/SelectedIngredient.tsx +++ b/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'); }; diff --git a/LeftOvers/screens/RecipeSuggestion.tsx b/LeftOvers/screens/RecipeSuggestion.tsx index bb128ac..738fe00 100644 --- a/LeftOvers/screens/RecipeSuggestion.tsx +++ b/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) => ( + + + + + + )); + return ( @@ -49,21 +91,30 @@ export default function RecipeSuggestion(props) { - - - - - - - + + + {visibleIngredients && ( + + {imageElements} + + + + + + + + + + + )} + + {visibleFilters &&( + + HEHEHEHEHEHEHE + + )} + - - - - - - - @@ -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',