Profile Component

LeftOvers/App.tsx

@@ -2,17 +2,18 @@ import React from 'react';
 import {StyleSheet, View } from 'react-native';
 import ProfileModification from './components/ProfileModification';
 import ValidateButton from './components/ValidateButton';
+import { LinearGradient } from 'expo-linear-gradient';
 
 export default function App() {
-  const all = [{title: "Mussels"}, {title: "Skimmed Milk"}, {title: "Nuts"}]
-  const die = [{title: "Dairy free"}, {title: "Gluten free"}, {title: "Porkless"}, {title: "Vegan"}, {title: "Vegetarian"}, {title: "Pescatarian"}]
+  const all = [{value: "Mussels"}, {value: "Skimmed Milk"}, {value: "Nuts"}]
+  const die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}]
   return (
     <View style={styles.container}>
-        <View style={styles.background}>
+        <LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
             <ProfileModification name="Johnny Silverhand" avatar="plus.png" diets={die} allergies={all}></ProfileModification>
             <View style={{marginTop: 10}}/>
-          <ValidateButton title="Update Profile" image="plus.png" colour="#ACA279" backColour="#F2F0E4"></ValidateButton>
-        </View>
+            <ValidateButton title="Update Profile" image="update.png" colour="#ACA279" backColour="#F2F0E4"></ValidateButton>
+        </LinearGradient>
     </View>
   );
 }
@@ -24,11 +25,14 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  background: {
-    height: 844,
-    width: 390,
-    backgroundColor: "linear-gradient(#59BDCD, #59BDCD)",
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-  }
+  linearGradient: {
+    //height: 844,
+    //width: 390,
+    flex: 1,
+    padding: 10,
+    paddingTop: 0,
+    //backgroundColor: "#59BDCD",
+    //alignItems: 'center',
+    //justifyContent: 'flex-start',
+  },
 });

LeftOvers/components/AllergiesTab.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import {StyleSheet, Text, TextInput, View, Image, FlatList} from 'react-native';
+import ValidateButton from './ValidateButton';
+import HeaderFlatList from './HeaderFlatList';
+import { MultipleSelectList, SelectList } from 'react-native-dropdown-select-list'
+
+type AllergiesProps = {
+    title: string
+    content : list<string>
+}
+
+export default function AllergiesTab(props: AllergiesProps) {
+  const [selected, setSelected] = React.useState([]);
+  const data = [
+        {key:'1', value:'Dairy free'},
+        {key:'2', value:'Gluten free'},
+        {key:'3', value:'Porkless'},
+        {key:'4', value:'Vegan'},
+        {key:'5', value:'Vegetatian'},
+        {key:'6', value:'Pescatarian'},
+  ]
+  return (
+    <MultipleSelectList
+        data={props.content}
+        save="value"
+        search={false}
+        arrowicon={<Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>}
+        boxStyles={styles.titleBar}
+        inputStyles={styles.title}
+        dropdownStyles={styles.itemList}
+        dropdownItemStyles={styles.itemCell}
+        dropdownTextStyles={styles.itemText}
+        checkBoxStyles={styles.box}
+        placeholder={props.title}
+        label={props.title}/>
+  );
+}
+
+const styles = StyleSheet.create({
+  titleBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "stretch",
+    minHeight: 25,
+    backgroundColor: "#F2F0E4",
+    borderTopRightRadius: 15,
+    borderTopLeftRadius: 15,
+    borderBottomRightRadius: 0,
+    borderBottomLeftRadius: 0,
+    borderWidth: 2,
+    borderColor: "#ACA279",
+    width: 330,
+    marginBottom: 0,
+    overflow: "hidden",
+  },
+  arrow: {
+    height: 20,
+    width: 20,
+    resizeMode: 'contain',
+    tintColor: "#3F3C42",
+    flex: 0.1,
+  },
+  title: {
+    fontSize: 15,
+    color: '#3F3C42',
+    alignItems: 'center',
+    textAlign: "left",
+    flex: 0.9,
+  },
+
+  itemList: {
+      //flexDirection: "row",
+      alignItems: "flex-start",
+      //justifyContent: "stretch",
+      borderWidth: 0,
+      borderTopRightRadius: 0,
+      borderTopLeftRadius: 0,
+      borderBottomRightRadius: 15,
+      borderBottomLeftRadius: 15,
+      backgroundColor: "#E3DEC9",
+      width: 330,
+  },
+  itemCell: {
+      maxHeight: 30,
+      flex: 1,
+      padding: 0,
+      paddingLeft: 10,
+  },
+  itemText: {
+      fontSize: 13,
+      textAlign: "left",
+      flex: 1,
+      padding: 5,
+      paddingLeft: 10,
+      color: "#3F3C42",
+  },
+
+  box: {
+      borderWidth: 0,
+      flex: 0,
+  }
+});

LeftOvers/components/DietsTab.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import {StyleSheet, Text, TextInput, View, Image, FlatList} from 'react-native';
+import ValidateButton from './ValidateButton';
+import HeaderFlatList from './HeaderFlatList';
+import { MultipleSelectList, SelectList } from 'react-native-dropdown-select-list'
+
+type DietsProps = {
+    title: string
+    content : list<string>
+}
+
+export default function DietsTab(props: DietsProps) {
+  const [selected, setSelected] = React.useState([]);
+  const data = [
+        {key:'1', value:'Dairy free'},
+        {key:'2', value:'Gluten free'},
+        {key:'3', value:'Porkless'},
+        {key:'4', value:'Vegan'},
+        {key:'5', value:'Vegetatian'},
+        {key:'6', value:'Pescatarian'},
+  ]
+  return (
+    <MultipleSelectList
+        setSelected={(val) => setSelected(val)}
+        data={props.content}
+        save="value"
+        search={false}
+        arrowicon={<Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>}
+        boxStyles={styles.titleBar}
+        inputStyles={styles.title}
+        dropdownStyles={styles.itemList}
+        dropdownItemStyles={styles.itemCell}
+        dropdownTextStyles={styles.itemText}
+        placeholder={props.title}
+        label={props.title}/>
+  );
+}
+
+const styles = StyleSheet.create({
+  titleBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "stretch",
+    minHeight: 25,
+    backgroundColor: "#F2F0E4",
+    borderTopRightRadius: 15,
+    borderTopLeftRadius: 15,
+    borderBottomRightRadius: 0,
+    borderBottomLeftRadius: 0,
+    borderWidth: 2,
+    borderColor: "#ACA279",
+    width: 330,
+    marginBottom: 0,
+    overflow: "hidden",
+  },
+  arrow: {
+    height: 20,
+    width: 20,
+    resizeMode: 'contain',
+    tintColor: "#3F3C42",
+    flex: 0.1,
+  },
+  title: {
+    fontSize: 15,
+    color: '#3F3C42',
+    alignItems: 'center',
+    textAlign: "left",
+    flex: 0.9,
+  },
+
+  itemList: {
+      //flexDirection: "row",
+      alignItems: "flex-start",
+      //justifyContent: "stretch",
+      borderWidth: 0,
+      borderTopRightRadius: 0,
+      borderTopLeftRadius: 0,
+      borderBottomRightRadius: 15,
+      borderBottomLeftRadius: 15,
+      backgroundColor: "#E3DEC9",
+      width: 330,
+  },
+  itemCell: {
+      maxHeight: 30,
+      flex: 1,
+      padding: 0,
+      paddingLeft: 10,
+  },
+  itemText: {
+      fontSize: 13,
+      textAlign: "left",
+      flex: 1,
+      padding: 5,
+      paddingLeft: 10,
+      color: "#3F3C42",
+  },
+});

LeftOvers/components/ListTab.tsx

@@ -8,11 +8,11 @@ type ListProps = {
     content : list<string>
 }
 
-type ItemProps = {title: string}
+type ItemProps = {value: string}
 
-const Item = ({title}: ItemProps) => (
+const Item = ({value}: ItemProps) => (
     <View style={styles.itemList}>
-        <Text style={styles.itemText}>{title}</Text>
+        <Text style={styles.itemText}>{value}</Text>
     </View>
 )
 
@@ -20,7 +20,7 @@ export default function ListTab(props: ListProps) {
   return (
     <View style={styles.background}>
         <View>
-            <FlatList data={props.content} renderItem={({item}) => <Item title={item.title}/>} ListHeaderComponent={<HeaderFlatList title={props.title}/>}/>
+            <FlatList data={props.content} renderItem={({item}) => <Item value={item.value}/>} ListHeaderComponent={<HeaderFlatList title={props.title}/>}/>
         </View>
     </View>
   );

LeftOvers/components/ProfileModification.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import {StyleSheet, Text, TextInput, View, Image} from 'react-native';
 import ValidateButton from './ValidateButton';
 import ListTab from './ListTab';
+import DietsTab from './DietsTab';
+import AllergiesTab from './AllergiesTab';
 
 type ProfileProps = {
   name: string
@@ -22,6 +24,10 @@ export default function ProfileModification(props: ProfileProps) {
             <Text style={styles.filters}>Filters</Text>
             <Text style={styles.nbSelected}>3 selected</Text>
         </View>
+        <DietsTab title="Diets" content={props.diets}></DietsTab>
+        <View style={{marginTop: 10}}/>
+        <AllergiesTab title="Allergies" content={props.allergies}></AllergiesTab>
+        <View style={{marginTop: 10}}/>
         <ListTab title="Diets" content={props.diets}></ListTab>
         <ListTab title="Allergies" content={props.allergies}></ListTab>
         <ValidateButton title="Add Allergy" image="plus.png" colour="#59BDCD" backColour="#E3DEC9"></ValidateButton>
@@ -48,8 +54,7 @@ const styles = StyleSheet.create({
     marginBottom: 10,
   },
   avatar: {
-    height: 45,
-    width: 45,
+    padding: 20,
     resizeMode: 'contain',
     borderWidth: 2,
     borderColor: "#ACA279",

LeftOvers/components/ValidateButton.tsx

@@ -25,8 +25,10 @@ export default function ValidateButton(props: ValidateButtonProps) {
             padding: 5,
             paddingRight: 10,}}>
             <Image source={require('../assets/images/'+props.image)} style={{
-                height: 30,
-                width: 30,
+                height: 20,
+                width: 20,
+                marginLeft: 5,
+                marginRight: 10,
                 resizeMode: "center",
                 tintColor: props.colour,}}>
             </Image>

LeftOvers/package-lock.json

@@ -11,11 +11,13 @@
         "@expo/webpack-config": "^19.0.0",
         "@types/react": "~18.2.14",
         "expo": "~49.0.15",
+        "expo-linear-gradient": "~12.3.0",
         "expo-splash-screen": "~0.20.5",
         "expo-status-bar": "~1.6.0",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-native": "0.72.6",
+        "react-native-dropdown-select-list": "^2.0.5",
         "react-native-splash-screen": "^3.3.0",
         "react-native-web": "~0.19.6",
         "typescript": "^5.1.3"
@@ -9049,6 +9051,14 @@
         "expo": "*"
       }
     },
+    "node_modules/expo-linear-gradient": {
+      "version": "12.3.0",
+      "resolved": "https://registry.npmjs.org/expo-linear-gradient/-/expo-linear-gradient-12.3.0.tgz",
+      "integrity": "sha512-f9e+Oxe5z7fNQarTBZXilMyswlkbYWQHONVfq8MqmiEnW3h9XsxxmVJLG8uVQSQPUsbW+x1UUT/tnU6mkMWeLg==",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-modules-autolinking": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-1.5.1.tgz",
@@ -14790,6 +14800,11 @@
         "react": "18.2.0"
       }
     },
+    "node_modules/react-native-dropdown-select-list": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/react-native-dropdown-select-list/-/react-native-dropdown-select-list-2.0.5.tgz",
+      "integrity": "sha512-TepbcagQVUMB6nLuIlVU2ghRpQHAECOeZWe8K04ymW6NqbKbxuczZSDFfdCiABiiQ2dFD+8Dz65y4K7/uUEqGg=="
+    },
     "node_modules/react-native-splash-screen": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/react-native-splash-screen/-/react-native-splash-screen-3.3.0.tgz",

LeftOvers/package.json

@@ -12,11 +12,13 @@
     "@expo/webpack-config": "^19.0.0",
     "@types/react": "~18.2.14",
     "expo": "~49.0.15",
+    "expo-linear-gradient": "~12.3.0",
     "expo-splash-screen": "~0.20.5",
     "expo-status-bar": "~1.6.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.72.6",
+    "react-native-dropdown-select-list": "^2.0.5",
     "react-native-splash-screen": "^3.3.0",
     "react-native-web": "~0.19.6",
     "typescript": "^5.1.3"