diff --git a/app/mobile/src/session/profile/Profile.jsx b/app/mobile/src/session/profile/Profile.jsx index ce857f79..c30a63e8 100644 --- a/app/mobile/src/session/profile/Profile.jsx +++ b/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 ( - - { `${state.handle}@${state.node}` } - - - - - + + { `${state.handle}@${state.node}` } - - - - - - - { state.name } - + + + + + + + + - - - { state.location } - - - - { state.description } - - - - Visible in Registry - - - - - Logout - + + + { state.name } + + + + + { state.location } + + + + { state.description } + + + + Visible in Registry + + + + + Logout + + + + + Edit Details: + + + + + + + + + + + + Cancel + + + Save + + + + + + + + + Change Login: + + + + + + + + + + + + Cancel + + + Save + + + + + ) } diff --git a/app/mobile/src/session/profile/Profile.styled.js b/app/mobile/src/session/profile/Profile.styled.js index eb97e763..c2e8dc70 100644 --- a/app/mobile/src/session/profile/Profile.styled.js +++ b/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, - paddingBottom: 4, + paddingTop: 8, + 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, + } }) diff --git a/app/mobile/src/session/profile/useProfile.hook.js b/app/mobile/src/session/profile/useProfile.hook.js index 44a1693f..0c71699e 100644 --- a/app/mobile/src/session/profile/useProfile.hook.js +++ b/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 };