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

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

@@ -1,679 +0,0 @@
-import React, { useMemo, useState, useCallback, useRef } 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, IUserAccount } from 'common';
-import {
-    useOnThreadCreatedUpdatedSubscription,
-    useOnThreadChatMessageAddedSubscription,
-    useThreadMessagesQuery,
-    OnThreadCreatedUpdatedDocument as THREAD_CHAT_ADDED,
-    OnThreadChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
-} 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 '';
-    const date = safeDate(value);
-    if (!date) return '';
-
-    if (isToday(date)) return 'Today';
-    if (isYesterday(date)) return 'Yesterday';
-    return format(date, '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, postParentId?: any) => void;
-    refreshing: boolean;
-    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
- * - Add ability to get property information: name, logo
- */
-export const ServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = function DialogsListItem({
-    currentUser,
-    // users,
-    selectedChannelId,
-    channel,
-    onOpen,
-    refreshing,
-    role,
-}) {
-    // 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,
-        error,
-        refetch: refetchThreadMessages,
-        subscribeToMore,
-    } = useThreadMessagesQuery({
-        variables: {
-            channelId: channel?.id?.toString(),
-            role,
-            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);
-        },
-    });
-
-    // Update state when channel or currentUser changes
-    React.useEffect(() => {
-        if (channel?.id) {
-            safeSend({
-                type: Actions.INITIAL_CONTEXT,
-                data: {
-                    channelId: channel?.id?.toString(),
-                    currentUser,
-                    role,
-                },
-            });
-
-            safeSend({
-                type: Actions.SET_TITLE,
-                data: {
-                    title: channel?.title || '',
-                },
-            });
-        }
-
-        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;
-            safeSend({
-                type: Actions.SET_SERVICE_POST_PARENT_ID,
-                data: {
-                    servicePostParentId: sParentId,
-                },
-            });
-        }
-    }, [lastMessage, safeSend]);
-
-    const creatorAndMembersId = React.useMemo(() => {
-        if (!channel?.members) return null;
-        const membersIds: any =
-            channel?.members
-                ?.filter((m: any) => m !== null && m?.user?.id !== currentUser?.id)
-                ?.map((mu: any) => mu?.user?.id) ?? [];
-        const creatorId: any = channel?.creator?.id;
-        const mergedIds: any = [].concat(membersIds, creatorId) ?? [];
-        return mergedIds?.filter((m: any, pos: any) => mergedIds?.indexOf(m) === pos) ?? [];
-    }, [channel, currentUser]);
-
-    const postParentId = React.useMemo(() => {
-        if (!creatorAndMembersId?.length) return null;
-
-        return creatorAndMembersId?.length && creatorAndMembersId?.includes(currentUser?.id)
-            ? null
-            : lastMessage?.parentId
-            ? lastMessage?.parentId
-            : lastMessage?.id ?? 0;
-    }, [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
-            onPress={() => channel?.id !== selectedChannelId && 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 }}
-        >
-            <HStack space={'md'} className="flex-1 w-[100%] px-2 py-3  items-center">
-                <Box className="flex-[0.1] items-start pl-3">
-                    <Avatar
-                        key={'service-channels-key-' + channel?.id}
-                        size={'sm'}
-                        className="bg-transparent top-0 right-0 z-[1]"
-                    >
-                        <AvatarFallbackText> {startCase(channel?.creator?.username?.charAt(0))}</AvatarFallbackText>
-                        <AvatarImage
-                            alt="user image"
-                            style={{ borderRadius: 6, borderWidth: 2, borderColor: '#fff' }}
-                            source={{
-                                uri: channel?.creator?.picture,
-                            }}
-                        />
-                    </Avatar>
-                </Box>
-                <Box className="flex-1">
-                    <ServiceChannelWithLastMessage
-                        channel={channel}
-                        lastMessage={lastMessage}
-                        subscribeToNewMessages={() =>
-                            subscribeToMore({
-                                document: THREAD_CHAT_ADDED,
-                                variables: {
-                                    channelId: channel?.id?.toString(),
-                                    postParentId: postParentId ? servicePostParentId : null,
-                                },
-                                updateQuery: (prev, { subscriptionData }: any) => {
-                                    if (!subscriptionData.data) return prev;
-
-                                    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
-                                                ? {
-                                                      ...t,
-                                                      replies: [...t?.replies, newMessage],
-                                                      replyCount: newPostThreadData?.replyCount,
-                                                      lastReplyAt: newPostThreadData?.lastReplyAt,
-                                                      updatedAt: newPostThreadData?.updatedAt,
-                                                  }
-                                                : 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],
-                                        },
-                                    });
-                                },
-                            })
-                        }
-                    />
-                </Box>
-            </HStack>
-        </Pressable>
-    );
-};
-
-export const ServiceDialogsListItem = React.memo(ServiceDialogsListItemComponent);