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

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

@@ -24,7 +24,6 @@ import {
 } from 'common/graphql';
 import { startCase } from 'lodash-es';
 import colors from 'tailwindcss/colors';
-import { serviceDialogsListItemXstate, Actions, BaseState } from './workflow/service-dialogs-list-item-xstate';
 
 // Helper function to safely create a Date object
 const safeDate = (dateValue) => {
@@ -68,223 +67,58 @@ export interface IDialogListItemProps {
     role: any;
 }
 
-// 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;
-            threadMessages: any[];
-            loading: boolean;
-            error: string | null;
-            title: string;
-            role: string;
-            servicePostParentId: string | null;
-            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,
-            threadMessages: [],
-            loading: false,
-            error: null,
-            title: '',
-            role: '',
-            servicePostParentId: null,
-            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,
-                        role: event.data?.role || null,
-                        loading: true,
-                    },
-                    value: BaseState.FetchingThreadMessages,
-                }));
-            } else if (event.type === Actions.UPDATE_THREAD_MESSAGES) {
-                setState((prev) => {
-                    if (event.data?.threadMessages) {
-                        // Handling bulk messages (initial load)
-                        // 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,
-                                    threadMessages: event.data.threadMessages,
-                                    lastMessage: event.data.directLastMessage,
-                                    loading: false,
-                                },
-                            };
-                        }
-
-                        return {
-                            ...prev,
-                            context: {
-                                ...prev.context,
-                                threadMessages: event.data.threadMessages,
-                                lastMessage: computeLastMessage(event.data.threadMessages),
-                                loading: false,
-                            },
-                        };
-                    } else if (event.data?.message) {
-                        // Handling single message (from subscription)
-                        const newMessage = event.data.message;
-                        const updatedMessages = [...prev.context.threadMessages, 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,
-                                threadMessages: 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.SET_SERVICE_POST_PARENT_ID) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        servicePostParentId: event.data?.servicePostParentId || null,
-                    },
-                }));
-            } 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 = (threadMessages) => {
-        if (!threadMessages || !threadMessages.length) return null;
-
-        // Extract the post and replies from thread messages
-        let posts = [];
-        let replies = [];
+// Helper function to compute the last message from a list of messages
+const computeLastMessage = (threadMessages) => {
+    if (!threadMessages || !threadMessages.length) return null;
 
-        // Helper function to check if a message is an image or contains only image content
-        const isTextMessage = (msg) => {
-            if (!msg) return false;
+    // Extract the post and replies from thread messages
+    let posts = [];
+    let replies = [];
 
-            // If message is empty or only contains image-specific markers, ignore it
-            if (!msg.message || msg.message === '') return false;
+    // Helper function to check if a message is an image or contains only image content
+    const isTextMessage = (msg) => {
+        if (!msg) return false;
 
-            // Check if message looks like an image URL or reference
-            const isImageMessage =
-                msg.message.includes('<img') ||
-                msg.message.includes('[Image]') ||
-                msg.message.includes('![') ||
-                (/\.(jpeg|jpg|gif|png|bmp|webp)/i.test(msg.message) &&
-                    (msg.message.includes('http') || msg.message.includes('/images/')));
-
-            // Return true only for text messages (not image messages)
-            return !isImageMessage;
-        };
+        // If message is empty or only contains image-specific markers, ignore it
+        if (!msg.message || msg.message === '') return false;
 
-        threadMessages.forEach((thread) => {
-            if (thread?.post && isTextMessage(thread.post)) {
-                posts.push(thread.post);
-            }
-            if (thread?.replies?.length) {
-                replies = [...replies, ...thread.replies.filter((r) => isTextMessage(r))];
-            }
-        });
+        // Check if message looks like an image URL or reference
+        const isImageMessage =
+            msg.message.includes('<img') ||
+            msg.message.includes('[Image]') ||
+            msg.message.includes('![') ||
+            (/\.(jpeg|jpg|gif|png|bmp|webp)/i.test(msg.message) &&
+                (msg.message.includes('http') || msg.message.includes('/images/')));
 
-        // Combine and sort all messages
-        const allMessages = [...posts, ...replies];
-        if (!allMessages.length) return null;
+        // Return true only for text messages (not image messages)
+        return !isImageMessage;
+    };
 
-        // Return the most recent message - use safe date comparison
-        return allMessages.reduce((a, b) => {
-            const dateA = safeDate(a?.createdAt);
-            const dateB = safeDate(b?.createdAt);
+    threadMessages.forEach((thread) => {
+        if (thread?.post && isTextMessage(thread.post)) {
+            posts.push(thread.post);
+        }
+        if (thread?.replies?.length) {
+            replies = [...replies, ...thread.replies.filter((r) => isTextMessage(r))];
+        }
+    });
 
-            // If either date is invalid, prefer the message with valid date
-            if (!dateA) return b;
-            if (!dateB) return a;
+    // Combine and sort all messages
+    const allMessages = [...posts, ...replies];
+    if (!allMessages.length) return null;
 
-            return dateA > dateB ? a : b;
-        }, allMessages[0]);
-    };
+    // Return the most recent message - use safe date comparison
+    return allMessages.reduce((a, b) => {
+        const dateA = safeDate(a?.createdAt);
+        const dateB = safeDate(b?.createdAt);
 
-    // 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]);
+        // If either date is invalid, prefer the message with valid date
+        if (!dateA) return b;
+        if (!dateB) return a;
 
-    // Return as a tuple to match useMachine API
-    return [stateWithMatches, send] as const;
-}
+        return dateA > dateB ? a : b;
+    }, allMessages[0]);
+};
 
 const ServiceChannelWithLastMessage = React.memo(
     ({ channel, lastMessage, subscribeToNewMessages, subscribeToChatMessages }: any) => {
@@ -397,35 +231,11 @@ export const ServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = f
 }) {
     // Create a ref to track if component is mounted
     const isMountedRef = useRef(true);
-    // Define safe access functions
-    const [state, send] = useSafeMachine(serviceDialogsListItemXstate);
-
-    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],
-    );
+    const [subscriptionsTimestamp, setSubscriptionsTimestamp] = useState(Date.now());
 
     // Query for thread messages
     const {
-        data: threadMessages,
+        data: threadMessagesData,
         loading: threadMessageLoading,
         error,
         refetch: refetchThreadMessages,
@@ -448,71 +258,28 @@ export const ServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = f
         },
     });
 
-    // Update state when channel or currentUser changes
-    React.useEffect(() => {
-        if (channel?.id) {
-            safeSend({
-                type: Actions.INITIAL_CONTEXT,
-                data: {
-                    channelId: channel?.id?.toString(),
-                    currentUser,
-                    role,
-                },
-            });
+    // Extract threadMessages data for easier access
+    const threadMessages = threadMessagesData?.threadMessages?.data || [];
 
-            safeSend({
-                type: Actions.SET_TITLE,
-                data: {
-                    title: channel?.title || '',
-                },
-            });
-        }
+    // Calculate lastMessage directly from threadMessages
+    const lastMessage = useMemo(() => {
+        return computeLastMessage(threadMessages);
+    }, [threadMessages]);
+
+    // Calculate servicePostParentId based on lastMessage
+    const servicePostParentId = useMemo(() => {
+        if (!lastMessage) return null;
+        return lastMessage?.parentId ? lastMessage?.parentId : lastMessage?.id;
+    }, [lastMessage]);
 
+    // Handle component unmount
+    React.useEffect(() => {
         return () => {
             isMountedRef.current = false;
         };
-    }, [channel?.id, currentUser, role, safeSend]);
-
-    // Update state when thread messages are loaded or refreshed
-    React.useEffect(() => {
-        if (threadMessages && isMountedRef.current) {
-            console.log(
-                `Updating thread messages for channel ${channel?.id}, count:`,
-                threadMessages?.threadMessages?.data?.length || 0,
-            );
-
-            safeSend({
-                type: Actions.UPDATE_THREAD_MESSAGES,
-                data: {
-                    threadMessages: threadMessages?.threadMessages?.data || [],
-                },
-            });
-        }
-    }, [threadMessages, refreshing, channel?.id, safeSend]);
-
-    // Use computed values from state
-    const lastMessage = safeContextProperty('lastMessage', null);
-    const servicePostParentId = safeContextProperty('servicePostParentId', null);
-
-    // Update servicePostParentId when lastMessage changes
-    React.useEffect(() => {
-        if (lastMessage) {
-            const sParentId = lastMessage?.parentId ? lastMessage?.parentId : lastMessage?.id;
-
-            if (sParentId !== safeContextProperty('servicePostParentId')) {
-                console.log(`Updating servicePostParentId for channel ${channel?.id} to:`, sParentId);
-
-                safeSend({
-                    type: Actions.SET_SERVICE_POST_PARENT_ID,
-                    data: {
-                        servicePostParentId: sParentId,
-                    },
-                });
-            }
-        }
-    }, [lastMessage, safeSend, channel?.id, safeContextProperty]);
+    }, []);
 
-    const creatorAndMembersId = React.useMemo(() => {
+    const creatorAndMembersId = useMemo(() => {
         if (!channel?.members) return null;
         const membersIds: any =
             channel?.members
@@ -523,7 +290,7 @@ export const ServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = f
         return mergedIds?.filter((m: any, pos: any) => mergedIds?.indexOf(m) === pos) ?? [];
     }, [channel, currentUser]);
 
-    const postParentId = React.useMemo(() => {
+    const postParentId = useMemo(() => {
         if (!creatorAndMembersId?.length) return null;
 
         return creatorAndMembersId?.length && creatorAndMembersId?.includes(currentUser?.id)
@@ -537,38 +304,17 @@ export const ServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = f
     const refreshThreadState = useCallback(() => {
         if (channel?.id && isMountedRef.current) {
             console.log('Forcing thread state refresh for channel:', channel?.id);
-            // First ensure we're in a loading state to trigger UI updates
-            safeSend({ type: Actions.START_LOADING });
 
             // Refetch messages from server
             refetchThreadMessages({
                 channelId: channel?.id?.toString(),
                 role,
                 limit: 2,
-            })
-                .then((result) => {
-                    // Update the state with fresh data
-                    if (result.data?.threadMessages?.data && isMountedRef.current) {
-                        console.log(
-                            `Refreshed ${result.data.threadMessages.data.length} thread messages for channel ${channel?.id}`,
-                        );
-
-                        safeSend({
-                            type: Actions.UPDATE_THREAD_MESSAGES,
-                            data: { threadMessages: result.data.threadMessages.data },
-                        });
-                    }
-                    safeSend({ type: Actions.STOP_LOADING });
-                })
-                .catch((err) => {
-                    console.error('Error refreshing thread state:', err);
-                    safeSend({ type: Actions.STOP_LOADING });
-                });
+            }).catch((err) => {
+                console.error('Error refreshing thread state:', err);
+            });
         }
-    }, [channel?.id, refetchThreadMessages, safeSend, isMountedRef, role]);
-
-    // Add a timestamp to track when subscriptions were last set up
-    const [subscriptionsTimestamp, setSubscriptionsTimestamp] = useState(Date.now());
+    }, [channel?.id, refetchThreadMessages, isMountedRef, role]);
 
     // Reset subscriptions when the component gains focus
     useFocusEffect(
@@ -581,39 +327,17 @@ export const ServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = f
 
             console.log('ServiceDialogsListItem focused 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 {
                     // Force a network-only fetch
-                    const result = await refetchThreadMessages({
+                    await refetchThreadMessages({
                         channelId: channel?.id?.toString(),
                         role,
                         limit: 2,
                     });
-
-                    // Log the refreshed data
-                    console.log(
-                        `FOCUS EFFECT: Refetched ${
-                            result?.data?.threadMessages?.data?.length || 0
-                        } messages for channel ${channel?.id}`,
-                    );
-
-                    if (result?.data?.threadMessages?.data && isMountedRef.current) {
-                        // Update state with fresh data
-                        safeSend({
-                            type: Actions.UPDATE_THREAD_MESSAGES,
-                            data: { threadMessages: result.data.threadMessages.data },
-                        });
-                    }
                 } catch (error) {
                     console.error('Error refetching thread messages on focus:', error);
-                } finally {
-                    if (isMountedRef.current) {
-                        safeSend({ type: Actions.STOP_LOADING });
-                    }
                 }
             };
 
@@ -623,12 +347,13 @@ export const ServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = f
             return () => {
                 // Cleanup function when unfocused
             };
-        }, [refreshing, channel?.id, refetchThreadMessages, safeSend, role, isMountedRef]),
+        }, [refreshing, channel?.id, refetchThreadMessages, role]),
     );
 
     return (
         <Pressable
-            onPress={() => channel?.id !== selectedChannelId && onOpen(channel?.id, channel?.title, postParentId)}
+            // onPress={() => channel?.id !== selectedChannelId && onOpen(channel?.id, channel?.title, postParentId)}
+            onPress={() => onOpen(channel?.id, channel?.title, postParentId)}
             className="flex-1  rounded-md border-gray-200 dark:border-gray-600 dark:bg-gray-700"
             style={{ borderBottomWidth: 1, borderColor: '#e5e7eb', marginVertical: 0 }}
         >
@@ -712,17 +437,6 @@ export const ServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = f
                                             updatedThreads = [...prevThreads, newPostThreadData];
                                         }
 
-                                        // Use the safe state update function
-                                        if (isMountedRef.current) {
-                                            safeSend({
-                                                type: Actions.UPDATE_THREAD_MESSAGES,
-                                                data: {
-                                                    threadMessages: updatedThreads,
-                                                    directLastMessage: newMessage, // Directly set the new message
-                                                },
-                                            });
-                                        }
-
                                         return {
                                             ...prev,
                                             threadMessages: {
@@ -794,17 +508,6 @@ export const ServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = f
                                             console.log(
                                                 `Cannot find thread for chat message in channel ${channel?.id}`,
                                             );
-
-                                            // Even if we can't find the thread, update the UI with the new message
-                                            if (isMountedRef.current) {
-                                                safeSend({
-                                                    type: Actions.UPDATE_THREAD_MESSAGES,
-                                                    data: {
-                                                        directLastMessage: newMessage,
-                                                    },
-                                                });
-                                            }
-
                                             return prev;
                                         }
 
@@ -825,17 +528,6 @@ export const ServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = f
 
                                         updatedThreads[threadIndex] = thread;
 
-                                        // Use the safe state update function
-                                        if (isMountedRef.current) {
-                                            safeSend({
-                                                type: Actions.UPDATE_THREAD_MESSAGES,
-                                                data: {
-                                                    threadMessages: updatedThreads,
-                                                    directLastMessage: newMessage,
-                                                },
-                                            });
-                                        }
-
                                         return {
                                             ...prev,
                                             threadMessages: {

package/src/screens/inbox/components/SlackMessageContainer/SlackBubble.tsx

@@ -65,13 +65,11 @@ export default class Bubble extends React.Component<any> {
 
             // Add validation for image URL
             if (!image || typeof image !== 'string') {
-                console.log('Invalid image URL:', image);
                 return null;
             }
 
-            // Log the image URL for debugging
-            console.log('Rendering message image:', image);
-
+            // Class components can't use hooks like useMemo
+            // Directly render the CachedImage instead
             return (
                 <TouchableHighlight
                     underlayColor={'transparent'}