martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-12 03:29:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

finished first pass of refactored profile screen

Browse Source
This commit is contained in:
balzack 2023-09-11 18:19:15 -07:00
parent 81a222a18f
commit 3b0677ff65
3 changed files with 96 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
app/mobile/src/session/profile/Profile.jsx
View File

@ -1,4 +1,5 @@
import { ActivityIndicator, KeyboardAvoidingView, Image, Modal, View, Switch, Text, ScrollView, TextInput, TouchableOpacity, Alert } from 'react-native'; 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 AntIcons from 'react-native-vector-icons/AntDesign';
import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import ImagePicker from 'react-native-image-crop-picker' import ImagePicker from 'react-native-image-crop-picker'
@ -13,6 +14,7 @@ import avatar from 'images/avatar.png';
export function Profile() { export function Profile() {
const [busyDetail, setBusyDetail] = useState(false);
const { state, actions } = useProfile(); const { state, actions } = useProfile();
const onGallery = async () => { const onGallery = async () => {
@ -49,26 +51,23 @@ export function Profile() {
} }
const saveDetails = async () => { const saveDetails = async () => {
try { if (!busyDetail) {
await actions.saveDetails(); setBusyDetail(true);
actions.hideEditDetails(); try {
} await actions.saveDetails();
catch (err) { actions.hideDetails();
console.log(err); }
Alert.alert( catch (err) {
state.strings.error, console.log(err);
state.strings.tryAgain, Alert.alert(
) state.strings.error,
state.strings.tryAgain,
)
}
setBusyDetail(false);
} }
} }
const triggerStyles = {
triggerTouchable: {
activeOpacity: 70,
},
};
return ( return (
<ScrollView style={styles.content} contentContainerStyle={{ display: 'flex', alignItems: 'center' }}> <ScrollView style={styles.content} contentContainerStyle={{ display: 'flex', alignItems: 'center' }}>
@ -76,24 +75,22 @@ const triggerStyles = {
<View style={{ ...styles.details, width: state.detailWidth }}> <View style={{ ...styles.details, width: state.detailWidth }}>
<View style={styles.control}> <View style={styles.control}>
<Menu>
<Menu> <MenuTrigger customStyles={styles.trigger}>
<MenuTrigger customStyles={styles.trigger}> <View style={styles.edit}>
<View style={styles.edit}> <Text style={styles.editLabel}>{ state.strings.edit }</Text>
<Text style={styles.editLabel}>{ state.strings.edit }</Text> <MatIcons name="square-edit-outline" size={14} color={Colors.linkText} />
<MatIcons name="square-edit-outline" size={14} color={Colors.linkText} /> </View>
</View> </MenuTrigger>
</MenuTrigger> <MenuOptions optionsContainerStyle={{ width: 'auto' }} style={styles.options}>
<MenuOptions optionsContainerStyle={{ width: 'auto' }} style={styles.options}> <MenuOption onSelect={onGallery}>
<MenuOption onSelect={onGallery}> <Text style={styles.option}>{ state.strings.editImage }</Text>
<Text style={styles.option}>{ state.strings.editImage }</Text> </MenuOption>
</MenuOption> <MenuOption onSelect={actions.showDetails}>
<MenuOption onSelect={actions.showDetails}> <Text style={styles.option}>{ state.strings.editDetails }</Text>
<Text style={styles.option}>{ state.strings.editDetails }</Text> </MenuOption>
</MenuOption> </MenuOptions>
</MenuOptions> </Menu>
</Menu>
</View> </View>
{ state.name && ( { state.name && (
@ -197,6 +194,20 @@ const triggerStyles = {
/> />
</View> </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> </View>
</BlurView> </BlurView>
</Modal> </Modal>

43
app/mobile/src/session/profile/Profile.styled.js
View File

@ -178,6 +178,7 @@ export const styles = StyleSheet.create({
modalHeader: { modalHeader: {
fontSize: 18, fontSize: 18,
paddingTop: 16, paddingTop: 16,
paddingBottom: 16,
color: Colors.labelText, color: Colors.labelText,
fontFamily: 'Roboto', fontFamily: 'Roboto',
}, },
@ -211,5 +212,47 @@ export const styles = StyleSheet.create({
minHeight: 48, minHeight: 48,
maxHeight: 128, 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',
},
}); });

8
app/mobile/src/session/profile/useProfile.hook.js
View File

@ -69,7 +69,10 @@ export function useProfile() {
await profile.actions.setProfileImage(data); await profile.actions.setProfileImage(data);
}, },
showDetails: () => { 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: () => { hideDetails: () => {
updateState({ details: false }); updateState({ details: false });
@ -83,6 +86,9 @@ export function useProfile() {
setDetailDescription: (detailDescription) => { setDetailDescription: (detailDescription) => {
updateState({ detailDescription }); updateState({ detailDescription });
}, },
saveDetails: async () => {
await profile.actions.setProfileData(state.detailName, state.detailLocation, state.detailDescription);
},
}; };
return { state, actions }; return { state, actions };