Profiles Page Add PopUp Deletion

LeftOvers/components/ProfileDelete.tsx

@@ -0,0 +1,115 @@
+import {React, useState} from 'react';
+import {StyleSheet, Text, TextInput, View, Image, Pressable} from 'react-native';
+import ValidateButton from './ValidateButton';
+import ListWithoutSelect from './ListWithoutSelect';
+
+type ProfileProps = {
+  name: string
+  avatar: string
+  diets: list<string>
+  allergies: list<string>
+}
+
+export default function ProfileDelete(props: ProfileProps) {
+  const [display, setDisplay] = useState("flex")
+  const changeListVisibility = () => {
+    if (display == "none"){
+        setDisplay("flex")
+    }
+    else{
+        setDisplay("none")
+    }
+  };
+
+  return (
+    <View style={styles.background}>
+        <View style={styles.pseudoBar}>
+            <Image source={require("../assets/images/"+props.avatar)} style={styles.avatar}></Image>
+            <Text style={styles.text}>{props.name}</Text>
+        </View>
+        <Pressable onPress={changeListVisibility} style={{height: 20, marginTop: 20,}}>
+            <View style={styles.filterBar}>
+                <Text style={styles.filters}>Filters</Text>
+                <Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>
+            </View>
+        </Pressable>
+        <View style={{display: display}}>
+            <ListWithoutSelect title="Diets" content={props.diets}></ListWithoutSelect>
+            <View style={{marginTop: 10}}/>
+            <ListWithoutSelect title="Allergies" content={props.allergies}></ListWithoutSelect>
+            <View style={{marginTop: 10}}/>
+        </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  background: {
+    //maxWidth: 370,
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 15,
+    backgroundColor: '#F2F0E4',
+    padding: 10,
+    marginHorizontal: 10,
+  },
+  pseudoBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    flex: 0.7,
+    width: 330,
+    marginBottom: 10,
+  },
+  avatar: {
+    padding: 20,
+    resizeMode: 'contain',
+    borderWidth: 2,
+    borderColor: "#ACA279",
+    borderRadius: 45,
+  },
+  text: {
+    fontSize: 20,
+    color: '#ACA279',
+    alignItems: 'center',
+    justifyContent: 'left',
+    flex: 0.8,
+    marginLeft: 20,
+    padding: 5,
+  },
+
+
+
+  filterBar: {
+      flexDirection: "row",
+      width: 300,
+      paddingTop: 10,
+      paddingBottom: 5,
+      alignItems: "flex-end",
+      justifyContent: "center",
+      flex: 0.2,
+  },
+  filters: {
+      flex: 0.5,
+      fontSize: 20,
+      color: '#ACA279',
+      flex: 1,
+      padding: 5,
+      paddingLeft: 0,
+      paddingBottom: 0,
+  },
+  nbSelected: {
+      fontSize: 11,
+      flex: 1,
+      color: "#3F3C42",
+      textAlign: "right",
+  },
+  arrow: {
+      height: 20,
+      width: 20,
+      resizeMode: 'contain',
+      tintColor: "#3F3C42",
+      flex: 0.1,
+  },
+});

LeftOvers/components/ProfileDetails.tsx

@@ -8,10 +8,11 @@ type ProfileProps = {
   avatar: string
   diets: list<string>
   allergies: list<string>
+  onDeleteProfile: () => void
 }
 
 export default function ProfileDetails(props: ProfileProps) {
-  const [display, setDisplay] = useState("none");
+  const [display, setDisplay] = useState("none")
   const changeListVisibility = () => {
     if (display == "none"){
         setDisplay("flex")
@@ -27,7 +28,9 @@ export default function ProfileDetails(props: ProfileProps) {
             <Image source={require("../assets/images/"+props.avatar)} 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.onDeleteProfile}>
                 <Image source={require("../assets/images/delete.png")} style={styles.delete}></Image>
+            </Pressable>
         </View>
         <Pressable onPress={changeListVisibility} style={{height: 20, marginTop: 20,}}>
             <View style={styles.filterBar}>

LeftOvers/screens/Profiles.tsx

@@ -1,11 +1,10 @@
-import React from 'react';
-import {StyleSheet, View} from 'react-native';
-import ProfileModification from '../components/ProfileModification';
+import {React, useState} from 'react';
+import {StyleSheet, View, Modal, Pressable, Text, Image} from 'react-native';
 import ProfileDetails from '../components/ProfileDetails';
-import ValidateButton from '../components/ValidateButton';
+import ProfileDelete from '../components/ProfileDelete';
 import TopBar from '../components/TopBar';
-import { LinearGradient } from 'expo-linear-gradient';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
+import {LinearGradient} from 'expo-linear-gradient';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
 
 export default function ModifyProfile(props) {
   const allJohnny = [{value: "Coconut"}, {value: "Skimmed Milk"}, {value: "Nuts"}]
@@ -20,22 +19,63 @@ export default function ModifyProfile(props) {
   const allViktor = [{value: "Pasta"}, {value: "Fish"}]
   const dieViktor = [{value: "Dairy free"}, {value: "Vegan"}]
 
+  const [visible, setVisible] = useState(false);
+  const [opacity, setOpacity] = useState(1);
+  const raisePopUp = () => {
+        setVisible(true)
+        setOpacity(0.4)
+  }
+  const erasePopUp = () => {
+        setVisible(false)
+        setOpacity(1)
+  }
+
   return (
     <SafeAreaProvider>
-        <TopBar title="Profiles" isVisible="true"/>
         <View style={styles.container}>
+            <View style={{opacity: opacity, height: "100%", width: "100%", flex: 1, backgroundColor: '#3F3C42',}}>
+                <TopBar title="Profiles" isVisible="true"/>
                 <LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
                     <View style={{marginTop: 10}}/>
-                <ProfileDetails name="Johnny Silverhand" avatar="plus_small.png" diets={dieJohnny} allergies={allJohnny}></ProfileDetails>
+                    <ProfileDetails name="Johnny Silverhand" avatar="plus_small.png" diets={dieJohnny} allergies={allJohnny} onDeleteProfile={raisePopUp}></ProfileDetails>
                     <View style={{marginTop: 10}}/>
-                <ProfileDetails name="Jackie Welles" avatar="plus_small.png" diets={dieJackie} allergies={allJackie}></ProfileDetails>
+                    <ProfileDetails name="Jackie Welles" avatar="plus_small.png" diets={dieJackie} allergies={allJackie} onDeleteProfile={raisePopUp}></ProfileDetails>
                     <View style={{marginTop: 10}}/>
-                <ProfileDetails name="Goro Takemura" avatar="plus_small.png" diets={dieGoro} allergies={allGoro}></ProfileDetails>
+                    <ProfileDetails name="Goro Takemura" avatar="plus_small.png" diets={dieGoro} allergies={allGoro} onDeleteProfile={raisePopUp}></ProfileDetails>
                     <View style={{marginTop: 10}}/>
-                <ProfileDetails name="Viktor Vector" avatar="plus_small.png" diets={dieViktor} allergies={allViktor}></ProfileDetails>
+                    <ProfileDetails name="Viktor Vector" avatar="plus_small.png" diets={dieViktor} allergies={allViktor} onDeleteProfile={raisePopUp}></ProfileDetails>
                     <View style={{marginTop: 10}}/>
+                    <View style={styles.modal}>
+                        <Modal visible={visible} onRequestClose={erasePopUp} animationType="fade" transparent={true}>
+                            <View style={styles.modal}>
+                                <View style={styles.viewModal}>
+                                    <View style={styles.profileValidation}>
+                                        <ProfileDelete name="Johnny Silverhand" avatar="plus_small.png" diets={dieJohnny} allergies={allJohnny}></ProfileDelete>
+                                    </View>
+                                    <View style={styles.decisionBarVertical}>
+                                        <Text style={styles.validationQuestion}>Do you really want to delete this profile?</Text>
+                                        <View style={styles.decisionBar}>
+                                            <Pressable onPress={erasePopUp} style={{flex:0.5}}>
+                                                <View style={styles.yesButton}>
+                                                    <Image source={require("../assets/images/validate.png")} style={{tintColor: "#2DE04A", height: 30, width: 30, flex: 0.2, margin: 10}}/>
+                                                    <Text style={styles.yesText}>Yes</Text>
+                                                </View>
+                                            </Pressable>
+                                            <Pressable onPress={erasePopUp} style={{flex:0.5}}>
+                                                <View style={styles.noButton}>
+                                                    <Image source={require("../assets/images/cross.png")} style={{tintColor: "#E02D2D", height: 30, width: 30, flex: 0.2, margin: 10}}/>
+                                                    <Text style={styles.noText}>No</Text>
+                                                </View>
+                                            </Pressable>
+                                        </View>
+                                    </View>
+                                </View>
+                            </View>
+                        </Modal>
+                    </View>
                 </LinearGradient>
             </View>
+        </View>
     </SafeAreaProvider>
   );
 }
@@ -56,4 +96,98 @@ const styles = StyleSheet.create({
     padding: 10,
     paddingTop: 0,
   },
+
+
+
+  modal: {
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        justifyContent: "center",
+        alignItems: "center",
+        width: "100%",
+        transform: [{ translateX: -207 }, { translateY: -140 }],
+  },
+  viewModal: {
+        flexDirection: "column",
+        padding: 10,
+        alignItems: "center",
+        justifyContent: "center",
+        width: "100%",
+        height: 200,
+  },
+
+
+  profileValidation: {
+        width: "100%",
+        alignItems: "center",
+        justifyContent: "center",
+        paddingBottom: 20,
+  },
+  decisionBarVertical: {
+          flexDirection: "column",
+          width: "100%",
+          padding: 10,
+          height: "100%",
+          borderRadius: 15,
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "#F2F0E4",
+  },
+  validationQuestion: {
+        fontSize: 20,
+        color: '#ACA279',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flex: 0.3,
+        padding: 5,
+  },
+  decisionBar: {
+          flexDirection: "row",
+          flex: 0.7,
+          width: "100%",
+          height: "20%",
+          borderRadius: 15,
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "#F2F0E4",
+  },
+  yesButton: {
+          flexDirection: "row",
+          flex: 0.5,
+          padding: 10,
+          marginHorizontal: 10,
+          width: "90%",
+          borderRadius: 20,
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "#59BDCD",
+  },
+  yesText: {
+      fontSize: 20,
+      color: '#3F3C42',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flex: 0.7,
+      padding: 5,
+  },
+  noButton: {
+        flexDirection: "row",
+        flex: 0.5,
+        padding: 10,
+        marginHorizontal: 10,
+        width: "90%",
+        borderRadius: 20,
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "#8A0000",
+  },
+  noText: {
+        fontSize: 20,
+        color: '#F2F0E4',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flex: 0.7,
+        padding: 5,
+  },
 });