adding modals to update profile

app/mobile/src/session/profile/Profile.jsx

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { Alert, ScrollView, View, Switch, TouchableOpacity, Text } from 'react-native';
+import { Modal, Alert, TextInput, ScrollView, View, Switch, TouchableOpacity, Text } from 'react-native';
 import { styles } from './Profile.styled';
 import { useProfile } from './useProfile.hook';
 import { Logo } from 'utils/Logo';
@@ -24,6 +24,23 @@ export function Profile() {
     }
   }
 
+  const saveDetails = async () => {
+    try {
+      await actions.saveDetails();
+      actions.hideDetailEdit();
+    }
+    catch (err) {
+      console.log(err);
+      Alert.alert(
+        'Failed to Save Details',
+        'Please try again.'
+      )
+    }
+  }
+
+  const saveLogin = async () => {
+  }
+
   const onGallery = async () => {
     try {
       const full = await ImagePicker.openPicker({ mediaType: 'photo', width: 256, height: 256 });
@@ -49,41 +66,107 @@ export function Profile() {
   return (
     <ScrollView>
       <View style={styles.container}>
-      <TouchableOpacity style={styles.header}>
+        <TouchableOpacity style={styles.header} onPress={actions.showLoginEdit}>
-        <Text style={styles.headerText}>{ `${state.handle}@${state.node}` }</Text>
+          <Text style={styles.headerText}>{ `${state.handle}@${state.node}` }</Text>
-      </TouchableOpacity>
-      <View style={{ width: 128 }}>
-        <Logo src={state.imageSource} width={128} height={128} radius={8} />
-        <TouchableOpacity style={styles.camera} onPress={onCamera}>
-          <Ionicons name="camerao" size={14} color={Colors.white} />
         </TouchableOpacity>
-        <TouchableOpacity style={styles.gallery} onPress={onGallery}>
+        <View style={{ width: 128 }}>
-          <Ionicons name="picture" size={14} color={Colors.white} />
+          <Logo src={state.imageSource} width={128} height={128} radius={8} />
-        </TouchableOpacity>
+          <TouchableOpacity style={styles.camera} onPress={onCamera}>
-      </View>
+            <Ionicons name="camerao" size={14} color={Colors.white} />
-      <TouchableOpacity style={styles.detail}>
+          </TouchableOpacity>
-        <View style={styles.attribute}>
+          <TouchableOpacity style={styles.gallery} onPress={onGallery}>
-          <Text style={styles.nametext}>{ state.name }</Text>
+            <Ionicons name="picture" size={14} color={Colors.white} />
-          <Ionicons name="edit" size={16} color={Colors.text} />
+          </TouchableOpacity>
         </View>
-        <View style={styles.attribute}>
+        <TouchableOpacity style={styles.detail} onPress={actions.showDetailEdit}>
-          <Ionicons name="enviromento" size={14} color={Colors.text} />
+          <View style={styles.attribute}>
-          <Text style={styles.locationtext}>{ state.location }</Text>
+            <Text style={styles.nametext}>{ state.name }</Text>
-        </View> 
+            <Ionicons name="edit" size={16} color={Colors.text} />
-        <View style={styles.attribute}>
+          </View>
-          <Ionicons name="book" size={14} color={Colors.text} />
+          <View style={styles.attribute}>
-          <Text style={styles.descriptiontext}>{ state.description }</Text>
+            <Ionicons name="enviromento" size={14} color={Colors.text} />
-        </View> 
+            <Text style={styles.locationtext}>{ state.location }</Text>
-      </TouchableOpacity>
+          </View> 
-      <View style={styles.visible}>
+          <View style={styles.attribute}>
-        <Text style={styles.visibleText}>Visible in Registry</Text>
+            <Ionicons name="book" size={14} color={Colors.text} />
-        <Switch style={styles.visibleSwitch} value={state.searchable} onValueChange={setVisible} trackColor={styles.switch}/>
+            <Text style={styles.descriptiontext}>{ state.description }</Text>
-      </View>
+          </View> 
-      <TouchableOpacity style={styles.logout} onPress={actions.logout}>
+        </TouchableOpacity>
-        <Ionicons name="logout" size={14} color={Colors.white} />
+        <View style={styles.visible}>
-        <Text style={styles.logoutText}>Logout</Text>
+          <Text style={styles.visibleText}>Visible in Registry</Text>
-      </TouchableOpacity>
+          <Switch style={styles.visibleSwitch} value={state.searchable} onValueChange={setVisible} trackColor={styles.switch}/>
+        </View>
+        <TouchableOpacity style={styles.logout} onPress={actions.logout}>
+          <Ionicons name="logout" size={14} color={Colors.white} />
+          <Text style={styles.logoutText}>Logout</Text>
+        </TouchableOpacity>
       </View>
+      <Modal
+        animationType="fade"
+        transparent={true}
+        visible={state.showDetailEdit}
+        supportedOrientations={['portrait', 'landscape']}
+        onRequestClose={actions.hideDetailEdit}
+      >
+        <View style={styles.editWrapper}>
+          <View style={styles.editContainer}>
+            <Text style={styles.editHeader}>Edit Details:</Text>
+            <View style={styles.inputField}>
+              <TextInput style={styles.input} value={state.editName} onChangeText={actions.setEditName}
+                  autoCapitalize="word" placeholder="Name" />
+            </View>
+            <View style={styles.inputField}>
+              <TextInput style={styles.input} value={state.editLocation} onChangeText={actions.setEditLocation}
+                  autoCapitalize="sentence" placeholder="Location" />
+            </View>
+            <View style={styles.inputField}>
+              <TextInput style={styles.input} value={state.editDescription} onChangeText={actions.setEditDescription}
+                  autoCapitalize="none" placeholder="Description" multiline={true} />
+            </View>
+            <View style={styles.editControls}>
+              <TouchableOpacity style={styles.cancel} onPress={actions.hideDetailEdit}>
+                <Text>Cancel</Text>
+              </TouchableOpacity>
+              <TouchableOpacity style={styles.save} onPress={saveDetails}>
+                <Text style={styles.saveText}>Save</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </View>
+      </Modal>
+      <Modal
+        animationType="fade"
+        transparent={true}
+        visible={state.showLoginEdit}
+        supportedOrientations={['portrait', 'landscape']}
+        onRequestClose={actions.hideLoginEdit}
+      >
+        <View style={styles.editWrapper}>
+          <View style={styles.editContainer}>
+            <Text style={styles.editHeader}>Change Login:</Text>
+            <View style={styles.inputField}>
+              <TextInput style={styles.input} value={state.editHandle} onChangeText={actions.setEditHandle}
+                  placeholder="Username" />
+            </View>
+            <View style={styles.inputField}>
+              <TextInput style={styles.input} value={state.editPassword} onChangeText={actions.setEditPassword}
+                  secureTextEntry={true} placeholder="Password" />
+            </View>
+            <View style={styles.inputField}>
+              <TextInput style={styles.input} value={state.editConfirm} onChangeText={actions.setEditConfirm}
+                  secureTextEntry={true} placeholder="Confirm Password" />
+            </View>
+            <View style={styles.editControls}>
+              <TouchableOpacity style={styles.cancel} onPress={actions.hideLoginEdit}>
+                <Text>Cancel</Text>
+              </TouchableOpacity>
+              <TouchableOpacity style={styles.save} onPress={saveLogin}>
+                <Text style={styles.saveText}>Save</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </View>
+      </Modal>
     </ScrollView>
   )
 }

app/mobile/src/session/profile/Profile.styled.js

@@ -76,12 +76,11 @@ export const styles = StyleSheet.create({
     paddingTop: 16,
   },
   visibleText: {
-    fontSize: 14,
+    fontSize: 16,
     color: Colors.text,
-    paddingRight: 2,
   },
   visibleSwitch: {
-    transform: [{ scaleX: .6 }, { scaleY: .6 }],
+    transform: [{ scaleX: .7 }, { scaleY: .7 }],
   },
   logout: {
     marginTop: 32,
@@ -92,8 +91,8 @@ export const styles = StyleSheet.create({
     alignItems: 'center',
     paddingLeft: 8,
     paddingRight: 8,
-    paddingTop: 4,
+    paddingTop: 8,
-    paddingBottom: 4,
+    paddingBottom: 8,
   },
   logoutText: {
     color: Colors.white,
@@ -103,5 +102,62 @@ export const styles = StyleSheet.create({
     false: Colors.grey,
     true: Colors.background,
   },
+  editWrapper: {
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(52, 52, 52, 0.8)'
+  },
+  editContainer: {
+    backgroundColor: Colors.formBackground,
+    padding: 16,
+    width: '80%',
+    maxWidth: 400,
+  },
+  editHeader: {
+    fontSize: 20,
+    paddingBottom: 16,
+  },
+  inputField: {
+    width: '100%',
+    borderWidth: 1,
+    borderColor: Colors.lightgrey,
+    borderRadius: 4,
+    padding: 8,
+    marginBottom: 8,
+    maxHeight: 92,
+  },
+  input: {
+    fontSize: 16,
+    width: '100%',
+  },
+  editControls: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
+  cancel: {
+    borderWidth: 1,
+    borderColor: Colors.lightgrey,
+    borderRadius: 4,
+    padding: 8,
+    marginRight: 8,
+    width: 72,
+    display: 'flex',
+    alignItems: 'center',
+  },
+  save: {
+    padding: 8,
+    borderRadius: 4,
+    backgroundColor: Colors.primary,
+    width: 72,
+    display: 'flex',
+    alignItems: 'center',
+  },
+  saveText: {
+    color: Colors.white,
+  }
 })
 

app/mobile/src/session/profile/useProfile.hook.js

@@ -14,6 +14,14 @@ export function useProfile() {
     node: null,
     imageSource: null,
     searchable: null,
+    showDetailEdit: false,
+    showLoginEdit: false,
+    editName: null,
+    editLocation: null,
+    editDescription: null,
+    editHandle: null,
+    editPassword: null,
+    editConfirm: null,
   });
 
   const app = useContext(AppContext);
@@ -28,7 +36,8 @@ export function useProfile() {
   useEffect(() => {
     const { name, handle, node, location, description, image } = profile.state.profile;
     const imageSource = image ? profile.state.imageUrl : 'avatar';
-    updateState({ name, handle, node, location, description, imageSource });
+    updateState({ name, handle, node, location, description, imageSource, editHandle: handle,
+        editName: name, editLocation: location, editDescription: description });
   }, [profile]);
 
   useEffect(() => {
@@ -46,6 +55,39 @@ export function useProfile() {
     setProfileImage: async (data) => {
       await profile.actions.setProfileImage(data);
     },
+    showLoginEdit: () => {
+      updateState({ showLoginEdit: true });
+    },
+    hideLoginEdit: () => {
+      updateState({ showLoginEdit: false });
+    },
+    showDetailEdit: () => {
+      updateState({ showDetailEdit: true });
+    },
+    hideDetailEdit: () => {
+      updateState({ showDetailEdit: false });
+    },
+    setEditName: (editName) => {
+      updateState({ editName });
+    },
+    setEditLocation: (editLocation) => {
+      updateState({ editLocation });
+    },
+    setEditDescription: (editDescription) => {
+      updateState({ editDescription });
+    },
+    setEditHandle: (editHandle) => {
+      updateState({ editHandle });
+    },
+    setEditPassword: (editPassword) => {
+      updateState({ editPassword });
+    },
+    setEditConfirm: (editConfirm) => {
+      updateState({ editConfirm });
+    },
+    saveDetails: () => {
+      profile.actions.setProfileData(state.editName, state.editLocation, state.editDescription);
+    },
   };
 
   return { state, actions };