From 16a358dd86d32bb275ba86115d027bccc4edd07e Mon Sep 17 00:00:00 2001 From: Roland Osborne Date: Wed, 21 Sep 2022 14:06:30 -0700 Subject: [PATCH] rendering profile screen --- .../src/context/useAccountContext.hook.js | 4 +- app/mobile/src/session/Session.jsx | 6 +- app/mobile/src/session/channels/Channels.jsx | 2 +- app/mobile/src/session/profile/Profile.jsx | 65 +++++++++++-- .../src/session/profile/Profile.styled.js | 94 +++++++++++++++++++ .../src/session/profile/useProfile.hook.js | 50 ++++++++++ 6 files changed, 206 insertions(+), 15 deletions(-) create mode 100644 app/mobile/src/session/profile/Profile.styled.js create mode 100644 app/mobile/src/session/profile/useProfile.hook.js diff --git a/app/mobile/src/context/useAccountContext.hook.js b/app/mobile/src/context/useAccountContext.hook.js index 26f1568a..6ccf944c 100644 --- a/app/mobile/src/context/useAccountContext.hook.js +++ b/app/mobile/src/context/useAccountContext.hook.js @@ -62,11 +62,11 @@ export function useAccountContext() { sync(); }, setSearchable: async (flag) => { - const { server, appToken } = access; + const { server, appToken } = session.current; await setAccountSearchable(server, appToken, flag); }, setLogin: async (username, password) => { - const { server, appToken } = access; + const { server, appToken } = session.current; await setAccountLogin(server, appToken, username, password); }, } diff --git a/app/mobile/src/session/Session.jsx b/app/mobile/src/session/Session.jsx index 9d40a0ee..6db496f4 100644 --- a/app/mobile/src/session/Session.jsx +++ b/app/mobile/src/session/Session.jsx @@ -106,7 +106,7 @@ export function Session() { } const ProfileDrawerContent = ({ navigation }) => { return ( - + closeProfile(navigation)} /> ) @@ -238,7 +238,9 @@ export function Session() { {(props) => ()} - + + {(props) => ()} + {(props) => ()} diff --git a/app/mobile/src/session/channels/Channels.jsx b/app/mobile/src/session/channels/Channels.jsx index 4e1f5ca2..d45c4338 100644 --- a/app/mobile/src/session/channels/Channels.jsx +++ b/app/mobile/src/session/channels/Channels.jsx @@ -19,7 +19,7 @@ export function Channels() { - + New diff --git a/app/mobile/src/session/profile/Profile.jsx b/app/mobile/src/session/profile/Profile.jsx index 3c27ae0a..9eb6ab9f 100644 --- a/app/mobile/src/session/profile/Profile.jsx +++ b/app/mobile/src/session/profile/Profile.jsx @@ -1,19 +1,64 @@ import { useContext } from 'react'; -import { View, TouchableOpacity, Text } from 'react-native'; -import { SafeAreaView } from 'react-native-safe-area-context'; -import { AppContext } from 'context/AppContext'; -import { useNavigate } from 'react-router-dom'; +import { Alert, ScrollView, View, Switch, TouchableOpacity, Text } from 'react-native'; +import { styles } from './Profile.styled'; +import { useProfile } from './useProfile.hook'; +import { Logo } from 'utils/Logo'; +import Ionicons from '@expo/vector-icons/AntDesign'; +import Colors from 'constants/Colors'; export function Profile() { - const app = useContext(AppContext); - const navigate = useNavigate(); + const { state, actions } = useProfile(); - const logout = () => { - app.actions.logout(); - navigate('/'); + const setVisible = async (visible) => { + try { + await actions.setVisible(visible); + } + catch (err) { + console.log(err); + Alert.alert( + 'Account Update Failed', + 'Please try again.' + ); + } } - return (~ PROFILE LOGOUT) + return ( + + + + { `${state.handle}@${state.node}` } + + + + + + + + + + { state.name } + + + + + { state.location } + + + + { state.description } + + + + Visible in Registry + + + + + Logout + + + + ) } diff --git a/app/mobile/src/session/profile/Profile.styled.js b/app/mobile/src/session/profile/Profile.styled.js new file mode 100644 index 00000000..2b9b9029 --- /dev/null +++ b/app/mobile/src/session/profile/Profile.styled.js @@ -0,0 +1,94 @@ +import { StyleSheet } from 'react-native'; +import { Colors } from 'constants/Colors'; + +export const styles = StyleSheet.create({ + container: { + width: '100%', + height: '100%', + display: 'flex', + flexDirection: 'column', + paddingBottom: 32, + alignItems: 'center', + justifyContent: 'center', + }, + header: { + paddingBottom: 32, + paddingTop: 16, + display: 'flex', + flexDirection: 'row', + alignItems: 'flex-end', + justifyContent: 'center', + }, + headerText: { + fontSize: 16, + paddingRight: 4, + textDecorationLine: 'underline', + }, + edit: { + position: 'absolute', + bottom: 0, + right: 0, + padding: 4, + backgroundColor: Colors.lightgrey, + borderBottomRightRadius: 8, + borderTopLeftRadius: 8, + }, + detail: { + paddingTop: 32, + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + color: Colors.text, + }, + attribute: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + paddingBottom: 8, + }, + nametext: { + fontSize: 18, + paddingRight: 8, + fontWeight: 'bold', + }, + locationtext: { + fontSize: 16, + paddingLeft: 8, + }, + descriptiontext: { + fontSize: 16, + paddingLeft: 8 + }, + visible: { + display: 'flex', + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + paddingTop: 16, + }, + visibleText: { + fontSize: 14, + color: Colors.text, + paddingRight: 2, + }, + visibleSwitch: { + transform: [{ scaleX: .6 }, { scaleY: .6 }], + }, + logout: { + marginTop: 32, + borderRadius: 4, + backgroundColor: Colors.primary, + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + paddingLeft: 8, + paddingRight: 8, + paddingTop: 4, + paddingBottom: 4, + }, + logoutText: { + color: Colors.white, + paddingLeft: 8, + } +}) + diff --git a/app/mobile/src/session/profile/useProfile.hook.js b/app/mobile/src/session/profile/useProfile.hook.js new file mode 100644 index 00000000..0e47fb41 --- /dev/null +++ b/app/mobile/src/session/profile/useProfile.hook.js @@ -0,0 +1,50 @@ +import { useState, useEffect, useRef, useContext } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { ProfileContext } from 'context/ProfileContext'; +import { AccountContext } from 'context/AccountContext'; +import { AppContext } from 'context/AppContext'; + +export function useProfile() { + + const [state, setState] = useState({ + name: null, + handle: null, + location: null, + description: null, + node: null, + imageSource: null, + searchable: null, + }); + + const app = useContext(AppContext); + const account = useContext(AccountContext); + const profile = useContext(ProfileContext); + const navigate = useNavigate(); + + const updateState = (value) => { + setState((s) => ({ ...s, ...value })); + } + + 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 }); + }, [profile]); + + useEffect(() => { + updateState({ searchable: account.state.status.searchable }); + }, [account]); + + const actions = { + logout: () => { + app.actions.logout(); + navigate('/'); + }, + setVisible: async (visible) => { + await account.actions.setSearchable(visible); + }, + }; + + return { state, actions }; +} +