@messenger-box/platform-mobile 10.0.3-alpha.5 → 10.0.3-alpha.54

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

@@ -1,35 +1,47 @@
-import React, { useMemo } from 'react';
+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/lib/generated/generated.js';
+import { THREAD_CREATED_UPDATED, CHAT_MESSAGE_ADDED, useThreadMessagesQuery } from '../../../queries/inboxQueries';
 import { startCase } from 'lodash-es';
+import colors from 'tailwindcss/colors';
+import { SubscriptionHandler } from './SubscriptionHandler';
+
+// 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 {
@@ -44,8 +56,120 @@ export interface IDialogListItemProps {
     onOpen: (id: any, title: any, postParentId?: any) => void;
     refreshing: boolean;
     role: any;
+    visible?: boolean;
 }
 
+// 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]);
+};
+
+const ServiceChannelWithLastMessage = React.memo(({ channel, lastMessage }: { channel: any; lastMessage: any }) => {
+    // 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
@@ -59,10 +183,17 @@ export const ServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = f
     onOpen,
     refreshing,
     role,
+    visible = true,
 }) {
-    const [servicePostParentId, setServicePostParentId] = React.useState(null);
+    const isMountedRef = useRef(true);
+    const [subscriptionsTimestamp, setSubscriptionsTimestamp] = useState(Date.now());
+
+    // Only run queries/subscriptions if visible
+    const shouldQuery = !!channel?.id && visible;
+
+    // Query for thread messages (minimal fields if possible)
     const {
-        data: threadMessages,
+        data: threadMessagesData,
         loading: threadMessageLoading,
         error,
         refetch: refetchThreadMessages,
@@ -73,56 +204,41 @@ export const ServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = f
             role,
             limit: 2,
         },
+        skip: !shouldQuery, // Only run if visible
         fetchPolicy: 'cache-and-network',
+        onCompleted: (data) => {
+            if (!shouldQuery) return;
+        },
+        onError: (error) => {
+            if (!shouldQuery) return;
+            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]),
-    );
+    // Extract threadMessages data for easier access
+    const threadMessages = useMemo(() => threadMessagesData?.threadMessages?.data || [], [threadMessagesData]);
 
+    // Calculate lastMessage directly from threadMessages
     const lastMessage = useMemo(() => {
-        if (!threadMessages?.threadMessages?.data?.length) {
-            return null;
-        }
-        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;
-        }
-    }, [threadMessages]);
+        if (!shouldQuery) return null;
+        return computeLastMessage(threadMessages);
+    }, [shouldQuery, threadMessages]);
 
+    // Calculate servicePostParentId based on lastMessage
+    const servicePostParentId = useMemo(() => {
+        if (!shouldQuery || !lastMessage) return null;
+        return lastMessage?.parentId ? lastMessage?.parentId : lastMessage?.id;
+    }, [shouldQuery, lastMessage]);
+
+    // Handle component unmount
     React.useEffect(() => {
-        if (lastMessage) {
-            const sParentId = lastMessage?.parentId ? lastMessage?.parentId : lastMessage?.id;
-            setServicePostParentId(sParentId);
-        }
-    }, [lastMessage]);
+        return () => {
+            isMountedRef.current = false;
+        };
+    }, []);
 
-    const creatorAndMembersId = React.useMemo(() => {
-        if (!channel?.members) return null;
+    const creatorAndMembersId = useMemo(() => {
+        if (!shouldQuery || !channel?.members) return null;
         const membersIds: any =
             channel?.members
                 ?.filter((m: any) => m !== null && m?.user?.id !== currentUser?.id)
@@ -130,67 +246,64 @@ 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]);
-
-    const postParentId = React.useMemo(() => {
-        if (!creatorAndMembersId?.length) return null;
+    }, [shouldQuery, channel, currentUser]);
 
+    const postParentId = useMemo(() => {
+        if (!shouldQuery || !creatorAndMembersId?.length) return null;
         return creatorAndMembersId?.length && creatorAndMembersId?.includes(currentUser?.id)
             ? null
             : 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]);
+    }, [shouldQuery, creatorAndMembersId, lastMessage, currentUser]);
+
+    // Function to force refresh the component state
+    const refreshThreadState = useCallback(() => {
+        if (shouldQuery && channel?.id && isMountedRef.current) {
+            refetchThreadMessages({
+                channelId: channel?.id?.toString(),
+                role,
+                limit: 2,
+            }).catch((err) => {
+                console.error('Error refreshing thread state:', err);
+            });
+        }
+    }, [shouldQuery, channel?.id, refetchThreadMessages, role]);
+
+    // Reset subscriptions when the component gains focus
+    useFocusEffect(
+        React.useCallback(() => {
+            if (!shouldQuery || !channel?.id) return;
+            setSubscriptionsTimestamp(Date.now());
+            const fetchFreshData = async () => {
+                try {
+                    await refetchThreadMessages({
+                        channelId: channel?.id?.toString(),
+                        role,
+                        limit: 2,
+                    });
+                } catch (error) {
+                    console.error('Error refetching thread messages on focus:', error);
+                }
+            };
+            fetchFreshData();
+            return () => {};
+        }, [shouldQuery, refreshing, channel?.id, refetchThreadMessages, role]),
+    );
 
     return (
         <Pressable
-            onPress={() => channel?.id !== selectedChannelId && onOpen(channel?.id, channel?.title, postParentId)}
-            borderWidth={'$1'}
-            borderRadius={'$md'}
-            borderColor={'$trueGray200'}
-            flex={1}
-            $dark-borderColor="$coolGray600"
-            $dark-backgroundColor="$trueGray700"
-            $light-backgroundColor="$trueGray50"
-            $light-borderColor="$trueGray200"
+            // 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 }}
         >
-            <HStack
-                // px={2}
-                // pl={3}
-                py={'$3'}
-                space={'sm'}
-                w={'100%'}
-                flex={1}
-                // direction={'row'}
-                justifyContent={'space-between'}
-                alignItems={'center'}
-            >
-                <Box flex={0.1} alignItems={'flex-start'} pl={'$3'}>
+            <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}
-                        bg={'transparent'}
                         size={'sm'}
-                        top={'$0'}
-                        right={'$0'}
-                        zIndex={1}
+                        className="bg-transparent top-0 right-0 z-[1]"
                     >
                         <AvatarFallbackText> {startCase(channel?.creator?.username?.charAt(0))}</AvatarFallbackText>
                         <AvatarImage
@@ -202,102 +315,132 @@ export const ServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = f
                         />
                     </Avatar>
                 </Box>
-                <Box flex={0.9}>
+                <Box className="flex-1">
                     <ServiceChannelWithLastMessage
+                        key={`channel-${channel?.id}-${subscriptionsTimestamp}`}
                         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;
-                                    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,
-                                        ) ?? [];
-
-                                    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> */}
+
+                    {/* Subscription handlers for real-time updates */}
+                    {shouldQuery && (
+                        <>
+                            <SubscriptionHandler
+                                subscribeToMore={subscribeToMore}
+                                document={THREAD_CREATED_UPDATED}
+                                variables={{
+                                    channelId: channel?.id?.toString(),
+                                    postParentId: postParentId || servicePostParentId || null,
+                                }}
+                                updateQuery={(prev, { subscriptionData }: any) => {
+                                    if (!subscriptionData?.data) {
+                                        return prev;
+                                    }
+                                    try {
+                                        const newPostThreadData: any =
+                                            subscriptionData?.data?.threadCreatedUpdated?.data;
+                                        const newMessage: any =
+                                            subscriptionData?.data?.threadCreatedUpdated?.lastMessage;
+                                        if (!newPostThreadData || !newMessage) {
+                                            return prev;
+                                        }
+                                        const prevThreads = prev?.threadMessages?.data || [];
+                                        const threadExists = prevThreads.some(
+                                            (t: any) => t.id === newPostThreadData?.id,
+                                        );
+                                        let updatedThreads;
+                                        if (threadExists) {
+                                            updatedThreads = prevThreads.map((t: any) =>
+                                                t.id === newPostThreadData?.id
+                                                    ? {
+                                                          ...t,
+                                                          replies: [...(t?.replies || []), newMessage],
+                                                          replyCount: newPostThreadData?.replyCount,
+                                                          lastReplyAt: newPostThreadData?.lastReplyAt,
+                                                          updatedAt: newPostThreadData?.updatedAt,
+                                                      }
+                                                    : t,
+                                            );
+                                        } else {
+                                            updatedThreads = [...prevThreads, newPostThreadData];
+                                        }
+                                        return {
+                                            ...prev,
+                                            threadMessages: {
+                                                ...prev?.threadMessages,
+                                                totalCount:
+                                                    newPostThreadData?.totalCount ??
+                                                    prev?.threadMessages?.totalCount ??
+                                                    0,
+                                                data: updatedThreads,
+                                            },
+                                        };
+                                    } catch (error) {
+                                        console.error(`Thread subscription error for channel ${channel?.id}:`, error);
+                                        return prev;
+                                    }
+                                }}
+                            />
+                            <SubscriptionHandler
+                                subscribeToMore={subscribeToMore}
+                                document={CHAT_MESSAGE_ADDED}
+                                variables={{
+                                    channelId: channel?.id?.toString(),
+                                    postParentId: postParentId || servicePostParentId || null,
+                                }}
+                                updateQuery={(prev, { subscriptionData }: any) => {
+                                    if (!subscriptionData?.data) {
+                                        return prev;
+                                    }
+                                    try {
+                                        const newMessage = subscriptionData?.data?.chatMessageAdded;
+                                        if (!newMessage) {
+                                            return prev;
+                                        }
+                                        const prevThreads = prev?.threadMessages?.data || [];
+                                        const threadIndex = prevThreads.findIndex((t: any) => {
+                                            if (newMessage.parentId && t.post?.id === newMessage.parentId) {
+                                                return true;
+                                            }
+                                            if (t.replies && t.replies.some((r: any) => r.id === newMessage.parentId)) {
+                                                return true;
+                                            }
+                                            return false;
+                                        });
+                                        if (threadIndex === -1) {
+                                            return prev;
+                                        }
+                                        const updatedThreads = [...prevThreads];
+                                        const thread = { ...updatedThreads[threadIndex] };
+                                        thread.replies = [...(thread.replies || []), newMessage];
+                                        const currentReplyCount =
+                                            typeof thread.replyCount === 'number' ? thread.replyCount : 0;
+                                        thread.replyCount = currentReplyCount + 1;
+                                        thread.lastReplyAt = newMessage.createdAt;
+                                        thread.updatedAt = newMessage.createdAt;
+                                        updatedThreads[threadIndex] = thread;
+                                        return {
+                                            ...prev,
+                                            threadMessages: {
+                                                ...prev?.threadMessages,
+                                                data: updatedThreads,
+                                            },
+                                        };
+                                    } catch (error) {
+                                        console.error(
+                                            `Chat message subscription error for channel ${channel?.id}:`,
+                                            error,
+                                        );
+                                        return prev;
+                                    }
+                                }}
+                            />
+                        </>
+                    )}
                 </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(), []);
-    return (
-        <HStack space={'sm'} flex={1} justifyContent={'center'} alignItems={'center'}>
-            <Box flex={0.8}>
-                <Text color="$trueGray600" fontSize="$lg" flexWrap={'wrap'} fontWeight="$semibold">
-                    {channel?.title}
-                </Text>
-                <Text color="$trueGray600" numberOfLines={1}>
-                    {/* {creatorAndMembersId?.length && creatorAndMembersId?.includes(currentUser?.id)
-                    ? lastMessageCreatorAndMembers?.message ?? ''
-                    : lastMessage?.message ?? ''} */}
-                    {lastMessage?.message ?? ''}
-                </Text>
-            </Box>
-
-            <Box 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="$trueGray500">{lastMessage ? createdAtText(lastMessage?.createdAt) : ''}</Text>
-            </Box>
-        </HStack>
-    );
-});
-
 export const ServiceDialogsListItem = React.memo(ServiceDialogsListItemComponent);

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { TextInput, TextInputProps } from 'react-native';
+
+export const SlackInput = React.forwardRef<TextInput, TextInputProps>((props, ref) => {
+    return (
+        <TextInput
+            ref={ref}
+            {...props}
+            style={[
+                {
+                    flex: 1,
+                    fontSize: 16,
+                    padding: 10,
+                    borderRadius: 8,
+                    backgroundColor: '#f8f8f8',
+                    borderColor: '#e0e0e0',
+                    borderWidth: 1,
+                },
+                props.style,
+            ]}
+        />
+    );
+});