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

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState, useCallback, useRef } from 'react';
 import {
     Text,
     Image,
@@ -24,13 +24,34 @@ 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) => {
+    if (!dateValue) return null;
+
+    try {
+        const date = new Date(dateValue);
+        // Check if the date is valid by seeing if it returns a valid time value
+        if (isNaN(date.getTime())) {
+            console.warn('Invalid date value detected:', dateValue);
+            return null;
+        }
+        return date;
+    } catch (error) {
+        console.warn('Error creating date from value:', dateValue, error);
+        return null;
+    }
+};
 
 const createdAtText = (value: string) => {
     if (!value) return '';
-    let date = new Date(value);
+    const date = safeDate(value);
+    if (!date) return '';
+
     if (isToday(date)) return 'Today';
     if (isYesterday(date)) return 'Yesterday';
-    return format(new Date(value), 'MMM dd, yyyy');
+    return format(date, 'MMM dd, yyyy');
 };
 
 export interface IDialogListChannel extends IChannel {
@@ -47,6 +68,293 @@ 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 check if a message is an image or contains only image content
+        const isTextMessage = (msg) => {
+            if (!msg) return false;
+
+            // If message is empty or only contains image-specific markers, ignore it
+            if (!msg.message || msg.message === '') 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;
+        };
+
+        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))];
+            }
+        });
+
+        // Combine and sort all messages
+        const allMessages = [...posts, ...replies];
+        if (!allMessages.length) return null;
+
+        // Return the most recent message - use safe date comparison
+        return allMessages.reduce((a, b) => {
+            const dateA = safeDate(a?.createdAt);
+            const dateB = safeDate(b?.createdAt);
+
+            // If either date is invalid, prefer the message with valid date
+            if (!dateA) return b;
+            if (!dateB) return a;
+
+            return dateA > dateB ? a : b;
+        }, allMessages[0]);
+    };
+
+    // 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;
+}
+
+const ServiceChannelWithLastMessage = React.memo(({ channel, lastMessage, subscribeToNewMessages }: any) => {
+    React.useEffect(() => {
+        // Subscribe and store the unsubscribe function
+        const unsubscribe = subscribeToNewMessages();
+        return () => {
+            // Cleanup subscription on unmount
+            if (unsubscribe && typeof unsubscribe === 'function') {
+                unsubscribe();
+            }
+        };
+    }, [subscribeToNewMessages]);
+
+    // Debug output for component rendering
+    React.useEffect(() => {
+        console.log(`ServiceChannelWithLastMessage rendered for channel ${channel?.id}:`, {
+            hasLastMessage: !!lastMessage,
+            messageId: lastMessage?.id,
+            messageText: lastMessage?.message?.substring(0, 20) + (lastMessage?.message?.length > 20 ? '...' : ''),
+            date: lastMessage?.createdAt ? safeDate(lastMessage.createdAt)?.toISOString() : 'none',
+        });
+    }, [lastMessage, channel?.id]);
+
+    const count = 30;
+    const title = channel?.title.slice(0, count) + (channel?.title.length > count ? '...' : '');
+
+    // Define message display text
+    let displayMessage = 'No messages yet';
+
+    if (lastMessage) {
+        // Check for file attachments
+        const hasFileAttachments = lastMessage.files?.data?.length > 0;
+
+        // Check if the message appears to be an image
+        const isImageMessage =
+            lastMessage.message?.includes('<img') ||
+            lastMessage.message?.includes('[Image]') ||
+            lastMessage.message?.includes('![') ||
+            (/\.(jpeg|jpg|gif|png|bmp|webp)/i.test(lastMessage.message || '') &&
+                ((lastMessage.message || '').includes('http') || (lastMessage.message || '').includes('/images/')));
+
+        if (hasFileAttachments) {
+            displayMessage = '📎 File attachment';
+        } else if (isImageMessage) {
+            displayMessage = '[Image]';
+        } else if (lastMessage.message && lastMessage.message.trim() !== '') {
+            displayMessage = lastMessage.message;
+        } else {
+            displayMessage = '(Empty message)';
+        }
+    }
+
+    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">
+                    {title}
+                </Text>
+                <Text color={colors.gray[600]} numberOfLines={1}>
+                    {displayMessage}
+                </Text>
+            </Box>
+
+            <Box className="flex-[0.2]">
+                <Text color={colors.gray[500]}>{lastMessage ? createdAtText(lastMessage?.createdAt) : ''}</Text>
+            </Box>
+        </HStack>
+    );
+});
+
 /**
  * TODO:
  * - Get Reservation info: reservation date, status
@@ -61,7 +369,35 @@ export const ServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = f
     refreshing,
     role,
 }) {
-    const [servicePostParentId, setServicePostParentId] = React.useState(null);
+    // 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],
+    );
+
+    // Query for thread messages
     const {
         data: threadMessages,
         loading: threadMessageLoading,
@@ -75,52 +411,75 @@ export const ServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = f
             limit: 2,
         },
         fetchPolicy: 'cache-and-network',
+        onCompleted: (data) => {
+            console.log(
+                `Completed thread messages query for channel ${channel?.id}:`,
+                data?.threadMessages?.data?.length ? 'Has messages' : 'No messages',
+            );
+        },
+        onError: (error) => {
+            console.error(`Error fetching thread messages for channel ${channel?.id}:`, error);
+        },
     });
 
-    useFocusEffect(
-        React.useCallback(() => {
-            // Do something when the screen is focused
-            //  refetchMessages({ channelId: channel?.id?.toString(), limit: 25 });
-            refetchThreadMessages({ channelId: channel?.id?.toString(), role, limit: 2 });
-            return () => {
-                // Do something when the screen is unfocused
-                // Useful for cleanup functions
-            };
-        }, [refreshing]),
-    );
+    // Update state when channel or currentUser changes
+    React.useEffect(() => {
+        if (channel?.id) {
+            safeSend({
+                type: Actions.INITIAL_CONTEXT,
+                data: {
+                    channelId: channel?.id?.toString(),
+                    currentUser,
+                    role,
+                },
+            });
 
-    const lastMessage = useMemo(() => {
-        if (!threadMessages?.threadMessages?.data?.length) {
-            return null;
+            safeSend({
+                type: Actions.SET_TITLE,
+                data: {
+                    title: channel?.title || '',
+                },
+            });
         }
-        const { data }: any = threadMessages.threadMessages;
-        const replies =
-            data
-                ?.map((t: any) => t?.replies)
-                ?.flat(1)
-                ?.filter((p: any) => p?.message !== '') ?? [];
-        if (replies?.length) {
-            return replies[0];
-            // return replies[replies.length - 1];
-        } else {
-            const post =
-                data?.find((t: any) => {
-                    return t?.post?.message !== '';
-                }) ??
-                data?.find((t: any) => {
-                    return t?.post;
-                }) ??
-                null;
-            return post ? post?.post : null;
+
+        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]);
+    }, [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;
-            setServicePostParentId(sParentId);
+            safeSend({
+                type: Actions.SET_SERVICE_POST_PARENT_ID,
+                data: {
+                    servicePostParentId: sParentId,
+                },
+            });
         }
-    }, [lastMessage]);
+    }, [lastMessage, safeSend]);
 
     const creatorAndMembersId = React.useMemo(() => {
         if (!channel?.members) return null;
@@ -131,7 +490,7 @@ export const ServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = f
         const creatorId: any = channel?.creator?.id;
         const mergedIds: any = [].concat(membersIds, creatorId) ?? [];
         return mergedIds?.filter((m: any, pos: any) => mergedIds?.indexOf(m) === pos) ?? [];
-    }, [channel]);
+    }, [channel, currentUser]);
 
     const postParentId = React.useMemo(() => {
         if (!creatorAndMembersId?.length) return null;
@@ -141,25 +500,93 @@ export const ServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = f
             : lastMessage?.parentId
             ? lastMessage?.parentId
             : lastMessage?.id ?? 0;
-    }, [creatorAndMembersId, lastMessage]);
-
-    // const { data: threadCreatedUpdated } = useOnThreadCreatedUpdatedSubscription({
-    //     variables: {
-    //         channelId: channel?.id?.toString(),
-    //         postParentId:
-    //             postParentId == null
-    //                 ? null
-    //                 : lastMessage?.parentId
-    //                 ? lastMessage?.parentId ?? null
-    //                 : lastMessage?.id ?? null,
-    //     },
-    // });
-
-    // React.useEffect(() => {
-    //     if (threadCreatedUpdated?.threadCreatedUpdated?.data) {
-    //         refetchThreadMessages({ channelId: channel?.id?.toString(), role, limit: 2 });
-    //     }
-    // }, [threadCreatedUpdated]);
+    }, [creatorAndMembersId, lastMessage, currentUser]);
+
+    // Function to force refresh the component state
+    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 });
+                });
+        }
+    }, [channel?.id, refetchThreadMessages, safeSend, isMountedRef, role]);
+
+    // Refetch messages when screen is focused or refreshing
+    useFocusEffect(
+        React.useCallback(() => {
+            if (!channel?.id) return;
+
+            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({
+                        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 });
+                    }
+                }
+            };
+
+            // Execute fetch
+            fetchFreshData();
+
+            return () => {
+                // Cleanup function when unfocused
+            };
+        }, [refreshing, channel?.id, refetchThreadMessages, safeSend, role, isMountedRef]),
+    );
 
     return (
         <Pressable
@@ -200,6 +627,14 @@ export const ServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = f
 
                                     const newPostThreadData: any = subscriptionData?.data?.threadCreatedUpdated?.data;
                                     const newMessage: any = subscriptionData?.data?.threadCreatedUpdated?.lastMessage;
+
+                                    console.log('New thread message subscription update:', {
+                                        channelId: channel?.id,
+                                        threadId: newPostThreadData?.id,
+                                        hasMessage: !!newMessage,
+                                        message: newMessage?.message?.substring(0, 20) + '...',
+                                    });
+
                                     const data =
                                         prev?.threadMessages?.data?.map((t: any) =>
                                             t.id === newPostThreadData?.id
@@ -213,75 +648,32 @@ export const ServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = f
                                                 : t,
                                         ) ?? [];
 
+                                    // Use the safe state update function
+                                    if (isMountedRef.current) {
+                                        safeSend({
+                                            type: Actions.UPDATE_THREAD_MESSAGES,
+                                            data: {
+                                                threadMessages: data?.length > 0 ? data : [newPostThreadData],
+                                                directLastMessage: newMessage, // Directly set the new message
+                                            },
+                                        });
+                                    }
+
                                     return Object.assign({}, prev, {
                                         threadMessages: {
                                             ...prev?.threadMessages,
                                             totalCount: newPostThreadData?.totalCount ?? 0,
                                             data: data?.length > 0 ? data : [newPostThreadData],
-                                            //  totalCount: prev?.threadMessages?.totalCount + 1,
-                                            //data: data,
                                         },
                                     });
                                 },
                             })
                         }
                     />
-                    {/* <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 ServiceChannelWithLastMessage = React.memo(({ channel, lastMessage, subscribeToNewMessages }: any) => {
-    React.useEffect(() => subscribeToNewMessages(), []);
-    const count = 20;
-    const title = channel?.title.slice(0, count) + (channel?.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">
-                    {title}
-                </Text>
-                <Text color={colors.gray[600]} numberOfLines={1}>
-                    {/* {creatorAndMembersId?.length && creatorAndMembersId?.includes(currentUser?.id)
-                    ? lastMessageCreatorAndMembers?.message ?? ''
-                    : lastMessage?.message ?? ''} */}
-                    {lastMessage?.message ?? ''}
-                </Text>
-            </Box>
-
-            <Box className="flex-[0.2]">
-                {/* {creatorAndMembersId?.length && creatorAndMembersId?.includes(currentUser?.id) ? (
-                <Text color="gray.500">
-                    {lastMessageCreatorAndMembers
-                        ? createdAtText(lastMessageCreatorAndMembers?.createdAt)
-                        : ''}
-                </Text>
-            ) : (
-                <Text color="gray.500">{lastMessage ? createdAtText(lastMessage?.createdAt) : ''}</Text>
-            )} */}
-                <Text color={colors.gray[500]}>{lastMessage ? createdAtText(lastMessage?.createdAt) : ''}</Text>
-            </Box>
-        </HStack>
-    );
-});
-
 export const ServiceDialogsListItem = React.memo(ServiceDialogsListItemComponent);