Merge remote-tracking branch 'origin/WORK-LPA' into WORK-RHA

LeftOvers/components/ListSelect.tsx

@@ -76,7 +76,7 @@ export default function ListSelect(props: ListProps) {
         },
         badgesText: {
             fontSize: 15,
-            color: colors.cardElementText,
+            color: colors.badgeText,
         },
         box: {
             borderColor: "#3F3C42"
@@ -100,6 +100,7 @@ export default function ListSelect(props: ListProps) {
             checkBoxStyles={styles.box}
             notFoundText="All Diets Already Selected"
             placeholder={props.title}
+            labelStyles={styles.title}
             label={props.title}/>
     );
 }

LeftOvers/components/ListWithoutSelect.tsx

@@ -9,8 +9,15 @@ type ListProps = {
 }
 
 export default function ListWithoutSelect(props: ListProps) {
+    const [selected, setSelected] = React.useState([]);
     const { colors } = useContext(ColorContext);
 
+    let listContent = []
+
+    props.content.forEach((val) => {
+        listContent.push({value: val.value, disabled: true})
+    })
+
     const styles = StyleSheet.create({
         titleBar: {
             flexDirection: "row",
@@ -58,6 +65,7 @@ export default function ListWithoutSelect(props: ListProps) {
             width: "100%",
             minWidth: 250,
             maxWidth: 250,
+            backgroundColor: colors.cardElementBackground,
         },
         itemText: {
             fontSize: 13,
@@ -71,12 +79,14 @@ export default function ListWithoutSelect(props: ListProps) {
         box: {
             borderWidth: 0,
             flex: 0,
+            backgroundColor: colors.cardElementBackground,
         }
     });
 
     return (
         <MultipleSelectList
-            data={props.content}
+            setSelected={(val) => setSelected(val)}
+            data={listContent}
             save="value"
             search={false}
             arrowicon={<Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>}
@@ -84,8 +94,11 @@ export default function ListWithoutSelect(props: ListProps) {
             inputStyles={styles.title}
             dropdownStyles={styles.itemList}
             dropdownItemStyles={styles.itemCell}
+            disabledItemStyles={styles.itemCell}
             dropdownTextStyles={styles.itemText}
+            disabledTextStyles={styles.itemText}
             checkBoxStyles={styles.box}
+            disabledCheckBoxStyles={styles.box}
             notFoundText="None"
             placeholder={props.title}
             label={props.title}/>

LeftOvers/components/ProfileDetails.tsx

@@ -9,6 +9,7 @@ type ProfileProps = {
     avatar: string
     diets: string[]
     allergies: string[]
+    onModification: () => void
     onDeleteProfile: () => void
 }
 
@@ -78,10 +79,10 @@ export default function ProfileDetails(props) {
         },
         modify: {
             height: "100%",
+            width: "100%",
             tintColor: colors.cardElementBorder,
             resizeMode: 'contain',
-            flex: 0.1,
-            marginLeft: "3%",
+            flex: 1,
         },
         delete: {
             height: "100%",
@@ -128,7 +129,9 @@ export default function ProfileDetails(props) {
             <View style={styles.pseudoBar}>
                 <Image source={imageSource} style={styles.avatar}></Image>
                 <Text style={styles.text}>{props.name}</Text>
-                <Image source={require("../assets/images/modify.png")} style={styles.modify}></Image>
+                <Pressable onPress={props.onModification} style={{flex: 0.1, marginRight: "1%",}}>
+                    <Image source={require("../assets/images/modify.png")} style={styles.modify}></Image>
+                </Pressable>
                 <Pressable onPress={props.onDeleteProfile} style={{flex: 0.1, marginLeft: "1%",}}>
                     <Image source={require("../assets/images/delete.png")} style={styles.delete}></Image>
                 </Pressable>

LeftOvers/components/ProfileElement.tsx

@@ -33,7 +33,6 @@ export default function ProfileElement(props : Profile) {
         else{
             setSeparator("none")
         }
-        console.log(waiting, separator, props.name)
     }
 
     let imageSource

LeftOvers/components/ProfileModification.tsx

@@ -9,8 +9,8 @@ import ColorContext from '../theme/ColorContext';
 type ProfileProps = {
     name: string
     avatar: string
-    diets: string[]
-    allergies: string[]
+    diets: {value: string}[]
+    allergies: {value: string}[]
 }
 
 export default function ProfileModification(props: ProfileProps) {
@@ -60,7 +60,7 @@ export default function ProfileModification(props: ProfileProps) {
         },
         textInput: {
             fontSize: 15,
-            color: colors.cardTitle,
+            color: colors.cardDetail,
             borderRadius: 10,
             borderWidth: 2,
             borderStyle: 'dashed',
@@ -92,11 +92,6 @@ export default function ProfileModification(props: ProfileProps) {
             color: colors.cardElementBorder,
             flex: 1,
         },
-        nbSelected: {
-            fontSize: 11,
-            color: colors.cardDetail,
-            textAlign: "right",
-        }
     });
 
     return (
@@ -108,7 +103,6 @@ export default function ProfileModification(props: ProfileProps) {
             </View>
             <View style={styles.filterBar}>
                 <Text style={styles.filters}>Filters</Text>
-                <Text style={styles.nbSelected}>0 diets selected</Text>
             </View>
             <ListSelect title="Diets" content={props.diets}></ListSelect>
             <View style={{marginTop: "6%"}}/>

LeftOvers/navigation/CookingStackScreen.tsx

@@ -19,7 +19,7 @@ export default function CookingStackScreen() {
                 options={{
                     headerStyle: {backgroundColor: theme === 'light' ? '#F2F0E4' : '#3F3C42'},
                     headerTitle: () => (
-                        <HeaderTitle title='Profile Modification'/>
+                        <HeaderTitle title='Ingredient Selection'/>
                     )
                 }}
             />

LeftOvers/navigation/ProfileStackScreen.tsx

@@ -34,7 +34,10 @@ export default function ProfilesStackScreen({ navigation }) {
         }
     })
     
-    const _handleSearch = () => console.log('Searching');
+    const _handleSearch = () => {
+        console.log('Searching');
+        navigation.navigate('ProfileModification')
+    }
     const _handleHeaderAdd = () => navigation.navigate('ProfileCreation');
     
     return (

LeftOvers/screens/HomePage.tsx

@@ -70,7 +70,7 @@ export default function HomePage({ navigation, props }) {
         },
         filters: {
             fontSize: 20,
-            color: colors.cardTitle,
+            color: colors.cardElementBorder,
             flex: 1,
         },
         nbSelected: {
@@ -121,6 +121,16 @@ export default function HomePage({ navigation, props }) {
         }
     });
 
+    const nbActiveProfiles = () => {
+        let cpt = 0
+        profiles.forEach((val) => {
+            if(val.isActive == "flex"){
+                cpt += 1
+            }
+        })
+        return cpt
+    }
+
     return (
         <SafeAreaProvider style={{flex: 1}}>
             <ScrollView>
@@ -130,7 +140,7 @@ export default function HomePage({ navigation, props }) {
                         <View style={{flexDirection: "column", alignItems: "flex-start", justifyContent: "center", width: "100%"}}>
                             <View style={{flexDirection: "row"}}>
                                 <Text style={styles.text}>Welcome </Text>
-                                <Text style={styles.name}>Rayhân</Text>
+                                <Text style={styles.name}>Louison</Text>
                                 <Text style={styles.text}>,</Text>
                             </View>
                             <Text style={styles.text}>Glad to see you again!</Text>
@@ -140,7 +150,7 @@ export default function HomePage({ navigation, props }) {
                     <View style={styles.profilesSelection}>
                         <View style={styles.filterBar}>
                             <Text style={styles.filters}>Profiles</Text>
-                            <Text style={styles.nbSelected}>2 selected</Text>
+                            <Text style={styles.nbSelected}>{nbActiveProfiles()} selected</Text>
                         </View>
                         <View style={{marginTop: "3%"}}/>
                         <ProfileSelection listProfile={profiles} disableSelection={true}/>

LeftOvers/screens/IngredientSelection.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useState, useContext } from 'react';
-import { View, StyleSheet, Text, Image, Pressable, ActivityIndicator, FlatList, useWindowDimensions, ScrollView } from 'react-native';
+import { View, StyleSheet, Text, Image, Pressable, ActivityIndicator, FlatList, useWindowDimensions } from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { Searchbar } from 'react-native-paper';
 import FoodElementText from '../components/FoodElementText';
+
 import plus from '../assets/images/plus.png';
 import moins from '../assets/images/minus.png';
 import Ingredient from '../Models/Ingredient';
@@ -14,7 +15,6 @@ import ValidateButton from '../components/ValidateButton';
 export default function IngredientSelection(props) {
   const alphabetArray: Array<string> = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
   const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState();
   const [response, setResponse] = useState<Ingredient[] | undefined>(undefined);
   const [selectedIngredients, setSelectedIngredients] = useState([]);
   const ingredientService = new IngredientService();
@@ -34,7 +34,7 @@ export default function IngredientSelection(props) {
         setResponse(filtered);
       }
     } catch (error) {
-      setError(error);
+      console.log(error);
     } finally {
       setIsLoading(false);
     }
@@ -50,7 +50,7 @@ const loadIngredients = async () => {
       const ingredients = await ingredientService.getAllIngredient();
       setResponse(ingredients);
     } catch (error) {
-      setError(error);
+      console.log(error);
     } finally {
       setIsLoading(false);
     }
@@ -63,7 +63,7 @@ const loadIngredients = async () => {
   const AvailableItem = ({ value }: { value: Ingredient }) => (
     <>
       <View style={styles.horizontalAlignment}>
-        <FoodElementText title={value.name} />
+        <FoodElementText title={value.name}/>
         <Pressable onPress={() => SelectIngredient(value)}>
           <Image source={plus} style={{ width: 20, height: 20, tintColor: colors.cardDetail }} />
         </Pressable>
@@ -86,19 +86,15 @@ const loadIngredients = async () => {
 
   const SelectIngredient = (newIngredient: Ingredient) => {
     const exists = selectedIngredients.find((ingredient) => ingredient.id === newIngredient.id);
-    console.log("Test 1: ", selectedIngredients.length)
     if (!exists) {
       setSelectedIngredients([...selectedIngredients, newIngredient]);
+      ChangeAvailableSize(false)
     }
-    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)
   };
 
@@ -141,7 +137,7 @@ const loadIngredients = async () => {
       const ingredientsByLetter = await ingredientService.getIngredientByLetter(letter);
       setResponse(ingredientsByLetter);
     } catch (error) {
-      setError(error);
+      console.log(error);
     } finally {
       setIsLoading(false);
     }
@@ -213,6 +209,9 @@ const loadIngredients = async () => {
                               placeholder="Search"
                               onChangeText={handleSearch}
                               value={searchQuery}
+                              iconColor={colors.cardDetail}
+                              inputStyle={{color: colors.cardDetail}}
+                              rippleColor={colors.letterFilter}
                               style={{margin: "3%",
                                       backgroundColor: colors.cardBackground,
                                       borderWidth : 1,

LeftOvers/screens/ModifyProfile.tsx

@@ -15,12 +15,12 @@ export default function ModifyProfile(props) {
   return (
     <SafeAreaProvider style={{flex: 1}}>
         <ScrollView style={{minHeight: useWindowDimensions().height}}>
-            <LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
+            <LinearGradient colors={[colors.primary, colors.primaryComplement]} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
                 <View style={{marginTop: "6%"}}/>
                 <ProfileModification name="Johnny Silverhand" avatar="plus_small.png" diets={die} allergies={all}></ProfileModification>
                 <View style={{marginTop: "3%"}}/>
-                <ValidateButton title="Update Profile" image="update.png" colour={colors.buttonMain} backColour={colors.buttonBackground} todo={() => (console.log("Profile Modified"))}></ValidateButton>
-                <View style={{marginBottom: "20%"}}/>
+                <ValidateButton title="Update Profile" image="update.png" colour={colors.buttonMain} backColour={colors.cardBackground} todo={() => (console.log("Profile Modified"))}></ValidateButton>
+                <View style={{marginTop: "20%"}}/>
             </LinearGradient>
         </ScrollView>
     </SafeAreaProvider>
@@ -28,14 +28,6 @@ export default function ModifyProfile(props) {
 }
 
 const styles = StyleSheet.create({
-  container: {
-    height: "100%",
-    width: "100%",
-    flex: 1,
-    backgroundColor: '#3F3C42',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
   linearGradient: {
     height: "100%",
     width: "100%",

LeftOvers/screens/Profiles.tsx

@@ -24,11 +24,9 @@ export default function Profiles({navigation, props}) {
 
     const raisePopUp = () => {
         setVisible(true)
-        setOpacity(0.3)
     }
     const erasePopUp = () => {
         setVisible(false)
-        setOpacity(1)
     }
 
     const handleDeleteProfile = async (index) => {
@@ -191,7 +189,7 @@ export default function Profiles({navigation, props}) {
             />
           {index < profiles.length - 1 && <View style={styles.separator} />}
         </View>
-      ));
+    ));
 
     return (
     <SafeAreaProvider style={{flex: 1}}>

LeftOvers/screens/RecipeDetails.tsx

@@ -14,7 +14,6 @@ export default function RecipeDetails(props) {
     const {colors} = useContext(ColorContext);
 
     const [isLoading, setIsLoading] = useState(true);
-    const [error, setError] = useState();
     const [response, setResponse] = useState<Recipes | undefined>(undefined);
     const recipesService = new RecipesService();
 
@@ -23,7 +22,7 @@ export default function RecipeDetails(props) {
         const recipe = await recipesService.getRecipeById(props.id);
         setResponse(recipe);
       } catch (error) {
-        setError(error);
+        console.log(error);
       } finally {
         setIsLoading(false);
       }

LeftOvers/theme/colors.ts

@@ -37,6 +37,7 @@ export interface Theme {
     yesButton: string,
     letterFilter: string,
     foodElementBorder: string,
+    badgeText: string,
 }
 
 export const LightTheme : Theme = {
@@ -66,6 +67,7 @@ export const LightTheme : Theme = {
     yesButton: Moonstone,
     letterFilter: Moonstone,
     foodElementBorder: Jet,
+    badgeText: Jet,
 }
 
 export const DarkTheme : Theme = {
@@ -95,5 +97,6 @@ export const DarkTheme : Theme = {
     yesButton: CarolinaBlue,
     letterFilter: CarolinaBlue,
     foodElementBorder: CarolinaBlue,
+    badgeText: Alabaster,
 }