@messenger-box/platform-mobile 10.0.3-alpha.19 → 10.0.3-alpha.22

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useCallback, useRef, useEffect } from 'react';
 import {
     Text,
     Image,
@@ -23,6 +23,7 @@ import {
 } from 'common/graphql';
 import { startCase } from 'lodash-es';
 import colors from 'tailwindcss/colors';
+import { dialogsListItemXstate, Actions, BaseState } from './workflow/dialogs-list-item-xstate';
 
 const createdAtText = (value: string) => {
     if (!value) return '';
@@ -42,8 +43,278 @@ export interface IDialogListItemProps {
     selectedChannelId?: any;
     channel?: any;
     onOpen: (id: any, title: any) => void;
+    forceRefresh?: boolean;
 }
 
+// Create a safer version of useMachine to handle potential errors
+function useSafeMachine(machine) {
+    // Define the state type
+    interface SafeStateType {
+        context: {
+            channelId: string | null;
+            currentUser: any;
+            messages: any[];
+            loading: boolean;
+            error: string | null;
+            title: string;
+            channelMembers: any[];
+            lastMessage: any;
+        };
+        value: string;
+        matches?: (stateValue: string) => boolean;
+    }
+
+    // Initialize state with default values to prevent undefined errors
+    const [state, setState] = useState<SafeStateType>({
+        context: {
+            channelId: null,
+            currentUser: null,
+            messages: [],
+            loading: false,
+            error: null,
+            title: '',
+            channelMembers: [],
+            lastMessage: null,
+        },
+        value: BaseState.Idle,
+        matches: (stateValue) => stateValue === BaseState.Idle,
+    });
+
+    // Implement a send function that updates state safely
+    const send = useCallback((event) => {
+        try {
+            // Handle specific events manually
+            if (event.type === Actions.INITIAL_CONTEXT) {
+                setState((prev) => ({
+                    ...prev,
+                    context: {
+                        ...prev.context,
+                        channelId: event.data?.channelId || null,
+                        currentUser: event.data?.currentUser || null,
+                        loading: true,
+                    },
+                    value: BaseState.FetchingMessages,
+                }));
+            } else if (event.type === Actions.UPDATE_MESSAGES) {
+                setState((prev) => {
+                    if (event.data?.messages) {
+                        // Handling bulk messages (initial load)
+                        const messages = event.data.messages;
+
+                        // If a direct last message was provided (from subscription), use it
+                        if (event.data?.directLastMessage) {
+                            console.log('Using direct last message from event:', {
+                                id: event.data.directLastMessage.id,
+                                message: event.data.directLastMessage.message?.substring(0, 20) + '...',
+                            });
+
+                            return {
+                                ...prev,
+                                context: {
+                                    ...prev.context,
+                                    messages: messages,
+                                    lastMessage: event.data.directLastMessage,
+                                    loading: false,
+                                },
+                            };
+                        }
+
+                        // Otherwise sort messages by date to find the most recent
+                        const sortedMessages = [...messages].sort(
+                            (a, b) =>
+                                new Date(b?.updatedAt || b?.createdAt).getTime() -
+                                new Date(a?.updatedAt || a?.createdAt).getTime(),
+                        );
+
+                        const newLastMessage = sortedMessages.length > 0 ? sortedMessages[0] : null;
+
+                        // Log the update for debugging
+                        if (newLastMessage) {
+                            console.log('Setting last message from bulk update:', {
+                                id: newLastMessage.id,
+                                message: newLastMessage.message?.substring(0, 20) + '...',
+                                date: newLastMessage.updatedAt || newLastMessage.createdAt,
+                            });
+                        }
+
+                        return {
+                            ...prev,
+                            context: {
+                                ...prev.context,
+                                messages: messages,
+                                lastMessage: newLastMessage,
+                                loading: false,
+                            },
+                        };
+                    } else if (event.data?.message) {
+                        // Handling single message (from subscription)
+                        const newMessage = event.data.message;
+                        const updatedMessages = [...prev.context.messages, newMessage];
+
+                        // Use the new message directly as the last message
+                        // This ensures immediate update on subscription
+                        console.log('Setting new message as lastMessage from subscription:', {
+                            id: newMessage.id,
+                            message: newMessage.message?.substring(0, 20) + '...',
+                            date: newMessage.createdAt || newMessage.updatedAt,
+                        });
+
+                        return {
+                            ...prev,
+                            context: {
+                                ...prev.context,
+                                messages: updatedMessages,
+                                lastMessage: newMessage, // Use the new message directly
+                                loading: false,
+                            },
+                        };
+                    }
+                    return prev;
+                });
+            } else if (event.type === Actions.SET_TITLE) {
+                setState((prev) => ({
+                    ...prev,
+                    context: {
+                        ...prev.context,
+                        title: event.data?.title || '',
+                    },
+                }));
+            } else if (event.type === Actions.START_LOADING) {
+                setState((prev) => ({
+                    ...prev,
+                    context: {
+                        ...prev.context,
+                        loading: true,
+                    },
+                }));
+            } else if (event.type === Actions.STOP_LOADING) {
+                setState((prev) => ({
+                    ...prev,
+                    context: {
+                        ...prev.context,
+                        loading: false,
+                    },
+                }));
+            }
+        } catch (error) {
+            console.error('Error sending event to state machine:', error);
+        }
+    }, []);
+
+    // Helper function to compute the last message from a list of messages
+    const computeLastMessage = (messages) => {
+        if (!messages || !messages.length) return null;
+
+        // Always sort by dates in descending order (newest first)
+        const sortedMessages = [...messages].sort((a, b) => {
+            const dateA = new Date(a?.updatedAt || a?.createdAt).getTime();
+            const dateB = new Date(b?.updatedAt || b?.createdAt).getTime();
+            return dateB - dateA; // Newest first
+        });
+
+        // Return the most recent message
+        const latestMsg = sortedMessages[0];
+
+        // Debug log to see if we're selecting the right message
+        if (latestMsg) {
+            console.log('Selected most recent message:', {
+                id: latestMsg.id,
+                date: latestMsg.updatedAt || latestMsg.createdAt,
+                text: latestMsg.message?.substring(0, 20) + '...',
+            });
+        }
+
+        return latestMsg;
+    };
+
+    // Add a matches function that works with the current state value
+    const stateWithMatches = useMemo(() => {
+        return {
+            ...state,
+            matches: (stateValue) => {
+                try {
+                    return state.value === stateValue;
+                } catch (error) {
+                    console.error(`Error in matches function:`, error);
+                    return false;
+                }
+            },
+        };
+    }, [state]);
+
+    // Return as a tuple to match useMachine API
+    return [stateWithMatches, send] as const;
+}
+
+// LastMessage component definition
+const LastMessageComponent = ({ subscribeToNewMessages, title, lastMessage, channelId }) => {
+    // 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 count = 30;
+    const channelTitle = title?.slice(0, count) + (title?.length > count ? '...' : '') || '';
+
+    // Define message display text
+    let displayMessage = 'No messages yet';
+
+    if (lastMessage) {
+        if (lastMessage.message && lastMessage.message.trim() !== '') {
+            // Show text message
+            displayMessage = lastMessage.message;
+        } else if (lastMessage.files?.data?.length > 0) {
+            // Show message with files
+            displayMessage = '📎 File attachment';
+        } else {
+            // Default for empty message
+            displayMessage = '(Empty message)';
+        }
+    }
+
+    // Determine the date/time to display
+    const displayDate = lastMessage?.createdAt
+        ? createdAtText(lastMessage.createdAt)
+        : lastMessage?.updatedAt
+        ? createdAtText(lastMessage.updatedAt)
+        : '';
+
+    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>
+    );
+};
+
 /**
  * TODO:
  * - Get Reservation info: reservation date, status
@@ -55,9 +326,51 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
     selectedChannelId,
     channel,
     onOpen,
+    forceRefresh,
 }) {
+    // Create a ref to track if component is mounted
+    const isMountedRef = useRef(true);
+
+    // Define parentId early to avoid linter errors
     const parentId: any = null;
-    const [messages, setMessages] = useState<any>([]);
+
+    // Use our safer custom implementation instead of the problematic useMachine
+    const [state, send] = useSafeMachine(dialogsListItemXstate);
+
+    // Define safe access functions
+    const safeContext = useCallback(() => {
+        try {
+            return state?.context || {};
+        } catch (error) {
+            console.error('Error accessing state.context:', error);
+            return {};
+        }
+    }, [state]);
+
+    const safeContextProperty = useCallback(
+        (property, defaultValue = null) => {
+            try {
+                return state?.context?.[property] ?? defaultValue;
+            } catch (error) {
+                console.error(`Error accessing state.context.${property}:`, error);
+                return defaultValue;
+            }
+        },
+        [state],
+    );
+
+    const safeSend = useCallback(
+        (event) => {
+            try {
+                send(event);
+            } catch (error) {
+                console.error('Error sending event to state machine:', error, event);
+            }
+        },
+        [send],
+    );
+
+    // Query hooks for fetching messages
     const {
         data: messagesQuery,
         loading: messageLoading,
@@ -68,14 +381,19 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
             channelId: channel?.id?.toString(),
             parentId: parentId,
             limit: 10,
-            // sort: {
-            //     key: 'updatedAt',
-            //     value: SortEnum.Desc,
-            // },
-            //limit: 25,
         },
-        fetchPolicy: 'cache-and-network',
-        refetchWritePolicy: 'merge',
+        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
+        onCompleted: (data) => {
+            console.log(
+                `Completed message query for channel ${channel?.id}:`,
+                data?.messages?.data?.length ? 'Has messages' : 'No messages',
+            );
+        },
+        onError: (error) => {
+            console.error(`Error fetching messages for channel ${channel?.id}:`, error);
+        },
     });
 
     const {
@@ -88,53 +406,241 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
         },
     });
 
-    useFocusEffect(
-        React.useCallback(() => {
-            // Do something when the screen is focused
-            refetchMessages({
+    // Initialize the state machine with context data
+    useEffect(() => {
+        if (channel?.id) {
+            safeSend({
+                type: Actions.INITIAL_CONTEXT,
+                data: { channelId: channel.id, currentUser },
+            });
+        }
+
+        // Cleanup function
+        return () => {
+            isMountedRef.current = false;
+        };
+    }, [channel?.id, currentUser, safeSend]);
+
+    // 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
+            safeSend({ type: Actions.START_LOADING });
+
+            // Set up the options for the query to force network fetch
+            const options = {
                 channelId: channel?.id?.toString(),
                 parentId: parentId,
                 limit: 10,
-                // sort: {
-                //     key: 'updatedAt',
-                //     value: SortEnum.Desc,
-                // },
-                //limit: 25
-            });
+            };
+
+            // 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,
+                            });
+                        }
+
+                        safeSend({
+                            type: Actions.UPDATE_MESSAGES,
+                            data: { messages: result.data.messages.data },
+                        });
+                    }
+                    safeSend({ type: Actions.STOP_LOADING });
+                })
+                .catch((err) => {
+                    console.error('Error refreshing dialog state:', err);
+                    safeSend({ type: Actions.STOP_LOADING });
+                });
+        }
+    }, [channel?.id, refetchMessages, safeSend, isMountedRef, parentId]);
+
+    // Track if this is the first time the component renders
+    const firstRenderRef = useRef(true);
+
+    // Track the last time we refreshed to prevent too frequent refreshes
+    const lastRefreshRef = useRef(0);
+
+    // Fix messages not refreshing when coming back from detail screen
+    useFocusEffect(
+        React.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
+            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
+            safeSend({ type: Actions.START_LOADING });
+
+            // 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 = safeContextProperty('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),
+                        });
+
+                        // Update state with fresh data
+                        safeSend({
+                            type: Actions.UPDATE_MESSAGES,
+                            data: { messages: fetchedMessages },
+                        });
+                    }
+                } catch (error) {
+                    console.error('Error refetching messages on focus:', error);
+                } finally {
+                    if (isMountedRef.current) {
+                        safeSend({ type: Actions.STOP_LOADING });
+                    }
+                }
+            };
+
+            // Execute fetch
+            fetchFreshData();
 
             return () => {
-                // Do something when the screen is unfocused
-                // Useful for cleanup functions
+                // Cleanup function when unfocused
             };
-        }, []),
+        }, [channel?.id, refetchMessages, safeSend, parentId, isMountedRef]),
     );
 
+    // Update messages in state when query data is available
     React.useEffect(() => {
-        if (messagesQuery) {
-            if (messagesQuery?.messages?.data?.length) {
-                const msg = messagesQuery?.messages?.data;
-                setMessages((pre: any[]) => [...pre, ...msg]);
+        if (messagesQuery?.messages?.data && isMountedRef.current) {
+            const messages = messagesQuery.messages.data;
+
+            // Count messages with files
+            const messagesWithFiles = messages.filter((msg) => msg?.files?.data?.length > 0);
+
+            console.log(
+                `Updating messages for channel ${channel?.id}, count:`,
+                messages.length,
+                `(${messagesWithFiles.length} with files)`,
+            );
+
+            if (messages.length > 0) {
+                // Log the first message for debugging
+                console.log('First message sample:', {
+                    id: messages[0].id,
+                    message: messages[0].message?.substring(0, 20) + '...',
+                    createdAt: messages[0].createdAt,
+                    hasFiles: messages[0]?.files?.data?.length > 0,
+                });
             }
+
+            safeSend({
+                type: Actions.UPDATE_MESSAGES,
+                data: { messages },
+            });
         }
-    }, [messagesQuery]);
+    }, [messagesQuery, safeSend, channel?.id, isMountedRef]);
 
-    const lastMessage = useMemo(() => {
-        if (!messages?.length) {
-            return null;
+    // Force a refresh on initial mount to ensure we have fresh data
+    useEffect(() => {
+        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);
+            };
         }
-        // const { data } = messagesQuery.messages;
-        const data = messages;
-        const filteredData: any = data?.filter((p: any) => p?.message !== '');
-        // return filteredData[0];
-        let filteredLastMessage =
-            filteredData && filteredData?.length
-                ? filteredData?.reduce((a, b) => {
-                      return new Date(a?.updatedAt) > new Date(b?.updatedAt) ? a : b;
-                  }, []) ?? null
-                : null;
-        return filteredLastMessage;
-        //return data[data.length - 1];
-    }, [messages]);
+    }, [channel?.id, refreshDialogState, isMountedRef]);
+
+    // 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
+            const timer = setTimeout(() => {
+                if (isMountedRef.current && refetchMessages) {
+                    // Force a full network-only fetch
+                    refetchMessages({
+                        channelId: channel?.id?.toString(),
+                        parentId: parentId,
+                        limit: 10,
+                    })
+                        .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`,
+                                );
+
+                                // Update messages in state
+                                safeSend({
+                                    type: Actions.UPDATE_MESSAGES,
+                                    data: { messages: result.data.messages.data },
+                                });
+                            }
+                        })
+                        .catch((error) => {
+                            console.error(`Error force refreshing channel ${channel?.id}:`, error);
+                        });
+                }
+            }, 50);
+
+            return () => clearTimeout(timer);
+        }
+    }, [channel?.id, forceRefresh, isMountedRef, refetchMessages, safeSend, parentId]);
 
     const channelMembers = useMemo(
         () =>
@@ -144,21 +650,49 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
         [currentUser, channel],
     );
 
-    const title = useMemo(() => {
-        const titleString =
-            channelMembers
-                ?.map((u: any) => u?.givenName + ' ' + (u?.familyName ?? ''))
-                ?.filter((mu: any) => mu)
-                ?.join(', ') ?? '';
+    // Set title in state when channel members change
+    useEffect(() => {
+        if (channelMembers && isMountedRef.current) {
+            const titleString =
+                channelMembers
+                    ?.map((u: any) => u?.givenName + ' ' + (u?.familyName ?? ''))
+                    ?.filter((mu: any) => mu)
+                    ?.join(', ') ?? '';
 
+            safeSend({
+                type: Actions.SET_TITLE,
+                data: { title: titleString },
+            });
+        }
+    }, [channelMembers, safeSend, isMountedRef]);
+
+    // Compute title with proper truncation
+    const title = useMemo(() => {
+        const titleString = safeContextProperty('title', '');
         const length = 30;
         return titleString.length > length ? titleString.substring(0, length - 3) + '...' : titleString;
-    }, [channelMembers]);
+    }, [safeContextProperty]);
+
+    // Get the last message directly from state context instead of computing it
+    const lastMessage = useMemo(() => {
+        const message = safeContextProperty('lastMessage', null);
+        // Add dependency on the messages array length to ensure re-render on new messages
+        return message;
+    }, [safeContextProperty, state.context?.messages?.length]);
+
+    // 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: safeContextProperty('messages', []).length,
+        });
+    }, [channel?.id, lastMessage, safeContextProperty]);
 
     return (
         <Pressable
-            onPress={() => channel?.id !== selectedChannelId && onOpen(channel?.id, title)}
-            className="flex-1 border-gray-200 rounded-md  dark:border-gray-600 dark:bg-gray-700"
+            onPress={() => onOpen(channel?.id, title)}
+            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">
@@ -207,22 +741,9 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
                             ))}
                     </AvatarGroup>
                 </Box>
-                <Box className="flex-1 bg-gray-400">
-                    {/* <HStack space={1} flex={1} direction={'row'} justifyContent={'center'} alignItems={'center'}>
-                        <Box flex={0.8}>
-                            <Text color="gray.600" fontSize="lg" flexWrap={'wrap'} fontWeight="semibold">
-                                {title}
-                            </Text>
-                            <Text color="gray.600" noOfLines={1}>
-                                {lastMessage?.message ?? ''}
-                            </Text>
-                        </Box>
-
-                        <Box flex={0.2}>
-                            <Text color="gray.500">{lastMessage ? createdAtText(lastMessage?.createdAt) : ''}</Text>
-                        </Box>
-                    </HStack> */}
+                <Box className="flex-1">
                     <LastMessageComponent
+                        key={`last-msg-${lastMessage?.id || 'none'}-${safeContextProperty('messages', []).length}`}
                         title={title}
                         lastMessage={lastMessage}
                         channelId={channel?.id}
@@ -235,6 +756,42 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
                                 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,
+                                    });
+
+                                    // Force message update (double approach to ensure it updates)
+                                    if (isMountedRef.current) {
+                                        // Update through state machine directly
+                                        console.log('Updating messages with new subscription message');
+
+                                        // First, update the messages array with the new message
+                                        const currentMessages = safeContextProperty('messages', []);
+                                        const updatedMessages = [...currentMessages, newMessage];
+
+                                        // Then directly set the new message as the last message
+                                        // This ensures the UI updates immediately
+                                        safeSend({
+                                            type: Actions.UPDATE_MESSAGES,
+                                            data: {
+                                                messages: updatedMessages,
+                                                // Directly set this message as the last message
+                                                directLastMessage: newMessage,
+                                            },
+                                        });
+
+                                        // No need for additional refresh - the direct update is enough
+                                        // This prevents unnecessary network requests and UI flicker
+                                    }
+
+                                    // Update the Apollo cache
                                     const existingMessages: any = prev?.messages;
                                     const previousData = existingMessages?.data
                                         ? [...existingMessages.data, newMessage]
@@ -253,50 +810,10 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
                             })
                         }
                     />
-                    {/* <Text
-                        flex={1}
-                        color="gray.600"
-                        p={0}
-                        m={0}
-                        w={'100%'}
-                        justifyContent={''}
-                        fontSize="lg"
-                        fontWeight="semibold"
-                    >
-                        {title}
-                    </Text> */}
-                    {/* <Text flex={0.1} color="gray.600">
-                        {lastMessage?.message ?? ''}
-                    </Text> */}
                 </Box>
-                {/* <Text flex={0.2} color="gray.500">
-                    {lastMessage ? createdAtText(lastMessage?.createdAt) : ''}
-                </Text> */}
             </HStack>
         </Pressable>
     );
 };
 
-const LastMessageComponent = ({ subscribeToNewMessages, title, lastMessage, channelId }) => {
-    React.useEffect(() => subscribeToNewMessages(), [channelId]);
-    const count = 30;
-    const channelTitle = title.slice(0, count) + (title.length > count ? '...' : '');
-    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}>
-                    {lastMessage?.message ?? ''}
-                </Text>
-            </Box>
-
-            <Box className="flex-[0.2]">
-                <Text color={colors.gray[500]}>{lastMessage ? createdAtText(lastMessage?.createdAt) : ''}</Text>
-            </Box>
-        </HStack>
-    );
-};
-
 export const DialogsListItem = React.memo(DialogsListItemComponent);