loading more of conversation

app/mobile/src/context/useChannelContext.hook.js

@@ -225,7 +225,7 @@ export function useChannelContext() {
     },
     setTopicMarker: async (channelId, marker) => {
       const { guid } = access.current || {};
-      await store.actions.setChannelItemTopicMarker(guid, channelId, revision);
+      await store.actions.setChannelItemTopicMarker(guid, channelId, marker);
       setChannelField(channelId, 'topicMarker', marker);
     },
     setMarkerAndSync: async (channelId, marker, revision) => {

app/mobile/src/context/useConversationContext.hook.js

@@ -93,7 +93,7 @@ export function useConversationContext() {
             curSyncRevision.current = delta.revision;
             updateState({ loaded: true, offsync: false, topics: topics.current, card: cardValue, channel: channelValue });
           }
-          else if (loadMore && marker) {
+          else if (loadMore) {
             const delta = await getTopicDelta(cardId, channelId, null, COUNT, null, curTopicMarker.current);
             const marker = delta.marker ? delta.marker : 1;
             await setTopicDelta(cardId, channelId, delta.topics);
@@ -333,9 +333,9 @@ export function useConversationContext() {
       const { cardId, channelId } = conversationId.current || {};
       return getTopicAssetUrl(cardId, channelId, topicId, assetId);
     },
-    loadMore: () => {
+    loadMore: async () => {
       more.current = true;
-      sync();
+      await sync();
     },
     resync: () => {
       force.current = true;

app/mobile/src/context/useStoreContext.hook.js

@@ -1,7 +1,7 @@
 import { useEffect, useState, useRef, useContext } from 'react';
 import SQLite from "react-native-sqlite-storage";
 
-const DATABAG_DB = 'db_v_126.db';
+const DATABAG_DB = 'db_v_131.db';
 
 export function useStoreContext() {
   const [state, setState] = useState({});

app/mobile/src/session/conversation/Conversation.jsx

@@ -13,6 +13,19 @@ export function Conversation({ navigation, cardId, channelId, closeConversation,
 
   const { state, actions } = useConversation();
 
+  const loadMore = async () => {
+    try {
+      await actions.loadMore();
+    }
+    catch (err) {
+      console.log(err);
+      Alert.alert(
+        'Failed to Load More Messages',
+        'Please try again',
+      )
+    }
+  }
+
   const updateTopic = async () => {
     try {
       await actions.updateTopic();
@@ -77,11 +90,16 @@ export function Conversation({ navigation, cardId, channelId, closeConversation,
               <ActivityIndicator color={Colors.grey} size="large" />
             </View>
           )}
+          { state.moreBusy && state.topics.length > 32 && (
+            <ActivityIndicator style={styles.more} color={Colors.primary} />
+          )}
           { state.loaded && state.topics.length !== 0 && (
             <FlatList style={{ ...styles.conversation, transform: [{rotate: '180deg'}]}}
                contentContainerStyle={styles.topics}
                data={state.topics}
                initialNumToRender={16}
+               onEndReached={loadMore}
+               onEndReachedThreshold={0.1}
                renderItem={({item}) => <TopicItem item={item} focused={item.topicId === state.focus} 
                  focus={() => actions.setFocus(item.topicId)} hosting={state.host == null}
                  remove={actions.removeTopic} update={actions.editTopic} block={actions.blockTopic}

app/mobile/src/session/conversation/Conversation.styled.js

@@ -10,6 +10,9 @@ export const styles = StyleSheet.create({
     alignItems: 'center',
     flexShrink: 1,
   },
+  more: {
+    marginTop: 8,
+  },
   header: {
     display: 'flex',
     flexDirection: 'row',

app/mobile/src/session/conversation/useConversation.hook.js

@@ -20,6 +20,7 @@ export function useConversation() {
     editMessage: null,
     editData: null,
     updateBusy: false,
+    moreBusy: false,
   });
 
   const updateState = (value) => {
@@ -143,6 +144,20 @@ export function useConversation() {
     removeTopic: async (topicId) => {
       await conversation.actions.removeTopic(topicId);
     },
+    loadMore: async () => {
+      if (!state.moreBusy) {
+        try {
+          updateState({ moreBusy: true });
+          await conversation.actions.loadMore();
+          updateState({ moreBusy: false });
+        }
+        catch(err) {
+          console.log(err);
+          updateState({ moreBusy: false });
+          throw new Error("failed to load more");
+        }
+      }
+    },
   };
 
   return { state, actions };