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',