From e38cfc8ce4e15d5616c601b4a8d3614a82cd53d8 Mon Sep 17 00:00:00 2001
From: Louison PARANT <Louison.PARANT@etu.uca.fr>
Date: Thu, 30 Nov 2023 12:08:32 +0100
Subject: [PATCH 1/2] Update Ingredient Selection Page

---
 LeftOvers/components/ListWithoutSelect.tsx |   2 +-
 LeftOvers/components/ProfileDelete.tsx     |   6 +-
 LeftOvers/screens/IngredientSelection.tsx  | 151 +++++++++++++++------
 LeftOvers/screens/Profiles.tsx             |   2 +-
 4 files changed, 115 insertions(+), 46 deletions(-)

diff --git a/LeftOvers/components/ListWithoutSelect.tsx b/LeftOvers/components/ListWithoutSelect.tsx
index ce43197..3885f1b 100644
--- a/LeftOvers/components/ListWithoutSelect.tsx
+++ b/LeftOvers/components/ListWithoutSelect.tsx
@@ -5,7 +5,7 @@ import ColorContext from '../theme/ColorContext';
 
 type ListProps = {
     title: string
-    content: {title: string}[]
+    content: {value: string}[]
 }
 
 export default function ListWithoutSelect(props: ListProps) {
diff --git a/LeftOvers/components/ProfileDelete.tsx b/LeftOvers/components/ProfileDelete.tsx
index 0afa801..5295cf2 100644
--- a/LeftOvers/components/ProfileDelete.tsx
+++ b/LeftOvers/components/ProfileDelete.tsx
@@ -6,8 +6,8 @@ import ColorContext from '../theme/ColorContext';
 type ProfileProps = {
   name: string
   avatar: string
-  diets: {title: string}[]
-  allergies: {title: string}[]
+  diets: {value: string}[]
+  allergies: {value: string}[]
 }
 
 export default function ProfileDelete(props: ProfileProps) {
@@ -84,7 +84,7 @@ export default function ProfileDelete(props: ProfileProps) {
     },
     filters: {
         fontSize: 20,
-        color: colors.cardElementBackground,
+        color: colors.cardElementBorder,
         flex: 1,
         padding: "2%",
         paddingLeft: 0,
diff --git a/LeftOvers/screens/IngredientSelection.tsx b/LeftOvers/screens/IngredientSelection.tsx
index 9bfe6ca..cd1b0a5 100644
--- a/LeftOvers/screens/IngredientSelection.tsx
+++ b/LeftOvers/screens/IngredientSelection.tsx
@@ -21,7 +21,9 @@ export default function IngredientSelection(props) {
   const [selectedIngredients, setSelectedIngredients] = useState([]);
   const ingredientService = new IngredientService();
   const {colors} = useContext(ColorContext);
-
+  const [availableSize, setAvailableSize] = useState(0);
+  const [listVisibility, setListVisibility] = useState("none");
+  const [availableVisibility, setAvailableVisibility] = useState("none");
   const [searchQuery, setSearchQuery] = useState('');
 
   const filterIngredients = async (query) => {
@@ -67,10 +69,10 @@ const loadIngredients = async () => {
       <View style={styles.horizontalAlignment}>
         <FoodElementText title={value.name} />
         <Pressable onPress={() => SelectIngredient(value)}>
-          <Image source={plus} style={{ width: 20, height: 20 }} />
+          <Image source={plus} style={{ width: 20, height: 20, tintColor: colors.cardDetail }} />
         </Pressable>
       </View>
-      <View style={{ height: 30 }}></View>
+      <View style={{ height: 20 }}></View>
     </>
   );
 
@@ -79,26 +81,65 @@ const loadIngredients = async () => {
       <View style={styles.horizontalAlignment}>
         <FoodElementText title={value.name} />
         <Pressable onPress={() => RemoveIngredient(value.id)}>
-          <Image source={moins} style={{ width: 20, height: 20 }} />
+          <Image source={moins} style={{ width: 20, height: 20, tintColor: colors.cardDetail }} />
         </Pressable>
       </View>
-      <View style={{ height: 30 }}></View>
+      <View style={{ height: 20 }}></View>
     </>
   );
 
   const SelectIngredient = (newIngredient: Ingredient) => {
     const exists = selectedIngredients.find((ingredient) => ingredient.id === newIngredient.id);
-
+    console.log("Test 1: ", selectedIngredients.length)
     if (!exists) {
       setSelectedIngredients([...selectedIngredients, newIngredient]);
     }
+    console.log("Test 2: ", selectedIngredients.length)
+    ChangeAvailableSize(false)
   };
 
   const RemoveIngredient = (idIngredient: number) => {
+    console.log("Test 1 Remove: ", selectedIngredients.length)
     const updatedIngredients = selectedIngredients.filter((ingredient) => ingredient.id !== idIngredient);
     setSelectedIngredients(updatedIngredients);
+    console.log("Test 2 Remove: ", selectedIngredients.length)
+    ChangeAvailableSize(true)
   };
 
+  const ChangeAvailableSize = (remove: boolean) => {
+    if(remove){
+        if (selectedIngredients.length == 1){
+          setAvailableSize(0)
+        }
+        else if (selectedIngredients.length == 2){
+          setAvailableSize(90)
+        }
+        else if (selectedIngredients.length == 3){
+          setAvailableSize(180)
+        }
+        else if (selectedIngredients.length == 4){
+          setAvailableSize(260)
+        }
+        else{
+          setAvailableSize(280)
+        }
+    }
+    else{
+        if (selectedIngredients.length == 0){
+          setAvailableSize(90)
+        }
+        else if (selectedIngredients.length == 1){
+          setAvailableSize(180)
+        }
+        else if (selectedIngredients.length == 2){
+          setAvailableSize(260)
+        }
+        else{
+          setAvailableSize(280)
+        }
+    }
+  }
+
   const handleLetterPress = async (letter: string) => {
     try {
       const ingredientsByLetter = await ingredientService.getIngredientByLetter(letter);
@@ -110,6 +151,24 @@ const loadIngredients = async () => {
     }
   };
 
+  const changeListVisibility = () => {
+    if(listVisibility == "none"){
+      setListVisibility("flex")
+    }
+    else{
+      setListVisibility("none")
+    }
+  };
+
+  const changeAvailableVisibility = () => {
+    if(availableVisibility == "none"){
+      setAvailableVisibility("flex")
+    }
+    else{
+      setAvailableVisibility("none")
+    }
+  };
+
   const styles = StyleSheet.create({
     linearGradient: {
           width: "100%",
@@ -140,46 +199,56 @@ const loadIngredients = async () => {
             <LinearGradient colors={[colors.primary, colors.primaryComplement]} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
                 <View style={{marginTop: "6%"}}/>
                 <View style={styles.element}>
-                  <View style={[styles.horizontalAlignment, { margin: "2%" }]}>
-                    {alphabetArray.map((source, index) => (
-                      <Pressable key={index} onPress={() => handleLetterPress(source)}>
-                        <Text style={{ color: colors.letterFilter }}>{source}</Text>
-                      </Pressable>
-                    ))}
-                  </View>
-                  <View>
-                        <Searchbar
-                            placeholder="Search"
-                            onChangeText={handleSearch}
-                            value={searchQuery}
-                            style={{margin: "3%",
-                                    backgroundColor: colors.cardBackground,
-                                    borderWidth : 1,
-                                    borderColor: colors.cardElementBorder,
-                                    borderRadius: 15,
-                            }}/>
+                  <View style={{justifyContent: "center"}}>
+                    <Pressable onPress={changeListVisibility} style={{alignItems: "center"}}>
+                      <Image source={require("../assets/images/arrow.png")} style={{tintColor: colors.cardDetail}}/>
+                    </Pressable>
                   </View>
-                  <View style={{height: 280}}>
-                        <FlatList
-                            data={response ? response : []}
-                            renderItem={({ item }) => (
-                              <AvailableItem value={item} />
-                            )}
-                            keyExtractor={(item, index) => index.toString()}
-                            ListEmptyComponent={() => (
-                              isLoading ? <ActivityIndicator size="large" /> : <Text>Erreur lors du traitement des données</Text>
-                            )}
-                          style={{ flex: 1 }}
-                        />
-                        <View style={{ marginTop: '6%' }}></View>
+                  <View style={{display: listVisibility}}>
+                    <View style={[styles.horizontalAlignment, { margin: "2%" }]}>
+                      {alphabetArray.map((source, index) => (
+                        <Pressable key={index} onPress={() => handleLetterPress(source)}>
+                          <Text style={{ color: colors.letterFilter }}>{source}</Text>
+                        </Pressable>
+                      ))}
+                    </View>
+                    <View>
+                          <Searchbar
+                              placeholder="Search"
+                              onChangeText={handleSearch}
+                              value={searchQuery}
+                              style={{margin: "3%",
+                                      backgroundColor: colors.cardBackground,
+                                      borderWidth : 1,
+                                      borderColor: colors.cardElementBorder,
+                                      borderRadius: 15,
+                              }}/>
+                    </View>
+                    <View style={{height: 280}}>
+                          <FlatList
+                              data={response ? response : []}
+                              renderItem={({ item }) => (
+                                <AvailableItem value={item} />
+                              )}
+                              keyExtractor={(item, index) => index.toString()}
+                              ListEmptyComponent={() => (
+                                isLoading ? <ActivityIndicator size="large" /> : <Text>Erreur lors du traitement des données</Text>
+                              )}
+                            style={{ flex: 1 }}
+                          />
+                          <View style={{ marginTop: '6%' }}></View>
+                    </View>
                   </View>
                 </View>
                 <View style={{marginTop: "6%"}}/>
                 <View style={styles.element}>
-                    <View style={[styles.horizontalAlignment, {justifyContent: "flex-start", marginLeft: "5%"}]}>
-                      <Text style={{fontSize: 20, color: colors.cardElementBorder}}>Available</Text>
-                    </View>
-                    <View style={{flex: 1, maxHeight: 280}}>
+                    <Pressable onPress={changeAvailableVisibility}>
+                      <View style={[styles.horizontalAlignment, {justifyContent: "flex-start", marginHorizontal: "5%", marginBottom: "4%"}]}>
+                        <Text style={{fontSize: 20, color: colors.cardElementBorder, flex: 1}}>Available</Text>
+                        <Image source={require("../assets/images/arrow.png")} style={{tintColor: colors.cardDetail}}/>
+                      </View>
+                    </Pressable>
+                    <View style={{height: availableSize, display: availableVisibility}}>
                       <FlatList
                               data={selectedIngredients}
                               renderItem={({ item }) => (
diff --git a/LeftOvers/screens/Profiles.tsx b/LeftOvers/screens/Profiles.tsx
index 4123c9a..f9cd377 100644
--- a/LeftOvers/screens/Profiles.tsx
+++ b/LeftOvers/screens/Profiles.tsx
@@ -76,7 +76,7 @@ export default function Profiles({navigation, props}) {
     
         modal: {
             position: 'absolute',
-            top: '8%',
+            top: '0%',
             justifyContent: "center",
             alignItems: "center",
             width: "100%",

From eef6c6fb5a82d85220b3e57d2c383a70c9daef29 Mon Sep 17 00:00:00 2001
From: Louison PARANT <Louison.PARANT@etu.uca.fr>
Date: Thu, 30 Nov 2023 13:23:27 +0100
Subject: [PATCH 2/2] Dropdown List ingredient Selection Page

---
 LeftOvers/components/FoodElementText.tsx | 6 ++++--
 LeftOvers/screens/HomePage.tsx           | 2 +-
 LeftOvers/theme/colors.ts                | 3 +++
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/LeftOvers/components/FoodElementText.tsx b/LeftOvers/components/FoodElementText.tsx
index 68b1135..006abc8 100644
--- a/LeftOvers/components/FoodElementText.tsx
+++ b/LeftOvers/components/FoodElementText.tsx
@@ -6,6 +6,8 @@ import ColorContext from '../theme/ColorContext';
 
 interface FoodElementTextProps {
     title  : string
+    mainColour: string
+    secondaryColour: string
 }
 
 const componentHeight = 60; 
@@ -21,7 +23,7 @@ export default function FoodElementText(props : any) {
             justifyContent: 'center',
             width: "80%",
             borderRadius: 5,
-            backgroundColor: colors.carrouselBackground,
+            backgroundColor: props.mainColour ? props.mainColour : colors.ingredientBackground,
             marginHorizontal: "3%",
         },
         text: {
@@ -42,7 +44,7 @@ export default function FoodElementText(props : any) {
           height: 50,
           borderRadius: 5,
           borderWidth: 2,
-          borderColor: colors.cardDetail,
+          borderColor: props.secondaryColour ? props.secondaryColour : colors.foodElementBorder,
           flexDirection: 'row',
           justifyContent: 'space-between',
         },
diff --git a/LeftOvers/screens/HomePage.tsx b/LeftOvers/screens/HomePage.tsx
index c991b0c..e985087 100644
--- a/LeftOvers/screens/HomePage.tsx
+++ b/LeftOvers/screens/HomePage.tsx
@@ -167,7 +167,7 @@ export default function HomePage({ navigation, props }) {
                                 <Pressable onPress={decreaseCounter}>
                                     <Image source={bracketLeft} style={{width: 40, height: 40, resizeMode: "contain"}} tintColor={colors.carrouselText}/>
                                 </Pressable>
-                                <FoodElementText title={ingredientList[cpt].title}/>
+                                <FoodElementText title={ingredientList[cpt].title} mainColour={colors.carrouselBackground} secondaryColour={colors.cardDetail}/>
                                 <Pressable onPress={increaseCounter}>
                                     <Image source={bracketRight} style={{width: 40, height: 40, resizeMode: "contain"}} tintColor={colors.carrouselText} />
                                 </Pressable>
diff --git a/LeftOvers/theme/colors.ts b/LeftOvers/theme/colors.ts
index 878e4d9..e329e22 100644
--- a/LeftOvers/theme/colors.ts
+++ b/LeftOvers/theme/colors.ts
@@ -36,6 +36,7 @@ export interface Theme {
     buttonMain: string,
     yesButton: string,
     letterFilter: string,
+    foodElementBorder: string,
 }
 
 export const LightTheme : Theme = {
@@ -64,6 +65,7 @@ export const LightTheme : Theme = {
     buttonMain: Ecru,
     yesButton: Moonstone,
     letterFilter: Moonstone,
+    foodElementBorder: Jet,
 }
 
 export const DarkTheme : Theme = {
@@ -92,5 +94,6 @@ export const DarkTheme : Theme = {
     buttonMain: CarolinaBlue,
     yesButton: CarolinaBlue,
     letterFilter: CarolinaBlue,
+    foodElementBorder: CarolinaBlue,
 }