From 9dce08ff64367c7a2165275206e55b24f40ff59e Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Thu, 29 Sep 2022 23:19:15 -0700
Subject: [PATCH] rendering topics

---
 app/mobile/App.js                                |  4 ++++
 .../src/context/useConversationContext.hook.js   |  1 +
 .../src/session/conversation/Conversation.jsx    |  4 ++--
 .../session/conversation/useConversation.hook.js | 16 ++++++++++++++--
 4 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/app/mobile/App.js b/app/mobile/App.js
index bd69a45e..78dc3113 100644
--- a/app/mobile/App.js
+++ b/app/mobile/App.js
@@ -15,6 +15,10 @@ import { ChannelContextProvider } from 'context/ChannelContext';
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 import { NavigationContainer } from '@react-navigation/native';
 import { ConversationContextProvider } from 'context/ConversationContext';
+import { LogBox } from 'react-native';
+
+// silence warning: Sending `onAnimatedValueUpdate` with no listeners registered
+//LogBox.ignoreLogs(['Sending']);
 
 export default function App() {
 
diff --git a/app/mobile/src/context/useConversationContext.hook.js b/app/mobile/src/context/useConversationContext.hook.js
index cdaa2ecf..1e4ad4c0 100644
--- a/app/mobile/src/context/useConversationContext.hook.js
+++ b/app/mobile/src/context/useConversationContext.hook.js
@@ -152,6 +152,7 @@ export function useConversationContext() {
             // update revision
             revision.current = channelItem.revision;
             if (curView == setView.current) {
+console.log("update:", topics.current.size);
               updateState({ topics: topics.current });
             }
 
diff --git a/app/mobile/src/session/conversation/Conversation.jsx b/app/mobile/src/session/conversation/Conversation.jsx
index 3fd09367..7148abdd 100644
--- a/app/mobile/src/session/conversation/Conversation.jsx
+++ b/app/mobile/src/session/conversation/Conversation.jsx
@@ -36,8 +36,8 @@ export function ConversationBody({ channel }) {
     <FlatList style={styles.topics}
       data={state.topics}
       inverted={true}
-      renderItem={({item}) => <View style={{ height: item.id }}><Text>ITEM { item.id }</Text></View>}
-      keyExtractor={item => item.id}
+      renderItem={({item}) => <View><Text>ITEM { item?.detail?.data }</Text></View>}
+      keyExtractor={item => item.topicId}
     />
   );
 }
diff --git a/app/mobile/src/session/conversation/useConversation.hook.js b/app/mobile/src/session/conversation/useConversation.hook.js
index 157c1e43..8d0d440c 100644
--- a/app/mobile/src/session/conversation/useConversation.hook.js
+++ b/app/mobile/src/session/conversation/useConversation.hook.js
@@ -16,8 +16,20 @@ export function useConversation(cardId, channelId) {
   }
 
   useEffect(() => {
-    const { topics, subject, logo } = conversation.state;
-    updateState({ topics, subject, logo });
+    const { subject, logo, topics } = conversation.state;
+    const items = Array.from(topics.values());
+    const sorted = items.sort((a, b) => {
+      const aTimestamp = a?.detail?.created;
+      const bTimestamp = b?.detail?.created;
+      if(aTimestamp === bTimestamp) {
+        return 0;
+      }
+      if(aTimestamp == null || aTimestamp < bTimestamp) {
+        return 1;
+      }
+      return -1;
+    });
+    updateState({ topics, subject, logo, topics: sorted });
   }, [conversation]);
 
   const actions = {