From 93eaee5cccd4ce03500a61f9570dd89ac49e0f99 Mon Sep 17 00:00:00 2001
From: Rayhan Hassou <Rayhan.HASSOU@etu.uca.fr>
Date: Wed, 15 Nov 2023 11:35:14 +0100
Subject: [PATCH] upgrade some component and changes somes images

---
 LeftOvers/App.tsx                         |   8 ++-
 LeftOvers/naviguation/parameter.png       | Bin 410 -> 0 bytes
 LeftOvers/screens/IngredientSelection.tsx |  82 ++++++++--------------
 LeftOvers/screens/RecipeSuggestion.tsx    |  17 +++--
 4 files changed, 45 insertions(+), 62 deletions(-)
 delete mode 100644 LeftOvers/naviguation/parameter.png

diff --git a/LeftOvers/App.tsx b/LeftOvers/App.tsx
index 02e37c5..8a8b1b2 100644
--- a/LeftOvers/App.tsx
+++ b/LeftOvers/App.tsx
@@ -5,6 +5,7 @@ import ValidateButton from './components/ValidateButton';
 import { LinearGradient } from 'expo-linear-gradient';
 import RecipeSuggestion from './screens/RecipeSuggestion';
 import RecipeDetails from './screens/RecipeDetails';
+import IngredientSelection from './screens/IngredientSelection';
 
 export default function App() {
   const all = [{value: "Mussels"}, {value: "Skimmed Milk"}, {value: "Nuts"}]
@@ -36,14 +37,15 @@ export default function App() {
 const ingredients = generateList();
   
   return (
-    /*<RecipeSuggestion list={ingredients} diets={die} allergy={all}></RecipeSuggestion> */
-    <RecipeDetails ingredient={ingredient} 
+    <IngredientSelection listIngredient={ingredients}></IngredientSelection>
+    /*<RecipeSuggestion list={ingredients} diets={die} allergy={all}></RecipeSuggestion>*/
+    /*<RecipeDetails ingredient={ingredient} 
     ustensils={ustensils} 
     steps={steps} 
     title="Chocolat Cake" 
     number="63"
     duree="30 minutes"
-    ></RecipeDetails>
+    ></RecipeDetails>*/
   );
 }
 
diff --git a/LeftOvers/naviguation/parameter.png b/LeftOvers/naviguation/parameter.png
deleted file mode 100644
index 08425b498d677ebd915c1bb20acb5317f0d496b6..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 410
zcmV;L0cHM)P)<h;3K|Lk000e1NJLTq000dD000dL1^@s6a_i)L00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0WV2JK~#7Fjgrw(
z!axv)|2^V6C4>ruH;2LDpaQJ`Qh{S7jukLe;Lw0M26TKAEAZ^V0?7UDnFN#Y;yxs^
zd*ANu{kwvW*|8ncnD^S35Jv9R9h!{kCKbJ2+VWwBT}I+(dOiOH#S`H}APWukPXys9
zSPM8+yuaN)kHn7WOB$^3PYcAoq2ZzxCA}cb<QN9=51~ivJ-kcg$cz`rwY~JWUt#9<
z&Q*-J6Ppo|R}~LZ@Yc9D=Sf-Dl^O|Wz9w%XFZRl&Ow5zUhNUuL)&%t?OPIVCMG9@b
zR1PT`YKeplM|dPiDQ49=hqy$C_oxRCe=!AP<>XYPWkPPsIZbA91HQFqr$Q`iQK~GB
z$2s9L-nf0q2ZD}u=N2T~>~?O`WX{$|vDTjT3Vd~m9~R|_oVka=VgLXD07*qoM6N<$
Ef__h{jsO4v

diff --git a/LeftOvers/screens/IngredientSelection.tsx b/LeftOvers/screens/IngredientSelection.tsx
index 6e8fa0a..0dd8546 100644
--- a/LeftOvers/screens/IngredientSelection.tsx
+++ b/LeftOvers/screens/IngredientSelection.tsx
@@ -6,14 +6,36 @@ import { Searchbar } from 'react-native-paper';
 import brochette from '../assets/images/brochette.png'; 
 import FoodElementText from '../components/FoodElementText';
 import CustomButton from '../components/CustomButton';
+import plus from '../assets/images/plus.png';
+import moins from '../assets/images/minus.png';
 
 
-export default function IngredientSelection() {
+export default function IngredientSelection(props) {
 
   const [searchQuery, setSearchQuery] = React.useState('');
 
   const onChangeSearch = query => setSearchQuery(query);
 
+  type ItemProps = {value: string}
+
+  const AvailaibleItem = ({value}: ItemProps) => (
+    <><View style={styles.horizontalAlignement}>
+      <FoodElementText title={value} />
+      <Pressable>
+        <Image source={plus} style={{ width: 20, height: 20 }} />
+      </Pressable>
+    </View><View style={{ height: 30 }}></View></>   
+)
+
+const ChooseItem = ({value}: ItemProps) => (
+  <><View style={styles.horizontalAlignement}>
+    <FoodElementText title={value} />
+    <Pressable>
+      <Image source={moins} style={{ width: 20, height: 20 }} />
+    </Pressable>
+  </View><View style={{ height: 30 }}></View></>   
+)
+
   return (
     <SafeAreaProvider>
           <TopBar title="Ingredient selection" />
@@ -49,70 +71,26 @@ export default function IngredientSelection() {
               </View>
               <View style={{ flex: 1}} >
                 <ScrollView contentContainerStyle={{ alignItems: 'center', height: 300}}>
-
-                  <View style={styles.horizontalAlignement}>
-                    <FoodElementText title="test" />
-                    <Image source={brochette} style={{ width: 20, height: 20 }} />
-                  </View>
-                  <View style={{ height: 30 }}></View>
-
-                  <View style={styles.horizontalAlignement}>
-                    <FoodElementText title="test" />
-                    <Image source={brochette} style={{ width: 20, height: 20 }} />
-                  </View>
-                  <View style={{ height: 30 }}></View>
-
-                  <View style={styles.horizontalAlignement}>
-                    <FoodElementText title="test" />
-                    <Image source={brochette} style={{ width: 20, height: 20 }} />
-                  </View>
-                  <View style={{ height: 30 }}></View>
-
-                  <View style={styles.horizontalAlignement}>
-                    <FoodElementText title="test" />
-                    <Image source={brochette} style={{ width: 20, height: 20 }} />
-                  </View>
-                  <View style={{ height: 30 }}></View>
-
-                  <View style={styles.horizontalAlignement}>
-                    <FoodElementText title="test" />
-                    <Image source={brochette} style={{ width: 20, height: 20 }} />
-                  </View>
-                  <View style={{ height: 30 }}></View>
-  
-                  
+                      {props.listIngredient.map((source, index) => (
+                        <AvailaibleItem key={index} value={source}></AvailaibleItem>
+                      ))}
                 </ScrollView>
               </View>
               <View style={{ height: 20 }}></View>
             </View>
 
             <View style={[styles.element, {marginTop:  40}]}>
-
                 <View style={[styles.horizontalAlignement, {justifyContent: "flex-start", marginLeft: 10}]}>
                   <Text style={{fontSize: 20, color: '#ACA279'}}>Available</Text>
                 </View>
                 
                 <View style={{ height: 5 }}></View>
 
-                <View style={{ flex: 1}} >
+                <View style={{ flex: 1}} > 
                 <ScrollView contentContainerStyle={{ alignItems: 'center', height: 150}}>
-                <View style={styles.horizontalAlignement}>
-                    <FoodElementText title="test" />
-                    <Image source={brochette} style={{ width: 20, height: 20 }} />
-                  </View>
-                  <View style={{ height: 30 }}></View>
-
-                  <View style={styles.horizontalAlignement}>
-                    <FoodElementText title="test" />
-                    <Image source={brochette} style={{ width: 20, height: 20 }} />
-                  </View>
-                  <View style={{ height: 30 }}></View>
-
-                  <View style={styles.horizontalAlignement}>
-                    <FoodElementText title="test" />       
-                    <Image source={brochette} style={{ width: 20, height: 20 }} />
-                  </View>
-                  <View style={{ height: 30 }}></View>
+                      {props.listIngredient.map((source, index) => (
+                        <ChooseItem key={index} value={source}></ChooseItem>
+                      ))}
                 </ScrollView>
               </View>
               <View style={{ height: 20 }}></View>
diff --git a/LeftOvers/screens/RecipeSuggestion.tsx b/LeftOvers/screens/RecipeSuggestion.tsx
index 6357bb3..4c88f18 100644
--- a/LeftOvers/screens/RecipeSuggestion.tsx
+++ b/LeftOvers/screens/RecipeSuggestion.tsx
@@ -12,6 +12,8 @@ import bracketLeft from '../assets/images/angle_bracket_left.png';
 import bracketRight from '../assets/images/angle_bracket_right.png';
 import CustomButton from '../components/CustomButton';
 import DietsTab from '../components/DietsTab';
+import plus from '../assets/images/plus.png';
+import moins from '../assets/images/minus.png';
 
 
 export default function RecipeSuggestion(props) {
@@ -44,7 +46,6 @@ export default function RecipeSuggestion(props) {
   const handleChildEventGoIngredients = (value) => {
       setVisibleFilters(false);
       setVisibleIngredients(true);
-      console.log("jai change pour iingredient");
   }
 
   const decreaseCounter = () => {
@@ -64,8 +65,14 @@ export default function RecipeSuggestion(props) {
   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 }} />
+        <Pressable>
+          <Image source={plus} style={{ width: 20, height: 20 }} />
+        </Pressable>
+        
+        <Pressable>
+          <Image source={moins} style={{ width: 20, height: 20 }} />
+        </Pressable>
+        
       </View>
   ));
 
@@ -132,11 +139,7 @@ export default function RecipeSuggestion(props) {
                                   <CustomButton title="Save"></CustomButton>
                               </View>
                           </View>
-
-
                         )}
-
-
                     </Modal>
                 </Portal>
             </PaperProvider>