@messenger-box/platform-mobile 10.0.3-alpha.20 → 10.0.3-alpha.201

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

@@ -1,819 +0,0 @@
-import React, { useMemo, useState, useCallback, useRef, useEffect } from 'react';
-import {
-    Text,
-    Image,
-    Pressable,
-    HStack,
-    Box,
-    AvatarGroup,
-    Avatar,
-    AvatarFallbackText,
-    AvatarImage,
-    AvatarBadge,
-    View,
-} from '@admin-layout/gluestack-ui-mobile';
-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';
-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 '';
-    let date = new Date(value);
-    if (isToday(date)) return 'Today';
-    if (isYesterday(date)) return 'Yesterday';
-    return format(new Date(value), 'MMM dd, yyyy');
-};
-
-export interface IDialogListChannel extends IChannel {
-    users: IUserAccount[];
-}
-
-export interface IDialogListItemProps {
-    currentUser?: any;
-    users?: any;
-    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
- * - Add ability to get property information: name, logo
- */
-export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function DialogsListItem({
-    currentUser,
-    // users,
-    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;
-
-    // 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,
-        refetch: refetchMessages,
-        subscribeToMore,
-    } = useMessagesQuery({
-        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
-        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 {
-        data: newMessage,
-        loading: newMsgLoading,
-        error: newMsgError,
-    }: any = useOnChatMessageAddedSubscription({
-        variables: {
-            channelId: channel?.id?.toString(),
-        },
-    });
-
-    // 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,
-            };
-
-            // 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 () => {
-                // Cleanup function when unfocused
-            };
-        }, [channel?.id, refetchMessages, safeSend, parentId, isMountedRef]),
-    );
-
-    // Update messages in state when query data is available
-    React.useEffect(() => {
-        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, safeSend, channel?.id, isMountedRef]);
-
-    // 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);
-            };
-        }
-    }, [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(
-        () =>
-            channel?.members
-                ?.filter((ch: any) => ch?.user?.id != currentUser?.id && ch?.user?.__typename == 'UserAccount')
-                ?.map((m: any) => m?.user) ?? null,
-        [currentUser, channel],
-    );
-
-    // 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;
-    }, [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={() => 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">
-                <Box className="flex-[0.1] items-start pl-3">
-                    <AvatarGroup>
-                        {channelMembers &&
-                            channelMembers?.length > 0 &&
-                            channelMembers?.slice(0, 1)?.map((ch: any, i: Number) => (
-                                <Avatar
-                                    key={'dialogs-list-' + i}
-                                    size={'sm'}
-                                    className={`bg-transparent top-[${i == 1 ? '4' : '0'}] right-[${
-                                        i == 1 ? '-2' : '0'
-                                    }] z-[${i == 1 ? 5 : 1}]`}
-                                >
-                                    <AvatarFallbackText>{startCase(ch?.username?.charAt(0))}</AvatarFallbackText>
-
-                                    {channelMembers?.length > 1 && (
-                                        <AvatarBadge
-                                            style={{
-                                                width: '100%',
-                                                height: '100%',
-                                                backgroundColor: '#e5e7eb',
-                                                borderRadius: 5,
-                                            }}
-                                            className="items-center justify-center bg-gray-200 rounded-md"
-                                        >
-                                            <Text style={{ fontSize: 12, fontWeight: 'bold', color: '#000' }}>
-                                                {channelMembers?.length}
-                                            </Text>
-                                        </AvatarBadge>
-                                    )}
-                                    {channelMembers?.length == 1 && (
-                                        <>
-                                            <AvatarImage
-                                                alt="user image"
-                                                style={{ borderRadius: 6, borderWidth: 2, borderColor: '#fff' }}
-                                                source={{
-                                                    uri: ch?.picture,
-                                                }}
-                                            />
-                                            <AvatarBadge style={{ width: 10, height: 10 }} />
-                                        </>
-                                    )}
-                                </Avatar>
-                            ))}
-                    </AvatarGroup>
-                </Box>
-                <Box className="flex-1">
-                    <LastMessageComponent
-                        key={`last-msg-${lastMessage?.id || 'none'}-${safeContextProperty('messages', []).length}`}
-                        title={title}
-                        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,
-                                    });
-
-                                    // 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]
-                                        : [];
-                                    const totalMsgCount = existingMessages?.totalCount + 1;
-                                    const merged = {
-                                        ...prev,
-                                        messages: {
-                                            ...existingMessages,
-                                            data: previousData,
-                                            totalCount: totalMsgCount,
-                                        },
-                                    };
-                                    return merged;
-                                },
-                            })
-                        }
-                    />
-                </Box>
-            </HStack>
-        </Pressable>
-    );
-};
-
-export const DialogsListItem = React.memo(DialogsListItemComponent);