rendering profile screen

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

app/mobile/src/session/Session.jsx

@@ -106,7 +106,7 @@ export function Session() {
   }
   const ProfileDrawerContent = ({ navigation }) => {
     return (
-      <SafeAreaView>
+      <SafeAreaView edges={['right']}>
         <Profile closeProfile={() => closeProfile(navigation)} />
       </SafeAreaView>
     )
@@ -238,7 +238,9 @@ export function Session() {
           <Tab.Screen name="Conversation">
             {(props) => (<SafeAreaView style={styles.tabframe} edges={['top']}><ConversationStackScreen /></SafeAreaView>)}
           </Tab.Screen>
-          <Tab.Screen name="Profile" component={ProfileStackScreen} />
+          <Tab.Screen name="Profile">
+            {(props) => (<SafeAreaView style={styles.tabframe} edges={['top']}><ProfileStackScreen /></SafeAreaView>)}
+          </Tab.Screen>
           <Tab.Screen name="Contacts">
             {(props) => (<SafeAreaView style={styles.tabframe} edges={['top']}><ContactStackScreen /></SafeAreaView>)}
           </Tab.Screen>

app/mobile/src/session/channels/Channels.jsx

@@ -19,7 +19,7 @@ export function Channels() {
             <View style={styles.space} />
           </View>
           <TouchableOpacity style={styles.add}>
-            <Ionicons name={'message1'} size={16} color={Colors.white} style={[styles.box, { transform: [ { rotate: "180deg" }, ]} ]}/>
+            <Ionicons name={'message1'} size={16} color={Colors.white} style={[styles.box, { transform: [ { rotateY: "180deg" }, ]} ]}/>
             <Text style={styles.newtext}>New</Text>
           </TouchableOpacity>
         </View>

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 (<SafeAreaView edges={['top']}><TouchableOpacity style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }} onPress={logout}><Text>~ PROFILE LOGOUT</Text></TouchableOpacity></SafeAreaView>)
+  return (
+    <ScrollView>
+      <View style={styles.container}>
+      <TouchableOpacity style={styles.header}>
+        <Text style={styles.headerText}>{ `${state.handle}@${state.node}` }</Text>
+      </TouchableOpacity>
+      <TouchableOpacity style={{ width: 128 }}>
+        <Logo src={state.imageSource} width={128} height={128} radius={8} />
+        <View style={styles.edit}>
+          <Ionicons name="edit" size={14} color={Colors.white} />
+        </View>
+      </TouchableOpacity>
+      <TouchableOpacity style={styles.detail}>
+        <View style={styles.attribute}>
+          <Text style={styles.nametext}>{ state.name }</Text>
+          <Ionicons name="edit" size={16} color={Colors.text} />
+        </View>
+        <View style={styles.attribute}>
+          <Ionicons name="enviromento" size={14} color={Colors.text} />
+          <Text style={styles.locationtext}>{ state.location }</Text>
+        </View> 
+        <View style={styles.attribute}>
+          <Ionicons name="book" size={14} color={Colors.text} />
+          <Text style={styles.descriptiontext}>{ state.description }</Text>
+        </View> 
+      </TouchableOpacity>
+      <View style={styles.visible}>
+        <Text style={styles.visibleText}>Visible in Registry</Text>
+        <Switch style={styles.visibleSwitch} value={state.searchable} onValueChange={setVisible} />
+      </View>
+      <TouchableOpacity style={styles.logout} onPress={actions.logout}>
+        <Ionicons name="logout" size={14} color={Colors.white} />
+        <Text style={styles.logoutText}>Logout</Text>
+      </TouchableOpacity>
+      </View>
+    </ScrollView>
+  )
 }
 

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,
+  }
+})
+

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