From 61cb4fc9037a57434e45ecf1b190a1d474f99121 Mon Sep 17 00:00:00 2001
From: Roland Osborne <roland.osborne@gmail.com>
Date: Tue, 20 Sep 2022 12:05:32 -0700
Subject: [PATCH] fix flickering in channel list

---
 .../src/context/useChannelContext.hook.js     |  2 --
 .../channelItem/ChannelItem.styled.js         | 28 +++++++++++++++++++
 .../src/session/channels/useChannels.hook.js  |  7 ++++-
 app/mobile/src/session/useSession.hook.js     |  2 --
 4 files changed, 34 insertions(+), 5 deletions(-)
 create mode 100644 app/mobile/src/session/channels/channelItem/ChannelItem.styled.js

diff --git a/app/mobile/src/context/useChannelContext.hook.js b/app/mobile/src/context/useChannelContext.hook.js
index 727242a7..0953b4ba 100644
--- a/app/mobile/src/context/useChannelContext.hook.js
+++ b/app/mobile/src/context/useChannelContext.hook.js
@@ -64,7 +64,6 @@ export function useChannelContext() {
         const { server, appToken, guid } = session.current;
 
         const delta = await getChannels(server, appToken, setRevision.current);
-console.log(delta);
         for (let channel of delta) {
           if (channel.data) {
             if (channel.data.channelDetail && channel.data.channelSummary) {
@@ -139,7 +138,6 @@ console.log(delta);
       updateState({ account: null, channels: channels.current });
     },
     setRevision: (rev) => {
-console.log("CHANNEL REVISION:", rev);
       curRevision.current = rev;
       sync();
     },
diff --git a/app/mobile/src/session/channels/channelItem/ChannelItem.styled.js b/app/mobile/src/session/channels/channelItem/ChannelItem.styled.js
new file mode 100644
index 00000000..b494527a
--- /dev/null
+++ b/app/mobile/src/session/channels/channelItem/ChannelItem.styled.js
@@ -0,0 +1,28 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from 'constants/Colors';
+
+export const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    height: 48,
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    borderColor: Colors.itemDivider,
+  },
+  detail: {
+    paddingLeft: 12,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    flexGrow: 1,
+    flexShrink: 1,
+  },
+  subject: {
+  },
+  message: {
+    color: Colors.disabled,
+  },
+})
+
diff --git a/app/mobile/src/session/channels/useChannels.hook.js b/app/mobile/src/session/channels/useChannels.hook.js
index 93c2f816..7bef6480 100644
--- a/app/mobile/src/session/channels/useChannels.hook.js
+++ b/app/mobile/src/session/channels/useChannels.hook.js
@@ -67,7 +67,12 @@ export function useChannels() {
       if (contacts.length) {
         let names = [];
         for (let contact of contacts) {
-          names.push(contact?.profile?.handle);
+          if (contact?.profile?.name) {
+            names.push(contact.profile.name);
+          }
+          else {
+            names.push(contact?.profile?.handle);
+          }
         }
         subject = names.join(', ');
       }
diff --git a/app/mobile/src/session/useSession.hook.js b/app/mobile/src/session/useSession.hook.js
index 85f39fb3..016fe0ba 100644
--- a/app/mobile/src/session/useSession.hook.js
+++ b/app/mobile/src/session/useSession.hook.js
@@ -1,7 +1,6 @@
 import { useState, useEffect, useContext } from 'react';
 import { useWindowDimensions } from 'react-native';
 import { useNavigate } from 'react-router-dom';
-import { AppContext } from 'context/AppContext';
 import config from 'constants/Config';
 
 export function useSession() {
@@ -14,7 +13,6 @@ export function useSession() {
     converstaionId: null,
   });
   const dimensions = useWindowDimensions();
-  const app = useContext(AppContext);
   const navigate = useNavigate();
 
   const updateState = (value) => {