From b2ce79a290a40d78a5c80b59851dc2656bb14a2a Mon Sep 17 00:00:00 2001
From: Roland Osborne <roland.osborne@gmail.com>
Date: Fri, 14 Oct 2022 14:01:07 -0700
Subject: [PATCH] render disconnected indicator

---
 app/mobile/src/dashboard/Dashboard.styled.js  |  1 +
 app/mobile/src/session/Session.jsx            |  7 +++---
 app/mobile/src/session/Session.styled.js      | 14 ++++++++++-
 app/mobile/src/session/profile/Profile.jsx    |  8 ++++++
 .../src/session/profile/Profile.styled.js     |  9 +++++--
 .../src/session/profile/useProfile.hook.js    |  6 +++++
 .../src/session/profileIcon/ProfileIcon.jsx   | 19 ++++++++++++++
 .../session/profileIcon/ProfileIcon.styled.js | 14 +++++++++++
 .../profileIcon/useProfileIcon.hook.js        | 25 +++++++++++++++++++
 9 files changed, 97 insertions(+), 6 deletions(-)
 create mode 100644 app/mobile/src/session/profileIcon/ProfileIcon.jsx
 create mode 100644 app/mobile/src/session/profileIcon/ProfileIcon.styled.js
 create mode 100644 app/mobile/src/session/profileIcon/useProfileIcon.hook.js

diff --git a/app/mobile/src/dashboard/Dashboard.styled.js b/app/mobile/src/dashboard/Dashboard.styled.js
index 060b02f0..e8c37d98 100644
--- a/app/mobile/src/dashboard/Dashboard.styled.js
+++ b/app/mobile/src/dashboard/Dashboard.styled.js
@@ -208,6 +208,7 @@ export const styles = StyleSheet.create({
     display: 'flex',
     flexDirection: 'row',
     marginTop: 8,
+    alignItems: 'center',
   },
   tokenLabel: {
     fontSize: 16,
diff --git a/app/mobile/src/session/Session.jsx b/app/mobile/src/session/Session.jsx
index 2512d2e1..215a0ef3 100644
--- a/app/mobile/src/session/Session.jsx
+++ b/app/mobile/src/session/Session.jsx
@@ -22,6 +22,7 @@ import { ChannelsTitle, ChannelsBody, Channels } from './channels/Channels';
 import { useChannels } from './channels/useChannels.hook';
 import { CommonActions } from '@react-navigation/native';
 import { ConversationContext } from 'context/ConversationContext';
+import { ProfileIcon } from './profileIcon/ProfileIcon';
 
 const ConversationStack = createStackNavigator();
 const ProfileStack = createStackNavigator();
@@ -196,8 +197,8 @@ export function Session() {
         <SafeAreaView edges={['top', 'bottom']} style={styles.sidebar}>
           <SafeAreaView edges={['left']} style={styles.options}>
             <TouchableOpacity style={styles.option} onPress={openProfile}>
-              <Ionicons style={styles.icon} name={'user'} size={20} />
-              <Text>Profile</Text>
+              <ProfileIcon color={Colors.text} size={20} />
+              <Text style={styles.profileLabel}>Profile</Text>
             </TouchableOpacity>
             <TouchableOpacity style={styles.option} onPress={openCards}>
               <Ionicons style={styles.icon} name={'contacts'} size={20} />
@@ -353,7 +354,7 @@ export function Session() {
             headerShown: false,
             tabBarIcon: ({ focused, color, size }) => {
               if (route.name === 'Profile') {
-                return <Ionicons name={'user'} size={size} color={color} />;
+                return <ProfileIcon size={size} color={color} />
               }
               if (route.name === 'Conversation') {
                 return <Ionicons name={'message1'} size={size} color={color} />;
diff --git a/app/mobile/src/session/Session.styled.js b/app/mobile/src/session/Session.styled.js
index cc1e1e40..45709b48 100644
--- a/app/mobile/src/session/Session.styled.js
+++ b/app/mobile/src/session/Session.styled.js
@@ -56,5 +56,17 @@ export const styles = StyleSheet.create({
   tabframe: {
     width: '100%',
     height: '100%',
-  }
+  },
+  disconnected: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: Colors.alert,
+    position: 'absolute',
+    right: 0,
+    bottom: 0,
+  },
+  profileLabel: {
+    paddingLeft: 8,
+  },
 });
diff --git a/app/mobile/src/session/profile/Profile.jsx b/app/mobile/src/session/profile/Profile.jsx
index 4210890a..e2b06489 100644
--- a/app/mobile/src/session/profile/Profile.jsx
+++ b/app/mobile/src/session/profile/Profile.jsx
@@ -112,6 +112,14 @@ export function Profile() {
             <Ionicons name="picture" size={14} color={Colors.white} />
           </TouchableOpacity>
         </View>
+        { state.disconnected && (
+          <View style={styles.alert}>
+            <Text style={styles.disconnected}>Disconnected</Text>
+          </View>
+        )}
+        { !state.disconnected && (
+          <View style={styles.alert} />
+        )}
         <TouchableOpacity style={styles.detail} onPress={actions.showDetailEdit}>
           <View style={styles.attribute}>
             <Text style={styles.nametext}>{ state.name }</Text>
diff --git a/app/mobile/src/session/profile/Profile.styled.js b/app/mobile/src/session/profile/Profile.styled.js
index 02280261..72ef8c91 100644
--- a/app/mobile/src/session/profile/Profile.styled.js
+++ b/app/mobile/src/session/profile/Profile.styled.js
@@ -60,8 +60,10 @@ export const styles = StyleSheet.create({
     borderBottomRightRadius: 8,
     borderTopLeftRadius: 8,
   },
+  alert: {
+    height: 32,
+  },
   detail: {
-    paddingTop: 32,
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
@@ -212,6 +214,9 @@ export const styles = StyleSheet.create({
   },
   saveText: {
     color: Colors.white,
-  }
+  },
+  disconnected: {
+    color: Colors.alert,
+  },
 })
 
diff --git a/app/mobile/src/session/profile/useProfile.hook.js b/app/mobile/src/session/profile/useProfile.hook.js
index 9e29199b..eaed79fd 100644
--- a/app/mobile/src/session/profile/useProfile.hook.js
+++ b/app/mobile/src/session/profile/useProfile.hook.js
@@ -31,6 +31,7 @@ export function useProfile() {
     blockedChannels: false,
     blockedCards: false,
     tabbed: null,
+    disconnected: false,
   });
 
   const app = useContext(AppContext);
@@ -64,6 +65,11 @@ export function useProfile() {
     updateState({ searchable: account.state.status.searchable });
   }, [account]);
 
+  useEffect(() => {
+    const { disconnected } = app.state;
+    updateState({ disconnected });
+  }, [app]);
+
   const actions = {
     logout: () => {
       app.actions.logout();
diff --git a/app/mobile/src/session/profileIcon/ProfileIcon.jsx b/app/mobile/src/session/profileIcon/ProfileIcon.jsx
new file mode 100644
index 00000000..9416fa19
--- /dev/null
+++ b/app/mobile/src/session/profileIcon/ProfileIcon.jsx
@@ -0,0 +1,19 @@
+import { View } from 'react-native';
+import { useProfileIcon } from './useProfileIcon.hook';
+import { styles } from './ProfileIcon.styled';
+import Ionicons from '@expo/vector-icons/AntDesign';
+
+export function ProfileIcon({ size, color }) {
+
+  const { state, actions } = useProfileIcon();
+
+  return (
+    <View>
+      <Ionicons name={'user'} size={size} color={color} />
+      { state.disconnected && (
+        <View style={styles.disconnected} />
+      )}
+    </View>
+  );
+}
+
diff --git a/app/mobile/src/session/profileIcon/ProfileIcon.styled.js b/app/mobile/src/session/profileIcon/ProfileIcon.styled.js
new file mode 100644
index 00000000..53e757a7
--- /dev/null
+++ b/app/mobile/src/session/profileIcon/ProfileIcon.styled.js
@@ -0,0 +1,14 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from 'constants/Colors';
+
+export const styles = StyleSheet.create({
+  disconnected: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: Colors.alert,
+    position: 'absolute',
+    right: 0,
+    bottom: 0,
+  },
+});
diff --git a/app/mobile/src/session/profileIcon/useProfileIcon.hook.js b/app/mobile/src/session/profileIcon/useProfileIcon.hook.js
new file mode 100644
index 00000000..4b8406da
--- /dev/null
+++ b/app/mobile/src/session/profileIcon/useProfileIcon.hook.js
@@ -0,0 +1,25 @@
+import { useState, useEffect, useContext } from 'react';
+import { AppContext } from 'context/AppContext';
+
+export function useProfileIcon() {
+
+  const [state, setState] = useState({
+    disconnected: false,
+  });
+
+  const app = useContext(AppContext);
+
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }));
+  }
+
+  useEffect(() => {
+    const { disconnected } = app.state
+    updateState({ disconnected });
+  }, [app]);
+
+  const actions = {};
+
+  return { state, actions };
+}
+