martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-11 19:19: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 { 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,26 +51,23 @@ export function Profile() {
}
const saveDetails = async () => {
try {
await actions.saveDetails();
actions.hideEditDetails();
}
catch (err) {
console.log(err);
Alert.alert(
state.strings.error,
state.strings.tryAgain,
)
if (!busyDetail) {
setBusyDetail(true);
try {
await actions.saveDetails();
actions.hideDetails();
}
catch (err) {
console.log(err);
Alert.alert(
state.strings.error,
state.strings.tryAgain,
)
}
setBusyDetail(false);
}
}
const triggerStyles = {
triggerTouchable: {
activeOpacity: 70,
},
};
return (
<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.control}>
<Menu>
<MenuTrigger customStyles={styles.trigger}>
<View style={styles.edit}>
<Text style={styles.editLabel}>{ state.strings.edit }</Text>
<MatIcons name="square-edit-outline" size={14} color={Colors.linkText} />
</View>
</MenuTrigger>
<MenuOptions optionsContainerStyle={{ width: 'auto' }} style={styles.options}>
<MenuOption onSelect={onGallery}>
<Text style={styles.option}>{ state.strings.editImage }</Text>
</MenuOption>
<MenuOption onSelect={actions.showDetails}>
<Text style={styles.option}>{ state.strings.editDetails }</Text>
</MenuOption>
</MenuOptions>
</Menu>
<Menu>
<MenuTrigger customStyles={styles.trigger}>
<View style={styles.edit}>
<Text style={styles.editLabel}>{ state.strings.edit }</Text>
<MatIcons name="square-edit-outline" size={14} color={Colors.linkText} />
</View>
</MenuTrigger>
<MenuOptions optionsContainerStyle={{ width: 'auto' }} style={styles.options}>
<MenuOption onSelect={onGallery}>
<Text style={styles.option}>{ state.strings.editImage }</Text>
</MenuOption>
<MenuOption onSelect={actions.showDetails}>
<Text style={styles.option}>{ state.strings.editDetails }</Text>
</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>

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

@ -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',
},
});

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

@ -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 };