@messenger-box/platform-mobile 10.0.3-alpha.40 → 10.0.3-alpha.46

package/src/screens/inbox/components/DialogsListItem.tsx

@@ -16,13 +16,13 @@ import { format, isToday, isYesterday } from 'date-fns';
 import { useFocusEffect } from '@react-navigation/native';
 import { IChannel, SortEnum, IUserAccount } from 'common';
 import {
-    useMessagesQuery,
-    useOnChatMessageAddedSubscription,
-    OnChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
-    useUserAccountQuery,
-} from 'common/graphql';
+    CHAT_MESSAGE_ADDED,
+    useChatMessageAddedSubscription,
+    useMessagesQuery as useMessagesQueryFromInbox,
+} from '../../../queries/inboxQueries';
 import { startCase } from 'lodash-es';
 import colors from 'tailwindcss/colors';
+import { SubscriptionHandler } from './SubscriptionHandler';
 
 const createdAtText = (value: string) => {
     if (!value) return '';
@@ -43,10 +43,11 @@ export interface IDialogListItemProps {
     channel?: any;
     onOpen: (id: any, title: any) => void;
     forceRefresh?: boolean;
+    visible?: boolean;
 }
 
 // LastMessage component definition
-const LastMessageComponent = ({ subscribeToNewMessages, title, lastMessage, channelId }) => {
+const LastMessageComponent = ({ subscribeToNewMessages, title, lastMessage, channelId, subscribeToMore }) => {
     // Subscribe to new messages when component mounts
     React.useEffect(() => {
         // Subscribe and store the unsubscribe function
@@ -97,20 +98,28 @@ const LastMessageComponent = ({ subscribeToNewMessages, title, lastMessage, chan
         : '';
 
     return (
-        <HStack space={'sm'} className="flex-1 justify-between">
-            <Box className="flex-[0.8]">
-                <Text color={colors.gray[600]} className="text-base text-wrap flex-wrap font-semibold">
-                    {channelTitle}
-                </Text>
-                <Text color={colors.gray[600]} numberOfLines={1}>
-                    {displayMessage}
-                </Text>
-            </Box>
-
-            <Box className="flex-[0.2]">
-                <Text color={colors.gray[500]}>{displayDate}</Text>
-            </Box>
-        </HStack>
+        <>
+            <SubscriptionHandler
+                subscribeToMore={subscribeToMore}
+                document={CHAT_MESSAGE_ADDED}
+                variables={{ channelId: channelId?.toString() }}
+                updateQuery={undefined} // Provide custom updateQuery if needed
+            />
+            <HStack space={'sm'} className="flex-1 justify-between">
+                <Box className="flex-[0.8]">
+                    <Text color={colors.gray[600]} className="text-base text-wrap flex-wrap font-semibold">
+                        {channelTitle}
+                    </Text>
+                    <Text color={colors.gray[600]} numberOfLines={1}>
+                        {displayMessage}
+                    </Text>
+                </Box>
+
+                <Box className="flex-[0.2]">
+                    <Text color={colors.gray[500]}>{displayDate}</Text>
+                </Box>
+            </HStack>
+        </>
     );
 };
 
@@ -126,6 +135,7 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
     channel,
     onOpen,
     forceRefresh,
+    visible = true,
 }) {
     // Create a ref to track if component is mounted
     const isMountedRef = useRef(true);
@@ -139,55 +149,51 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
     const [messages, setMessages] = useState([]);
     const [lastMessage, setLastMessage] = useState(null);
 
-    // Query hooks for fetching messages
+    // Only run queries/subscriptions if visible
+    const shouldQuery = !!channel?.id && visible;
+
+    // Query hooks for fetching messages (minimal fields if possible)
     const {
         data: messagesQuery,
         loading: messageLoading,
         refetch: refetchMessages,
         subscribeToMore,
-    } = useMessagesQuery({
+    } = useMessagesQueryFromInbox({
         variables: {
             channelId: channel?.id?.toString(),
             parentId: parentId,
             limit: 10,
         },
-        fetchPolicy: 'cache-and-network', // Use cache first, then network
-        refetchWritePolicy: 'overwrite', // Ensure refetches overwrite existing data
-        nextFetchPolicy: 'network-only', // Force subsequent fetches to use network
+        skip: !shouldQuery, // Only run if visible
+        fetchPolicy: 'cache-and-network',
+        refetchWritePolicy: 'overwrite',
+        nextFetchPolicy: 'network-only',
         onCompleted: (data) => {
-            console.log(
-                `Completed message query for channel ${channel?.id}:`,
-                data?.messages?.data?.length ? 'Has messages' : 'No messages',
-            );
-
+            if (!shouldQuery) return;
             if (data?.messages?.data) {
                 setMessages(data.messages.data);
-
-                // Find the newest message
                 const sortedMessages = [...data.messages.data].sort(
                     (a, b) =>
                         new Date(b?.updatedAt || b?.createdAt).getTime() -
                         new Date(a?.updatedAt || a?.createdAt).getTime(),
                 );
-
                 if (sortedMessages.length > 0) {
                     setLastMessage(sortedMessages[0]);
                 }
             }
         },
         onError: (error) => {
+            if (!shouldQuery) return;
             console.error(`Error fetching messages for channel ${channel?.id}:`, error);
         },
     });
 
-    const {
-        data: newMessage,
-        loading: newMsgLoading,
-        error: newMsgError,
-    }: any = useOnChatMessageAddedSubscription({
+    // Subscription for new messages (only if visible)
+    const { data: newMessage } = useChatMessageAddedSubscription({
         variables: {
             channelId: channel?.id?.toString(),
         },
+        skip: !shouldQuery,
     });
 
     // Set mounted state on mount/unmount
@@ -200,44 +206,22 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
 
     // Function to force refresh the component state
     const refreshDialogState = useCallback(() => {
-        if (channel?.id && isMountedRef.current) {
-            console.log('Forcing dialog state refresh for channel:', channel?.id);
-            // First ensure we're in a loading state to trigger UI updates
+        if (shouldQuery && isMountedRef.current) {
             setLoading(true);
-
-            // Set up the options for the query to force network fetch
             const options = {
                 channelId: channel?.id?.toString(),
                 parentId: parentId,
                 limit: 10,
             };
-
-            // Refetch messages from server
             refetchMessages(options)
                 .then((result) => {
-                    // Update the state with fresh data
                     if (result.data?.messages?.data && isMountedRef.current) {
-                        console.log(
-                            `Refreshed ${result.data.messages.data.length} messages for channel ${channel?.id}`,
-                        );
-
-                        // Get the most recent message for debug comparison
                         const sortedMessages = [...result.data.messages.data].sort(
                             (a, b) =>
                                 new Date(b?.updatedAt || b?.createdAt).getTime() -
                                 new Date(a?.updatedAt || a?.createdAt).getTime(),
                         );
-
                         const latestMessage = sortedMessages.length > 0 ? sortedMessages[0] : null;
-
-                        if (latestMessage) {
-                            console.log('Latest message after refresh:', {
-                                id: latestMessage.id,
-                                message: latestMessage.message?.substring(0, 20) + '...',
-                                date: latestMessage.createdAt || latestMessage.updatedAt,
-                            });
-                        }
-
                         setMessages(result.data.messages.data);
                         setLastMessage(latestMessage);
                     }
@@ -248,7 +232,7 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
                     setLoading(false);
                 });
         }
-    }, [channel?.id, refetchMessages, isMountedRef, parentId]);
+    }, [shouldQuery, channel?.id, refetchMessages, parentId]);
 
     // Track if this is the first time the component renders
     const firstRenderRef = useRef(true);
@@ -337,31 +321,25 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
         }, [channel?.id, refetchMessages, messages, isMountedRef, parentId]),
     );
 
-    // Force a refresh on initial mount to ensure we have fresh data
+    // Only run effects if visible
     useEffect(() => {
+        if (!shouldQuery) return;
         if (channel?.id && isMountedRef.current) {
             const timer = setTimeout(() => {
                 if (isMountedRef.current) {
-                    console.log('Initial data refresh for channel:', channel.id);
                     refreshDialogState();
                 }
             }, 100);
-
             return () => {
                 clearTimeout(timer);
             };
         }
-    }, [channel?.id, refreshDialogState, isMountedRef]);
+    }, [shouldQuery, channel?.id, refreshDialogState]);
 
-    // Use forceRefresh prop to trigger immediate refresh
     useEffect(() => {
-        if (forceRefresh && channel?.id && isMountedRef.current) {
-            console.log(`Force refreshing messages for channel ${channel?.id} due to forceRefresh prop`);
-
-            // Set a very slight delay to ensure component is fully mounted
+        if (forceRefresh && shouldQuery && channel?.id && isMountedRef.current) {
             const timer = setTimeout(() => {
                 if (isMountedRef.current && refetchMessages) {
-                    // Force a full network-only fetch
                     refetchMessages({
                         channelId: channel?.id?.toString(),
                         parentId: parentId,
@@ -369,20 +347,12 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
                     })
                         .then((result) => {
                             if (result?.data?.messages?.data && isMountedRef.current) {
-                                console.log(
-                                    `Force refresh completed for channel ${channel?.id} with ${result.data.messages.data.length} messages`,
-                                );
-
-                                // Get the most recent message
                                 const sortedMessages = [...result.data.messages.data].sort(
                                     (a, b) =>
                                         new Date(b?.updatedAt || b?.createdAt).getTime() -
                                         new Date(a?.updatedAt || a?.createdAt).getTime(),
                                 );
-
                                 const latestMessage = sortedMessages.length > 0 ? sortedMessages[0] : null;
-
-                                // Update state with fresh data
                                 setMessages(result.data.messages.data);
                                 setLastMessage(latestMessage);
                             }
@@ -392,10 +362,9 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
                         });
                 }
             }, 50);
-
             return () => clearTimeout(timer);
         }
-    }, [channel?.id, forceRefresh, isMountedRef, refetchMessages, parentId]);
+    }, [shouldQuery, channel?.id, forceRefresh, refetchMessages, parentId]);
 
     const channelMembers = useMemo(
         () =>
@@ -413,10 +382,9 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
                     ?.map((u: any) => u?.givenName + ' ' + (u?.familyName ?? ''))
                     ?.filter((mu: any) => mu)
                     ?.join(', ') ?? '';
-
             setTitle(titleString);
         }
-    }, [channelMembers, isMountedRef]);
+    }, [channelMembers]);
 
     // Compute title with proper truncation
     const displayTitle = useMemo(() => {
@@ -435,41 +403,27 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
 
     // Handle new messages from subscription
     useEffect(() => {
+        if (!shouldQuery) return;
         if (newMessage?.chatMessageAdded && channel?.id) {
             const incomingMessage = newMessage.chatMessageAdded;
-
-            // Check if we already have this message
             if (messages.some((msg) => msg.id === incomingMessage.id)) {
-                console.log('Message already in local state, skipping update:', incomingMessage.id);
                 return;
             }
-
-            console.log('New message received from subscription:', {
-                channelId: channel.id,
-                messageId: incomingMessage.id,
-                message: incomingMessage.message?.substring(0, 20) + '...',
-                timestamp: incomingMessage.createdAt,
-            });
-
-            // Update messages and last message state
             setMessages((prevMessages) => [...prevMessages, incomingMessage]);
             setLastMessage(incomingMessage);
         }
-    }, [newMessage, channel?.id, messages]);
+    }, [shouldQuery, newMessage, channel?.id, messages]);
 
     // Create listener for channel property updates
     useEffect(() => {
-        // Check if channel has a lastMessage property (set by parent Dialogs component)
+        if (!shouldQuery) return;
         if (channel?.lastMessage && channel.lastMessage.id) {
-            console.log('Channel has lastMessage property:', channel.lastMessage.id);
-
-            // Check if we already have this message
             if (!messages.some((msg) => msg.id === channel.lastMessage.id)) {
                 setMessages((prevMessages) => [...prevMessages, channel.lastMessage]);
                 setLastMessage(channel.lastMessage);
             }
         }
-    }, [channel?.lastMessage?.id, messages]);
+    }, [shouldQuery, channel?.lastMessage?.id, messages]);
 
     return (
         <Pressable
@@ -491,7 +445,6 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
                                     }] z-[${i == 1 ? 5 : 1}]`}
                                 >
                                     <AvatarFallbackText>{startCase(ch?.username?.charAt(0))}</AvatarFallbackText>
-
                                     {channelMembers?.length > 1 && (
                                         <AvatarBadge
                                             style={{
@@ -530,52 +483,40 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
                         lastMessage={lastMessage}
                         channelId={channel?.id}
                         subscribeToNewMessages={() =>
-                            subscribeToMore({
-                                document: CHAT_MESSAGE_ADDED,
-                                variables: {
-                                    channelId: channel.id?.toString(),
-                                },
-                                updateQuery: (prev, { subscriptionData }: any) => {
-                                    if (!subscriptionData.data) return prev;
-                                    const newMessage: any = subscriptionData?.data?.chatMessageAdded;
-
-                                    // Add debug info for the new message
-                                    // console.log('New message added (subscription):', {
-                                    //     channelId: channel.id,
-                                    //     messageId: newMessage.id,
-                                    //     message: newMessage.message?.substring(0, 20) + '...',
-                                    //     hasFiles: newMessage?.files?.data?.length > 0,
-                                    //     filesCount: newMessage?.files?.data?.length || 0,
-                                    //     timestamp: newMessage.createdAt || newMessage.updatedAt,
-                                    // });
-
-                                    // Direct optimistic update through local state
-                                    if (isMountedRef.current) {
-                                        // Update messages array with the new message if it doesn't exist
-                                        if (!messages.some((msg) => msg.id === newMessage.id)) {
-                                            setMessages((prevMessages) => [...prevMessages, newMessage]);
-                                            setLastMessage(newMessage);
-                                        }
-                                    }
-
-                                    // Update the Apollo cache
-                                    const existingMessages: any = prev?.messages;
-                                    const previousData = existingMessages?.data
-                                        ? [...existingMessages.data, newMessage]
-                                        : [];
-                                    const totalMsgCount = existingMessages?.totalCount + 1;
-                                    const merged = {
-                                        ...prev,
-                                        messages: {
-                                            ...existingMessages,
-                                            data: previousData,
-                                            totalCount: totalMsgCount,
-                                        },
-                                    };
-                                    return merged;
-                                },
-                            })
+                            shouldQuery
+                                ? subscribeToMore({
+                                      document: CHAT_MESSAGE_ADDED,
+                                      variables: {
+                                          channelId: channel.id?.toString(),
+                                      },
+                                      updateQuery: (prev, { subscriptionData }: any) => {
+                                          if (!subscriptionData.data) return prev;
+                                          const newMessage: any = subscriptionData?.data?.chatMessageAdded;
+                                          if (isMountedRef.current) {
+                                              if (!messages.some((msg) => msg.id === newMessage.id)) {
+                                                  setMessages((prevMessages) => [...prevMessages, newMessage]);
+                                                  setLastMessage(newMessage);
+                                              }
+                                          }
+                                          const existingMessages: any = prev?.messages;
+                                          const previousData = existingMessages?.data
+                                              ? [...existingMessages.data, newMessage]
+                                              : [];
+                                          const totalMsgCount = existingMessages?.totalCount + 1;
+                                          const merged = {
+                                              ...prev,
+                                              messages: {
+                                                  ...existingMessages,
+                                                  data: previousData,
+                                                  totalCount: totalMsgCount,
+                                              },
+                                          };
+                                          return merged;
+                                      },
+                                  })
+                                : undefined
                         }
+                        subscribeToMore={subscribeToMore}
                     />
                 </Box>
             </HStack>