Add fetching next pages; (#23)

* Add fetching next pages; * Renamed conversation-page to conversations-page; --------- Co-authored-by: Bishwajeet Parhi <[email protected]>
homebase-id · Apr 3, 2024 · d9cde08 · d9cde08
1 parent 465b9f3
commit d9cde08
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 9 deletions.
diff --git a/packages/mobile/android/app/src/main/java/id/homebase/feed/MainActivity.java b/packages/mobile/android/app/src/main/java/id/homebase/feed/MainActivity.java
@@ -4,6 +4,7 @@
 import com.facebook.react.ReactActivityDelegate;
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
 import com.facebook.react.defaults.DefaultReactActivityDelegate;
+import android.os.Bundle;
 
 public class MainActivity extends ReactActivity {
 

diff --git a/packages/mobile/src/app/App.tsx b/packages/mobile/src/app/App.tsx
@@ -40,7 +40,7 @@ import { NewGroupPage } from '../pages/new-group-page';
 import { PreviewMedia } from '../pages/media-preview-page';
 import { ProfilePage } from '../pages/profile/profile-page';
 import ChatPage from '../pages/chat/chat-page';
-import ConversationPage from '../pages/conversation-page';
+import { ConversationsPage } from '../pages/conversations-page';
 import EditGroupPage from '../pages/chat/edit-group-page';
 import { ConnectionRequestsPage } from '../pages/home/connection-requests-page';
 import { useDarkMode } from '../hooks/useDarkMode';
@@ -374,7 +374,7 @@ const ChatStack = (_props: NativeStackScreenProps<TabStackParamList, 'Chat'>) =>
     <StackChat.Navigator>
       <StackChat.Screen
         name="Conversation"
-        component={ConversationPage}
+        component={ConversationsPage}
         options={{
           title: 'Chats',
           headerShown: true,

diff --git a/packages/mobile/src/components/Chat/ChatDetail.tsx b/packages/mobile/src/components/Chat/ChatDetail.tsx
@@ -62,6 +62,9 @@ export const ChatDetail = memo(
     setReplyMessage,
     assets,
     setAssets,
+
+    hasMoreMessages,
+    fetchMoreMessages,
   }: {
     isGroup: boolean;
     messages: ChatMessageIMessage[];
@@ -81,6 +84,9 @@ export const ChatDetail = memo(
 
     assets: Asset[];
     setAssets: (assets: Asset[]) => void;
+
+    hasMoreMessages: boolean;
+    fetchMoreMessages: () => void;
   }) => {
     const { isDarkMode } = useDarkMode();
     const identity = useAuth().getIdentity();
@@ -358,8 +364,8 @@ export const ChatDetail = memo(
         onSend={doSend}
         infiniteScroll
         scrollToBottom
-        onLongPress={(e, _, m: ChatMessageIMessage) => onLongPress(e, m)}
         alwaysShowSend
+        onLongPress={(e, _, m: ChatMessageIMessage) => onLongPress(e, m)}
         isKeyboardInternallyHandled={true}
         keyboardShouldPersistTaps="never"
         renderMessageImage={(prop: MessageImageProps<ChatMessageIMessage>) => (
@@ -380,6 +386,8 @@ export const ChatDetail = memo(
         user={{
           _id: identity || '',
         }}
+        loadEarlier={hasMoreMessages}
+        onLoadEarlier={fetchMoreMessages}
       />
     );
   }

diff --git a/packages/mobile/src/hooks/chat/useConversations.ts b/packages/mobile/src/hooks/chat/useConversations.ts
@@ -29,7 +29,7 @@ export const useConversations = () => {
           const messagesA = await queryClient.fetchInfiniteQuery({
             queryKey: ['chat', conversationId],
             initialPageParam: undefined,
-            queryFn: () => getChatMessages(dotYouClient, conversationId as string, undefined, 10),
+            queryFn: () => getChatMessages(dotYouClient, conversationId as string, undefined, 100),
           });
           return {
             ...convo,

diff --git a/packages/mobile/src/pages/chat/chat-page.tsx b/packages/mobile/src/pages/chat/chat-page.tsx
@@ -43,7 +43,12 @@ const ChatPage = ({ route, navigation }: ChatProp) => {
 
   const [assets, setAssets] = useState<Asset[]>([]);
   // Messages
-  const { data: chatMessages, error } = useChatMessages({
+  const {
+    data: chatMessages,
+    hasNextPage: hasMoreMessages,
+    fetchNextPage: fetchMoreMessages,
+    error,
+  } = useChatMessages({
     conversationId: route.params.convoId,
   }).all;
 
@@ -204,7 +209,7 @@ const ChatPage = ({ route, navigation }: ChatProp) => {
   }, []);
 
   const [selectedReactionMessage, setSelectedReactionMessage] = useState<ChatMessageIMessage>();
-  const [showChatReactionPopup, setshowChatReactionPopup] = useState(false);
+  const [showChatReactionPopup, setshowChatReactionPopup] = useState(true);
 
   const openReactionModal = useCallback((message: ChatMessageIMessage) => {
     setSelectedReactionMessage(message);
@@ -300,6 +305,8 @@ const ChatPage = ({ route, navigation }: ChatProp) => {
               setReplyMessage={setReplyMessage}
               assets={assets}
               setAssets={setAssets}
+              hasMoreMessages={hasMoreMessages}
+              fetchMoreMessages={fetchMoreMessages}
             />
           </Pressable>
 

diff --git a/...es/mobile/src/pages/conversation-page.tsx → ...s/mobile/src/pages/conversations-page.tsx b/...es/mobile/src/pages/conversation-page.tsx → ...s/mobile/src/pages/conversations-page.tsx
@@ -24,7 +24,7 @@ import { CHAT_APP_ID } from '../app/constants';
 
 type ConversationProp = NativeStackScreenProps<ChatStackParamList, 'Conversation'>;
 
-const ConversationPage = ({ navigation: rootNavigation }: ConversationProp) => {
+export const ConversationsPage = ({ navigation: rootNavigation }: ConversationProp) => {
   const navigation = useNavigation<NavigationProp<AppStackParamList>>();
 
   const { data: conversations } = useConversations().all;
@@ -217,5 +217,3 @@ const styles = StyleSheet.create({
     marginTop: 4,
   },
 });
-
-export default ConversationPage;