From 989f2c2813c54795f435c5f22fe224a7cc16b130 Mon Sep 17 00:00:00 2001
From: Remi REGNAULT <Remi.REGNAULT@etu.uca.fr>
Date: Tue, 28 Nov 2023 15:33:35 +0100
Subject: [PATCH] refactor: Ingredients selection page

---
 LeftOvers/screens/IngredientSelection.tsx | 199 +++++++++++-----------
 1 file changed, 101 insertions(+), 98 deletions(-)

diff --git a/LeftOvers/screens/IngredientSelection.tsx b/LeftOvers/screens/IngredientSelection.tsx
index 3b90812..9933677 100644
--- a/LeftOvers/screens/IngredientSelection.tsx
+++ b/LeftOvers/screens/IngredientSelection.tsx
@@ -14,114 +14,117 @@ import fruit from '../assets/images/fruit_icon.png';
 
 
 export default function IngredientSelection(props) {
+    const [searchQuery, setSearchQuery] = React.useState('');
 
-  const [searchQuery, setSearchQuery] = React.useState('');
+    const onChangeSearch = query => setSearchQuery(query);
 
-  const onChangeSearch = query => setSearchQuery(query);
+    type ItemProps = {value: string}
 
-  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>
-          <View style={styles.page}>
-
-            <View style={styles.element}>
-              <View style={[styles.horizontalAlignement, {justifyContent: 'center'}]}>
+    const AvailaibleItem = ({value}: ItemProps) => (
+        <>
+            <View style={styles.horizontalAlignement}>
+                <FoodElementText title={value} />
                 <Pressable>
-                    <Image source={meat} style={{ width: 30, height: 30 }} />
-                </Pressable>
-                <Pressable>
-                    <Image source={vegetable} style={{ width: 30, height: 30 }} />
+                    <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={fruit} style={{ width: 30, height: 30 }} />
+                    <Image source={moins} style={{ width: 20, height: 20 }} />
                 </Pressable>
-              </View>
-              <View>
-              <Searchbar
-                  placeholder="Search"
-                  onChangeText={onChangeSearch}
-                  value={searchQuery} 
-                  style={{margin: 10, 
-                          backgroundColor: '#F2F0E4', 
-                          borderWidth : 1,
-                          borderColor: "#ACA279", 
-                          borderRadius: 15,
-                          height: 50,
-                          }}/>
-              </View>
-              <View style={{ flex: 1}} >
-                <ScrollView contentContainerStyle={{ alignItems: 'center', height: 300}}>
-                      {props.listIngredient.map((source, index) => (
-                        <AvailaibleItem key={index} value={source}></AvailaibleItem>
-                      ))}
-                </ScrollView>
-              </View>
-              <View style={{ height: 20 }}></View>
-            </View>
+            </View><View style={{ height: 30 }}></View>
+        </>   
+    )
+
+    
+    const styles = StyleSheet.create({
+        page: {
+            flex: 1,
+            backgroundColor: '#59BDCD',
+            alignItems: 'center',
+            display: 'flex',
+            flexWrap: 'wrap',
+            padding: 20,
+        },
+        element: {
+            backgroundColor:'#F2F0E4', 
+            borderRadius: 30,
+        },
+        horizontalAlignement: {
+            display: 'flex',
+            height: 30,
+            width: 350,
+            flexDirection: 'row',
+            justifyContent: 'space-around',
+            alignItems: 'center',
+            marginTop: 15,
+        }
+    });
 
-            <View style={[styles.element, {marginTop:  40}]}>
-                <View style={[styles.horizontalAlignement, {justifyContent: "flex-start", marginLeft: 10}]}>
-                  <Text style={{fontSize: 20, color: '#ACA279'}}>Available</Text>
+    return (
+        <SafeAreaProvider>
+            <View style={styles.page}>
+                <View style={styles.element}>
+                    <View style={[styles.horizontalAlignement, {justifyContent: 'center'}]}>
+                        <Pressable>
+                            <Image source={meat} style={{ width: 30, height: 30 }} />
+                        </Pressable>
+                        <Pressable>
+                            <Image source={vegetable} style={{ width: 30, height: 30 }} />
+                        </Pressable>
+                        <Pressable>
+                            <Image source={fruit} style={{ width: 30, height: 30 }} />
+                        </Pressable>
+                    </View>
+                    <View>
+                        <Searchbar
+                            placeholder="Search"
+                            onChangeText={onChangeSearch}
+                            value={searchQuery} 
+                            style={{margin: 10, 
+                                    backgroundColor: '#F2F0E4', 
+                                    borderWidth : 1,
+                                    borderColor: "#ACA279", 
+                                    borderRadius: 15,
+                                    height: 50,
+                                    }}/>
+                    </View>
+                    <View style={{ flex: 1}} >
+                        <ScrollView contentContainerStyle={{ alignItems: 'center', height: 300}}>
+                            {props.listIngredient.map((source, index) => (
+                                <AvailaibleItem key={index} value={source}></AvailaibleItem>
+                            ))}
+                        </ScrollView>
+                    </View>
+                    <View style={{ height: 20 }}></View>
                 </View>
-                
-                <View style={{ height: 5 }}></View>
 
-                <View style={{ flex: 1}} > 
-                <ScrollView contentContainerStyle={{ alignItems: 'center', height: 150}}>
-                      {props.listIngredient.map((source, index) => (
-                        <ChooseItem key={index} value={source}></ChooseItem>
-                      ))}
-                </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={{ height: 15 }}></View>
-            <CustomButton title="Find a recipe"/>                
-          </View>
+                    <View style={{ flex: 1}} > 
+                        <ScrollView contentContainerStyle={{ alignItems: 'center', height: 150}}>
+                            {props.listIngredient.map((source, index) => (
+                                <ChooseItem key={index} value={source}></ChooseItem>
+                            ))}
+                        </ScrollView>
+                    </View>
+                    <View style={{ height: 20 }}></View>
+                </View>
+
+                <View style={{ height: 15 }}></View>
+                <CustomButton title="Find a recipe" />
+            </View>
         </SafeAreaProvider>
-  );
+    );
 }
-
-const styles = StyleSheet.create({
-  page: {
-    flex: 1,
-    backgroundColor: '#59BDCD',
-    alignItems: 'center',
-    display: 'flex',
-    flexWrap: 'wrap',
-    padding: 20,
-  },
-  element: {
-    backgroundColor:'#F2F0E4', 
-    borderRadius: 30,
-  },
-  horizontalAlignement: {
-    display: 'flex',
-    height: 30,
-    width: 350,
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    alignItems: 'center',
-    marginTop: 15,
-  }
-});