Update Ingredient Selection Page

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) {

LeftOvers/components/ProfileDelete.tsx

@@ -6,8 +6,8 @@ import ColorContext from '../theme/ColorContext';
 type ProfileProps = {
   name: string
   avatar: string
-  diets: {title: string}[]
+  diets: {value: string}[]
-  allergies: {title: 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,

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,6 +199,12 @@ 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={{justifyContent: "center"}}>
+                    <Pressable onPress={changeListVisibility} style={{alignItems: "center"}}>
+                      <Image source={require("../assets/images/arrow.png")} style={{tintColor: colors.cardDetail}}/>
+                    </Pressable>
+                  </View>
+                  <View style={{display: listVisibility}}>
                     <View style={[styles.horizontalAlignment, { margin: "2%" }]}>
                       {alphabetArray.map((source, index) => (
                         <Pressable key={index} onPress={() => handleLetterPress(source)}>
@@ -174,12 +239,16 @@ const loadIngredients = async () => {
                           <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%"}]}>
+                    <Pressable onPress={changeAvailableVisibility}>
-                      <Text style={{fontSize: 20, color: colors.cardElementBorder}}>Available</Text>
+                      <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>
-                    <View style={{flex: 1, maxHeight: 280}}>
+                    </Pressable>
+                    <View style={{height: availableSize, display: availableVisibility}}>
                       <FlatList
                               data={selectedIngredients}
                               renderItem={({ item }) => (

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%",