@messenger-box/platform-mobile 10.0.3-alpha.47 → 10.0.3-alpha.48

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

@@ -15,11 +15,7 @@ import {
 import { format, isToday, isYesterday } from 'date-fns';
 import { useFocusEffect } from '@react-navigation/native';
 import { IChannel, SortEnum, IUserAccount } from 'common';
-import {
-    CHAT_MESSAGE_ADDED,
-    useChatMessageAddedSubscription,
-    useMessagesQuery as useMessagesQueryFromInbox,
-} from '../../../queries/inboxQueries';
+import { CHAT_MESSAGE_ADDED, useMessagesQuery as useMessagesQueryFromInbox } from '../../../queries/inboxQueries';
 import { startCase } from 'lodash-es';
 import colors from 'tailwindcss/colors';
 import { SubscriptionHandler } from './SubscriptionHandler';
@@ -47,30 +43,7 @@ export interface IDialogListItemProps {
 }
 
 // LastMessage component definition
-const LastMessageComponent = ({ subscribeToNewMessages, title, lastMessage, channelId, subscribeToMore }) => {
-    // Subscribe to new messages when component mounts
-    React.useEffect(() => {
-        // Subscribe and store the unsubscribe function
-        const unsubscribe = subscribeToNewMessages();
-        return () => {
-            // Cleanup subscription on unmount
-            if (unsubscribe && typeof unsubscribe === 'function') {
-                unsubscribe();
-            }
-        };
-    }, [channelId, subscribeToNewMessages]);
-
-    // Debug output for component rendering
-    // React.useEffect(() => {
-    //     console.log(`LastMessageComponent rendered for channel ${channelId}:`, {
-    //         hasLastMessage: !!lastMessage,
-    //         messageId: lastMessage?.id,
-    //         messageText: lastMessage?.message?.substring(0, 20) + (lastMessage?.message?.length > 20 ? '...' : ''),
-    //         date: lastMessage?.createdAt ? new Date(lastMessage.createdAt).toISOString() : 'none',
-    //         hasFiles: lastMessage?.files?.data?.length > 0,
-    //     });
-    // }, [lastMessage, channelId]);
-
+const LastMessageComponent = ({ title, lastMessage }) => {
     const count = 30;
     const channelTitle = title?.slice(0, count) + (title?.length > count ? '...' : '') || '';
 
@@ -98,28 +71,20 @@ const LastMessageComponent = ({ subscribeToNewMessages, title, lastMessage, chan
         : '';
 
     return (
-        <>
-            <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>
-        </>
+        <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>
     );
 };
 
@@ -130,7 +95,6 @@ const LastMessageComponent = ({ subscribeToNewMessages, title, lastMessage, chan
  */
 export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function DialogsListItem({
     currentUser,
-    // users,
     selectedChannelId,
     channel,
     onOpen,
@@ -143,58 +107,91 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
     // Define parentId early to avoid linter errors
     const parentId: any = null;
 
-    // State for component data
+    // Simplified state - only keep loading state, rely on Apollo cache for data
     const [loading, setLoading] = useState(false);
     const [title, setTitle] = useState('');
-    const [messages, setMessages] = useState([]);
-    const [lastMessage, setLastMessage] = useState(null);
 
     // Only run queries/subscriptions if visible
     const shouldQuery = !!channel?.id && visible;
 
-    // Query hooks for fetching messages (minimal fields if possible)
+    // Memoize query variables to prevent unnecessary re-renders
+    const queryVariables = useMemo(
+        () => ({
+            channelId: channel?.id?.toString(),
+            parentId: parentId,
+            limit: 10,
+        }),
+        [channel?.id, parentId],
+    );
+
+    // Optimized message processing function
+    const processMessagesData = useCallback((messagesData: any[]) => {
+        if (!messagesData?.length) return null;
+
+        // Sort messages and return the latest one
+        const sortedMessages = [...messagesData].sort(
+            (a, b) =>
+                new Date(b?.updatedAt || b?.createdAt).getTime() - new Date(a?.updatedAt || a?.createdAt).getTime(),
+        );
+
+        return sortedMessages[0];
+    }, []);
+
+    // Optimized refetch function - consolidated all refetch logic
+    const optimizedRefetch = useCallback(
+        async (reason: string = 'manual') => {
+            if (!shouldQuery || !channel?.id || !isMountedRef.current) return null;
+
+            console.log(`Optimized refetch triggered: ${reason} for channel ${channel?.id}`);
+            setLoading(true);
+
+            try {
+                const result = await refetchMessages(queryVariables);
+                console.log(
+                    `Refetch completed: ${reason}, messages count: ${result?.data?.messages?.data?.length || 0}`,
+                );
+                return result;
+            } catch (error) {
+                console.error(`Refetch error (${reason}):`, error);
+                return null;
+            } finally {
+                if (isMountedRef.current) {
+                    setLoading(false);
+                }
+            }
+        },
+        [shouldQuery, channel?.id, queryVariables],
+    );
+
+    // Query hooks for fetching messages - optimized configuration
     const {
         data: messagesQuery,
         loading: messageLoading,
         refetch: refetchMessages,
         subscribeToMore,
+        error,
     } = useMessagesQueryFromInbox({
-        variables: {
-            channelId: channel?.id?.toString(),
-            parentId: parentId,
-            limit: 10,
-        },
-        skip: !shouldQuery, // Only run if visible
-        fetchPolicy: 'cache-and-network',
-        refetchWritePolicy: 'overwrite',
-        nextFetchPolicy: 'network-only',
+        variables: queryVariables,
+        skip: !shouldQuery,
+        fetchPolicy: 'cache-first', // Changed from cache-and-network for better performance
+        nextFetchPolicy: 'cache-first',
+        notifyOnNetworkStatusChange: true,
+        errorPolicy: 'all', // Handle partial errors gracefully
         onCompleted: (data) => {
-            if (!shouldQuery) return;
-            if (data?.messages?.data) {
-                setMessages(data.messages.data);
-                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]);
-                }
-            }
+            // Simplified onCompleted - minimal processing
+            if (!shouldQuery || !data?.messages?.data) return;
+
+            console.log(`Query completed for channel ${channel?.id}, messages: ${data.messages.data.length}`);
         },
         onError: (error) => {
             if (!shouldQuery) return;
-            console.error(`Error fetching messages for channel ${channel?.id}:`, error);
+            console.error(`Query error for channel ${channel?.id}:`, error);
         },
     });
 
-    // Subscription for new messages (only if visible)
-    const { data: newMessage } = useChatMessageAddedSubscription({
-        variables: {
-            channelId: channel?.id?.toString(),
-        },
-        skip: !shouldQuery,
-    });
+    // Derived state from query data - use Apollo cache as single source of truth
+    const messages = useMemo(() => messagesQuery?.messages?.data || [], [messagesQuery]);
+    const lastMessage = useMemo(() => processMessagesData(messages), [messages, processMessagesData]);
 
     // Set mounted state on mount/unmount
     useEffect(() => {
@@ -204,184 +201,56 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
         };
     }, []);
 
-    // Function to force refresh the component state
-    const refreshDialogState = useCallback(() => {
-        if (shouldQuery && isMountedRef.current) {
-            setLoading(true);
-            const options = {
-                channelId: channel?.id?.toString(),
-                parentId: parentId,
-                limit: 10,
-            };
-            refetchMessages(options)
-                .then((result) => {
-                    if (result.data?.messages?.data && isMountedRef.current) {
-                        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;
-                        setMessages(result.data.messages.data);
-                        setLastMessage(latestMessage);
-                    }
-                    setLoading(false);
-                })
-                .catch((err) => {
-                    console.error('Error refreshing dialog state:', err);
-                    setLoading(false);
-                });
-        }
-    }, [shouldQuery, channel?.id, refetchMessages, parentId]);
-
-    // Track if this is the first time the component renders
+    // Optimized focus effect - single refetch with debouncing
     const firstRenderRef = useRef(true);
-
-    // Fix messages not refreshing when coming back from detail screen
     useFocusEffect(
-        React.useCallback(() => {
+        useCallback(() => {
             if (!channel?.id) return;
 
             console.log('DialogsListItem focused for channel:', channel?.id);
 
-            // Skip refresh on first render as it's handled by other effects
+            // Skip refresh on first render
             if (firstRenderRef.current) {
-                console.log('Skipping initial focus refresh for channel:', channel?.id);
                 firstRenderRef.current = false;
                 return;
             }
 
-            // Always force a refetch when coming back to this screen
-            console.log('FOCUS EFFECT: Force refetching messages on navigation back for channel:', channel?.id);
-
-            // Show loading state
-            setLoading(true);
-
-            // Use a direct refetch with network-only policy to force fresh data
-            const fetchFreshData = async () => {
-                try {
-                    // Set up the options for the query to force network fetch
-                    const options = {
-                        channelId: channel?.id?.toString(),
-                        parentId: parentId,
-                        limit: 10,
-                    };
-
-                    // Force a network-only fetch by using refetch without extra options
-                    // Apollo will use the parent query's fetch policy which we've set to network-only
-                    const result = await refetchMessages(options);
-
-                    // Log the refreshed data
-                    console.log(
-                        `FOCUS EFFECT: Refetched ${result?.data?.messages?.data?.length || 0} messages for channel ${
-                            channel?.id
-                        }`,
-                    );
-
-                    if (result?.data?.messages?.data && isMountedRef.current) {
-                        // Compare with current state to check if we're getting fresh data
-                        const currentMessages = messages;
-                        const fetchedMessages = result.data.messages.data;
-
-                        // Log comparison to see if we got new data
-                        console.log('Data comparison:', {
-                            currentCount: currentMessages.length,
-                            fetchedCount: fetchedMessages.length,
-                            isDifferent: JSON.stringify(currentMessages) !== JSON.stringify(fetchedMessages),
-                        });
-
-                        // Get the most recent message
-                        const sortedMessages = [...fetchedMessages].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(fetchedMessages);
-                        setLastMessage(latestMessage);
-                    }
-                } catch (error) {
-                    console.error('Error refetching messages on focus:', error);
-                } finally {
-                    if (isMountedRef.current) {
-                        setLoading(false);
-                    }
-                }
-            };
-
-            // Execute fetch
-            fetchFreshData();
+            // Debounced refetch on focus
+            const timeoutId = setTimeout(() => {
+                optimizedRefetch('focus');
+            }, 100);
 
-            return () => {
-                // Cleanup function when unfocused
-            };
-        }, [channel?.id, refetchMessages, messages, isMountedRef, parentId]),
+            return () => clearTimeout(timeoutId);
+        }, [channel?.id, optimizedRefetch]),
     );
 
-    // Only run effects if visible
-    useEffect(() => {
-        if (!shouldQuery) return;
-        if (channel?.id && isMountedRef.current) {
-            const timer = setTimeout(() => {
-                if (isMountedRef.current) {
-                    refreshDialogState();
-                }
-            }, 100);
-            return () => {
-                clearTimeout(timer);
-            };
-        }
-    }, [shouldQuery, channel?.id, refreshDialogState]);
-
+    // Simplified effect for force refresh
     useEffect(() => {
-        if (forceRefresh && shouldQuery && channel?.id && isMountedRef.current) {
-            const timer = setTimeout(() => {
-                if (isMountedRef.current && refetchMessages) {
-                    refetchMessages({
-                        channelId: channel?.id?.toString(),
-                        parentId: parentId,
-                        limit: 10,
-                    })
-                        .then((result) => {
-                            if (result?.data?.messages?.data && isMountedRef.current) {
-                                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;
-                                setMessages(result.data.messages.data);
-                                setLastMessage(latestMessage);
-                            }
-                        })
-                        .catch((error) => {
-                            console.error(`Error force refreshing channel ${channel?.id}:`, error);
-                        });
-                }
+        if (forceRefresh && shouldQuery) {
+            const timeoutId = setTimeout(() => {
+                optimizedRefetch('force');
             }, 50);
-            return () => clearTimeout(timer);
+            return () => clearTimeout(timeoutId);
         }
-    }, [shouldQuery, channel?.id, forceRefresh, refetchMessages, parentId]);
+    }, [forceRefresh, shouldQuery, optimizedRefetch]);
 
+    // Channel members computation - optimized with better memoization
     const channelMembers = useMemo(
         () =>
             channel?.members
-                ?.filter((ch: any) => ch?.user?.id != currentUser?.id && ch?.user?.__typename == 'UserAccount')
-                ?.map((m: any) => m?.user) ?? null,
-        [currentUser, channel],
+                ?.filter((ch: any) => ch?.user?.id !== currentUser?.id && ch?.user?.__typename === 'UserAccount')
+                ?.map((m: any) => m?.user) ?? [],
+        [currentUser?.id, channel?.members],
     );
 
     // Set title when channel members change
     useEffect(() => {
-        if (channelMembers && isMountedRef.current) {
+        if (channelMembers.length > 0 && isMountedRef.current) {
             const titleString =
                 channelMembers
-                    ?.map((u: any) => u?.givenName + ' ' + (u?.familyName ?? ''))
-                    ?.filter((mu: any) => mu)
-                    ?.join(', ') ?? '';
+                    ?.map((u: any) => `${u?.givenName || ''} ${u?.familyName || ''}`.trim())
+                    ?.filter(Boolean)
+                    ?.join(', ') || '';
             setTitle(titleString);
         }
     }, [channelMembers]);
@@ -392,38 +261,8 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
         return title.length > length ? title.substring(0, length - 3) + '...' : title;
     }, [title]);
 
-    // Debug output for the component
-    useEffect(() => {
-        console.log(`DialogsListItem for channel ${channel?.id}: `, {
-            hasLastMessage: !!lastMessage,
-            message: lastMessage?.message?.substring(0, 20) + (lastMessage?.message?.length > 20 ? '...' : ''),
-            messagesCount: messages.length,
-        });
-    }, [channel?.id, lastMessage, messages.length]);
-
-    // Handle new messages from subscription
-    useEffect(() => {
-        if (!shouldQuery) return;
-        if (newMessage?.chatMessageAdded && channel?.id) {
-            const incomingMessage = newMessage.chatMessageAdded;
-            if (messages.some((msg) => msg.id === incomingMessage.id)) {
-                return;
-            }
-            setMessages((prevMessages) => [...prevMessages, incomingMessage]);
-            setLastMessage(incomingMessage);
-        }
-    }, [shouldQuery, newMessage, channel?.id, messages]);
-
-    // Create listener for channel property updates
-    useEffect(() => {
-        if (!shouldQuery) return;
-        if (channel?.lastMessage && channel.lastMessage.id) {
-            if (!messages.some((msg) => msg.id === channel.lastMessage.id)) {
-                setMessages((prevMessages) => [...prevMessages, channel.lastMessage]);
-                setLastMessage(channel.lastMessage);
-            }
-        }
-    }, [shouldQuery, channel?.lastMessage?.id, messages]);
+    // Combined loading state
+    const isLoading = loading || messageLoading;
 
     return (
         <Pressable
@@ -431,7 +270,39 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
             className="flex-1 border-gray-200 rounded-md dark:border-gray-600 dark:bg-gray-700"
             style={{ borderBottomWidth: 1, borderColor: '#e5e7eb', marginVertical: 0, paddingHorizontal: 10 }}
         >
-            <HStack space={'md'} className="flex-1 w-[100%]  py-3  items-center">
+            {/* Optimized subscription handler */}
+            <SubscriptionHandler
+                subscribeToMore={subscribeToMore}
+                document={CHAT_MESSAGE_ADDED}
+                variables={{ channelId: channel?.id?.toString() }}
+                enabled={shouldQuery}
+                updateQuery={(prev, { subscriptionData }) => {
+                    if (!subscriptionData?.data?.chatMessageAdded || !isMountedRef.current) return prev;
+
+                    const newMessage = subscriptionData.data.chatMessageAdded;
+
+                    // Optimized cache update - check for duplicates more efficiently
+                    const existingMessages = prev?.messages;
+                    const messageExists = existingMessages?.data?.some((msg: any) => msg.id === newMessage.id);
+
+                    if (!messageExists) {
+                        return {
+                            ...prev,
+                            messages: {
+                                ...existingMessages,
+                                data: [...(existingMessages?.data || []), newMessage],
+                                totalCount: (existingMessages?.totalCount || 0) + 1,
+                            },
+                        };
+                    }
+                    return prev;
+                }}
+                onError={(error) => {
+                    console.error(`Subscription error for channel ${channel?.id}:`, error);
+                }}
+            />
+
+            <HStack space={'md'} className="flex-1 w-[100%] py-3 items-center">
                 <Box className="flex-[0.1] items-start pl-3">
                     <AvatarGroup>
                         {channelMembers &&
@@ -481,42 +352,6 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
                         key={`last-msg-${lastMessage?.id || 'none'}-${messages.length}`}
                         title={displayTitle}
                         lastMessage={lastMessage}
-                        channelId={channel?.id}
-                        subscribeToNewMessages={() =>
-                            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>