@messenger-box/platform-mobile 10.0.3-alpha.36 → 10.0.3-alpha.37

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

@@ -23,7 +23,6 @@ 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 '';
@@ -46,206 +45,6 @@ export interface IDialogListItemProps {
     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
@@ -334,41 +133,11 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
     // 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],
-    );
+    // State for component data
+    const [loading, setLoading] = useState(false);
+    const [title, setTitle] = useState('');
+    const [messages, setMessages] = useState([]);
+    const [lastMessage, setLastMessage] = useState(null);
 
     // Query hooks for fetching messages
     const {
@@ -390,6 +159,21 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
                 `Completed message query for channel ${channel?.id}:`,
                 data?.messages?.data?.length ? 'Has messages' : 'No messages',
             );
+
+            if (data?.messages?.data) {
+                setMessages(data.messages.data);
+
+                // Find the newest message
+                const sortedMessages = [...data.messages.data].sort(
+                    (a, b) =>
+                        new Date(b?.updatedAt || b?.createdAt).getTime() -
+                        new Date(a?.updatedAt || a?.createdAt).getTime(),
+                );
+
+                if (sortedMessages.length > 0) {
+                    setLastMessage(sortedMessages[0]);
+                }
+            }
         },
         onError: (error) => {
             console.error(`Error fetching messages for channel ${channel?.id}:`, error);
@@ -406,27 +190,20 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
         },
     });
 
-    // Initialize the state machine with context data
+    // Set mounted state on mount/unmount
     useEffect(() => {
-        if (channel?.id) {
-            safeSend({
-                type: Actions.INITIAL_CONTEXT,
-                data: { channelId: channel.id, currentUser },
-            });
-        }
-
-        // Cleanup function
+        isMountedRef.current = true;
         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 });
+            setLoading(true);
 
             // Set up the options for the query to force network fetch
             const options = {
@@ -461,26 +238,21 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
                             });
                         }
 
-                        safeSend({
-                            type: Actions.UPDATE_MESSAGES,
-                            data: { messages: result.data.messages.data },
-                        });
+                        setMessages(result.data.messages.data);
+                        setLastMessage(latestMessage);
                     }
-                    safeSend({ type: Actions.STOP_LOADING });
+                    setLoading(false);
                 })
                 .catch((err) => {
                     console.error('Error refreshing dialog state:', err);
-                    safeSend({ type: Actions.STOP_LOADING });
+                    setLoading(false);
                 });
         }
-    }, [channel?.id, refetchMessages, safeSend, isMountedRef, parentId]);
+    }, [channel?.id, refetchMessages, 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(() => {
@@ -499,7 +271,7 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
             console.log('FOCUS EFFECT: Force refetching messages on navigation back for channel:', channel?.id);
 
             // Show loading state
-            safeSend({ type: Actions.START_LOADING });
+            setLoading(true);
 
             // Use a direct refetch with network-only policy to force fresh data
             const fetchFreshData = async () => {
@@ -524,7 +296,7 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
 
                     if (result?.data?.messages?.data && isMountedRef.current) {
                         // Compare with current state to check if we're getting fresh data
-                        const currentMessages = safeContextProperty('messages', []);
+                        const currentMessages = messages;
                         const fetchedMessages = result.data.messages.data;
 
                         // Log comparison to see if we got new data
@@ -534,17 +306,24 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
                             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
-                        safeSend({
-                            type: Actions.UPDATE_MESSAGES,
-                            data: { messages: fetchedMessages },
-                        });
+                        setMessages(fetchedMessages);
+                        setLastMessage(latestMessage);
                     }
                 } catch (error) {
                     console.error('Error refetching messages on focus:', error);
                 } finally {
                     if (isMountedRef.current) {
-                        safeSend({ type: Actions.STOP_LOADING });
+                        setLoading(false);
                     }
                 }
             };
@@ -555,40 +334,9 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
             return () => {
                 // Cleanup function when unfocused
             };
-        }, [channel?.id, refetchMessages, safeSend, parentId, isMountedRef]),
+        }, [channel?.id, refetchMessages, messages, isMountedRef, parentId]),
     );
 
-    // 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) {
@@ -625,11 +373,18 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
                                     `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 },
-                                });
+                                // Get the most recent message
+                                const sortedMessages = [...result.data.messages.data].sort(
+                                    (a, b) =>
+                                        new Date(b?.updatedAt || b?.createdAt).getTime() -
+                                        new Date(a?.updatedAt || a?.createdAt).getTime(),
+                                );
+
+                                const latestMessage = sortedMessages.length > 0 ? sortedMessages[0] : null;
+
+                                // Update state with fresh data
+                                setMessages(result.data.messages.data);
+                                setLastMessage(latestMessage);
                             }
                         })
                         .catch((error) => {
@@ -640,7 +395,7 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
 
             return () => clearTimeout(timer);
         }
-    }, [channel?.id, forceRefresh, isMountedRef, refetchMessages, safeSend, parentId]);
+    }, [channel?.id, forceRefresh, isMountedRef, refetchMessages, parentId]);
 
     const channelMembers = useMemo(
         () =>
@@ -650,7 +405,7 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
         [currentUser, channel],
     );
 
-    // Set title in state when channel members change
+    // Set title when channel members change
     useEffect(() => {
         if (channelMembers && isMountedRef.current) {
             const titleString =
@@ -659,70 +414,66 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
                     ?.filter((mu: any) => mu)
                     ?.join(', ') ?? '';
 
-            safeSend({
-                type: Actions.SET_TITLE,
-                data: { title: titleString },
-            });
+            setTitle(titleString);
         }
-    }, [channelMembers, safeSend, isMountedRef]);
+    }, [channelMembers, isMountedRef]);
 
     // Compute title with proper truncation
-    const title = useMemo(() => {
-        const titleString = safeContextProperty('title', '');
+    const displayTitle = useMemo(() => {
         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]);
+        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: safeContextProperty('messages', []).length,
+            messagesCount: messages.length,
         });
-    }, [channel?.id, lastMessage, safeContextProperty]);
-
-    // Optimize update logic for messages from channel-level subscription
-    const handleChannelMessage = (channel, newMessage) => {
-        // Check if we already have this message
-        if (state.context.messages.some((msg) => msg.id === newMessage.id)) {
-            console.log('Message already in local state, skipping update:', newMessage.id);
-            return;
-        }
+    }, [channel?.id, lastMessage, messages.length]);
 
-        console.log('Handling subscription message update at channel level:', newMessage.id);
-
-        // Always update with latest message to ensure dialog list stays current
-        safeSend({
-            type: Actions.UPDATE_MESSAGES,
-            data: {
-                // Use the directLastMessage option to force immediate UI update
-                directLastMessage: newMessage,
-                // Also update the messages array
-                messages: [...state.context.messages, newMessage],
-            },
-        });
-    };
+    // Handle new messages from subscription
+    useEffect(() => {
+        if (newMessage?.chatMessageAdded && channel?.id) {
+            const incomingMessage = newMessage.chatMessageAdded;
+
+            // Check if we already have this message
+            if (messages.some((msg) => msg.id === incomingMessage.id)) {
+                console.log('Message already in local state, skipping update:', incomingMessage.id);
+                return;
+            }
+
+            console.log('New message received from subscription:', {
+                channelId: channel.id,
+                messageId: incomingMessage.id,
+                message: incomingMessage.message?.substring(0, 20) + '...',
+                timestamp: incomingMessage.createdAt,
+            });
+
+            // Update messages and last message state
+            setMessages((prevMessages) => [...prevMessages, incomingMessage]);
+            setLastMessage(incomingMessage);
+        }
+    }, [newMessage, channel?.id, messages]);
 
     // Create listener for channel property updates
     useEffect(() => {
         // Check if channel has a lastMessage property (set by parent Dialogs component)
         if (channel?.lastMessage && channel.lastMessage.id) {
             console.log('Channel has lastMessage property:', channel.lastMessage.id);
-            handleChannelMessage(channel, channel.lastMessage);
+
+            // Check if we already have this message
+            if (!messages.some((msg) => msg.id === channel.lastMessage.id)) {
+                setMessages((prevMessages) => [...prevMessages, channel.lastMessage]);
+                setLastMessage(channel.lastMessage);
+            }
         }
-    }, [channel?.lastMessage?.id]);
+    }, [channel?.lastMessage?.id, messages]);
 
     return (
         <Pressable
-            onPress={() => onOpen(channel?.id, title)}
+            onPress={() => onOpen(channel?.id, displayTitle)}
             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 }}
         >
@@ -774,8 +525,8 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
                 </Box>
                 <Box className="flex-1">
                     <LastMessageComponent
-                        key={`last-msg-${lastMessage?.id || 'none'}-${safeContextProperty('messages', []).length}`}
-                        title={title}
+                        key={`last-msg-${lastMessage?.id || 'none'}-${messages.length}`}
+                        title={displayTitle}
                         lastMessage={lastMessage}
                         channelId={channel?.id}
                         subscribeToNewMessages={() =>
@@ -798,28 +549,13 @@ export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function
                                         timestamp: newMessage.createdAt || newMessage.updatedAt,
                                     });
 
-                                    // Force message update (double approach to ensure it updates)
+                                    // Direct optimistic update through local state
                                     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 messages array with the new message if it doesn't exist
+                                        if (!messages.some((msg) => msg.id === newMessage.id)) {
+                                            setMessages((prevMessages) => [...prevMessages, newMessage]);
+                                            setLastMessage(newMessage);
+                                        }
                                     }
 
                                     // Update the Apollo cache