finished first pass of refactored profile screen

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

@@ -1,4 +1,5 @@
 import { ActivityIndicator, KeyboardAvoidingView, Image, Modal, View, Switch, Text, ScrollView, TextInput, TouchableOpacity, Alert } from 'react-native';
+import { useState } from 'react';
 import AntIcons from 'react-native-vector-icons/AntDesign';
 import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import ImagePicker from 'react-native-image-crop-picker'
@@ -13,6 +14,7 @@ import avatar from 'images/avatar.png';
 
 export function Profile() {
 
+  const [busyDetail, setBusyDetail] = useState(false);
   const { state, actions } = useProfile();
 
   const onGallery = async () => {
@@ -49,9 +51,11 @@ export function Profile() {
   }
 
   const saveDetails = async () => {
+    if (!busyDetail) {
+      setBusyDetail(true);
       try {
         await actions.saveDetails();
-      actions.hideEditDetails();
+        actions.hideDetails();
       }
       catch (err) {
         console.log(err);
@@ -60,14 +64,9 @@ export function Profile() {
           state.strings.tryAgain,
         )
       }
+      setBusyDetail(false);
+    }
   }
-
-const triggerStyles = {
-  triggerTouchable: {
-    activeOpacity: 70,
-  },
-};
-
 
   return (
     <ScrollView style={styles.content} contentContainerStyle={{ display: 'flex', alignItems: 'center' }}>
@@ -76,7 +75,6 @@ const triggerStyles = {
 
       <View style={{ ...styles.details, width: state.detailWidth }}>
         <View style={styles.control}>
-
           <Menu>
             <MenuTrigger customStyles={styles.trigger}>
               <View style={styles.edit}>
@@ -93,7 +91,6 @@ const triggerStyles = {
               </MenuOption>
             </MenuOptions>
           </Menu>
-
         </View>
 
         { state.name && (
@@ -197,6 +194,20 @@ const triggerStyles = {
               />
             </View>
 
+            <View style={styles.buttons}>
+              <TouchableOpacity style={styles.cancelButton} activeOpacity={1} onPress={actions.hideDetails}>
+                <Text style={styles.cancelButtonText}>{ state.strings.cancel }</Text>
+              </TouchableOpacity>
+              <TouchableOpacity style={styles.saveButton} activeOpacity={1} onPress={saveDetails}>
+                { busyDetail && (
+                  <ActivityIndicator animating={true} color={Colors.primaryButtonText} />
+                )}
+                { !busyDetail && (
+                  <Text style={styles.saveButtonText}>{ state.strings.save }</Text>
+                )}
+              </TouchableOpacity>
+            </View>
+
           </View>
         </BlurView>
       </Modal>

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

@@ -178,6 +178,7 @@ export const styles = StyleSheet.create({
   modalHeader: {
     fontSize: 18,
     paddingTop: 16,
+    paddingBottom: 16,
     color: Colors.labelText,
     fontFamily: 'Roboto',
   },
@@ -211,5 +212,47 @@ export const styles = StyleSheet.create({
     minHeight: 48,
     maxHeight: 128,
   },
+  buttons: {
+    display: 'flex',
+    width: '100%',
+    flexDirection: 'row',
+    padding: 8,
+    alignItem: 'flex-end',
+    justifyContent: 'flex-end',
+  },
+  cancelButton: {
+    marginTop: 8,
+    marginBottom: 16,
+    marginRight: 16,
+    paddingTop: 8,
+    paddingBottom: 8,
+    borderRadius: 4,
+    backgroundColor: Colors.cancelButton,
+    width: '33%',
+    height: 32,
+    display: 'flex',
+    alignItems: 'center',
+  },
+  cancelButtonText: {
+    color: Colors.cancelButtonText,
+    fontFamily: 'Roboto',
+  },
+  saveButton: {
+    marginTop: 8,
+    marginBottom: 16,
+    marginRight: 16,
+    paddingTop: 8,
+    paddingBottom: 8,
+    borderRadius: 4,
+    backgroundColor: Colors.primaryButton,
+    width: '33%',
+    height: 32,
+    display: 'flex',
+    alignItems: 'center',
+  },
+  saveButtonText: {
+    color: Colors.primaryButtonText,
+    fontFamily: 'Roboto',
+  },
 });
 

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

@@ -69,7 +69,10 @@ export function useProfile() {
       await profile.actions.setProfileImage(data);
     },
     showDetails: () => {
-      updateState({ details: true, detailName: '', detailLocation: '', detailDescription: '' });
+      const detailName = state.name ? state.name : '';
+      const detailLocation = state.location ? state.location : '';
+      const detailDescription = state.description ? state.description : '';
+      updateState({ details: true, detailName, detailLocation, detailDescription });
     },
     hideDetails: () => {
       updateState({ details: false });
@@ -83,6 +86,9 @@ export function useProfile() {
     setDetailDescription: (detailDescription) => {
       updateState({ detailDescription });
     },
+    saveDetails: async () => {
+      await profile.actions.setProfileData(state.detailName, state.detailLocation, state.detailDescription);
+    },
   };
 
   return { state, actions };