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

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useCallback, useRef, useEffect } from 'react';
 import {
     Text,
     Image,
@@ -15,13 +15,10 @@ import {
 import { format, isToday, isYesterday } from 'date-fns';
 import { useFocusEffect } from '@react-navigation/native';
 import { IChannel, SortEnum, IUserAccount } from 'common';
-import {
-    useMessagesQuery,
-    useOnChatMessageAddedSubscription,
-    OnChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
-    useUserAccountQuery,
-} from 'common/lib/generated/generated.js';
+import { CHAT_MESSAGE_ADDED, useMessagesQuery as useMessagesQueryFromInbox } from '../../../queries/inboxQueries';
 import { startCase } from 'lodash-es';
+import colors from 'tailwindcss/colors';
+import { SubscriptionHandler } from './SubscriptionHandler';
 
 const createdAtText = (value: string) => {
     if (!value) return '';
@@ -41,8 +38,56 @@ export interface IDialogListItemProps {
     selectedChannelId?: any;
     channel?: any;
     onOpen: (id: any, title: any) => void;
+    forceRefresh?: boolean;
+    visible?: boolean;
 }
 
+// LastMessage component definition
+const LastMessageComponent = ({ title, lastMessage }) => {
+    const count = 30;
+    const channelTitle = title?.slice(0, count) + (title?.length > count ? '...' : '') || '';
+
+    // Define message display text
+    let displayMessage = 'No messages yet';
+
+    if (lastMessage) {
+        if (lastMessage.message && lastMessage.message.trim() !== '') {
+            // Show text message
+            displayMessage = lastMessage.message;
+        } else if (lastMessage.files?.data?.length > 0) {
+            // Show message with files
+            displayMessage = '📎 File attachment';
+        } else {
+            // Default for empty message
+            displayMessage = '(Empty message)';
+        }
+    }
+
+    // Determine the date/time to display
+    const displayDate = lastMessage?.createdAt
+        ? createdAtText(lastMessage.createdAt)
+        : lastMessage?.updatedAt
+        ? createdAtText(lastMessage.updatedAt)
+        : '';
+
+    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">
+                    {channelTitle}
+                </Text>
+                <Text color={colors.gray[600]} numberOfLines={1}>
+                    {displayMessage}
+                </Text>
+            </Box>
+
+            <Box className="flex-[0.2]">
+                <Text color={colors.gray[500]}>{displayDate}</Text>
+            </Box>
+        </HStack>
+    );
+};
+
 /**
  * TODO:
  * - Get Reservation info: reservation date, status
@@ -50,249 +95,268 @@ export interface IDialogListItemProps {
  */
 export const DialogsListItemComponent: React.FC<IDialogListItemProps> = function DialogsListItem({
     currentUser,
-    // users,
     selectedChannelId,
     channel,
     onOpen,
+    forceRefresh,
+    visible = true,
 }) {
+    // Create a ref to track if component is mounted
+    const isMountedRef = useRef(true);
+
+    // Define parentId early to avoid linter errors
     const parentId: any = null;
-    const [messages, setMessages] = useState<any>([]);
-    const {
-        data: messagesQuery,
-        loading: messageLoading,
-        refetch: refetchMessages,
-        subscribeToMore,
-    } = useMessagesQuery({
-        variables: {
+
+    // Simplified state - only keep loading state, rely on Apollo cache for data
+    const [loading, setLoading] = useState(false);
+    const [title, setTitle] = useState('');
+
+    // Only run queries/subscriptions if visible
+    const shouldQuery = !!channel?.id && visible;
+
+    // Memoize query variables to prevent unnecessary re-renders
+    const queryVariables = useMemo(
+        () => ({
             channelId: channel?.id?.toString(),
             parentId: parentId,
             limit: 10,
-            // sort: {
-            //     key: 'updatedAt',
-            //     value: SortEnum.Desc,
-            // },
-            //limit: 25,
+        }),
+        [channel?.id, parentId],
+    );
+
+    // Optimized message processing function
+    const processMessagesData = useCallback((messagesData: any[]) => {
+        if (!messagesData?.length) return null;
+
+        // Sort messages and return the latest one
+        const sortedMessages = [...messagesData].sort(
+            (a, b) =>
+                new Date(b?.updatedAt || b?.createdAt).getTime() - new Date(a?.updatedAt || a?.createdAt).getTime(),
+        );
+
+        return sortedMessages[0];
+    }, []);
+
+    // Optimized refetch function - consolidated all refetch logic
+    const optimizedRefetch = useCallback(
+        async (reason: string = 'manual') => {
+            if (!shouldQuery || !channel?.id || !isMountedRef.current) return null;
+
+            console.log(`Optimized refetch triggered: ${reason} for channel ${channel?.id}`);
+            setLoading(true);
+
+            try {
+                const result = await refetchMessages(queryVariables);
+                console.log(
+                    `Refetch completed: ${reason}, messages count: ${result?.data?.messages?.data?.length || 0}`,
+                );
+                return result;
+            } catch (error) {
+                console.error(`Refetch error (${reason}):`, error);
+                return null;
+            } finally {
+                if (isMountedRef.current) {
+                    setLoading(false);
+                }
+            }
         },
-        fetchPolicy: 'cache-and-network',
-        refetchWritePolicy: 'merge',
-    });
+        [shouldQuery, channel?.id, queryVariables],
+    );
 
+    // Query hooks for fetching messages - optimized configuration
     const {
-        data: newMessage,
-        loading: newMsgLoading,
-        error: newMsgError,
-    }: any = useOnChatMessageAddedSubscription({
-        variables: {
-            channelId: channel?.id?.toString(),
+        data: messagesQuery,
+        loading: messageLoading,
+        refetch: refetchMessages,
+        subscribeToMore,
+        error,
+    } = useMessagesQueryFromInbox({
+        variables: queryVariables,
+        skip: !shouldQuery,
+        fetchPolicy: 'cache-first', // Changed from cache-and-network for better performance
+        nextFetchPolicy: 'cache-first',
+        notifyOnNetworkStatusChange: true,
+        errorPolicy: 'all', // Handle partial errors gracefully
+        onCompleted: (data) => {
+            // Simplified onCompleted - minimal processing
+            if (!shouldQuery || !data?.messages?.data) return;
+
+            console.log(`Query completed for channel ${channel?.id}, messages: ${data.messages.data.length}`);
+        },
+        onError: (error) => {
+            if (!shouldQuery) return;
+            console.error(`Query error for channel ${channel?.id}:`, error);
         },
     });
 
+    // Derived state from query data - use Apollo cache as single source of truth
+    const messages = useMemo(() => messagesQuery?.messages?.data || [], [messagesQuery]);
+    const lastMessage = useMemo(() => processMessagesData(messages), [messages, processMessagesData]);
+
+    // Set mounted state on mount/unmount
+    useEffect(() => {
+        isMountedRef.current = true;
+        return () => {
+            isMountedRef.current = false;
+        };
+    }, []);
+
+    // Optimized focus effect - single refetch with debouncing
+    const firstRenderRef = useRef(true);
     useFocusEffect(
-        React.useCallback(() => {
-            // Do something when the screen is focused
-            refetchMessages({
-                channelId: channel?.id?.toString(),
-                parentId: parentId,
-                limit: 10,
-                // sort: {
-                //     key: 'updatedAt',
-                //     value: SortEnum.Desc,
-                // },
-                //limit: 25
-            });
-
-            return () => {
-                // Do something when the screen is unfocused
-                // Useful for cleanup functions
-            };
-        }, []),
-    );
+        useCallback(() => {
+            if (!channel?.id) return;
+
+            console.log('DialogsListItem focused for channel:', channel?.id);
 
-    React.useEffect(() => {
-        if (messagesQuery) {
-            if (messagesQuery?.messages?.data?.length) {
-                const msg = messagesQuery?.messages?.data;
-                setMessages((pre: any[]) => [...pre, ...msg]);
+            // Skip refresh on first render
+            if (firstRenderRef.current) {
+                firstRenderRef.current = false;
+                return;
             }
-        }
-    }, [messagesQuery]);
 
-    const lastMessage = useMemo(() => {
-        if (!messages?.length) {
-            return null;
+            // Debounced refetch on focus
+            const timeoutId = setTimeout(() => {
+                optimizedRefetch('focus');
+            }, 100);
+
+            return () => clearTimeout(timeoutId);
+        }, [channel?.id, optimizedRefetch]),
+    );
+
+    // Simplified effect for force refresh
+    useEffect(() => {
+        if (forceRefresh && shouldQuery) {
+            const timeoutId = setTimeout(() => {
+                optimizedRefetch('force');
+            }, 50);
+            return () => clearTimeout(timeoutId);
         }
-        // const { data } = messagesQuery.messages;
-        const data = messages;
-        const filteredData: any = data?.filter((p: any) => p?.message !== '');
-        // return filteredData[0];
-        let filteredLastMessage =
-            filteredData && filteredData?.length
-                ? filteredData?.reduce((a, b) => {
-                      return new Date(a?.updatedAt) > new Date(b?.updatedAt) ? a : b;
-                  }, []) ?? null
-                : null;
-        return filteredLastMessage;
-        //return data[data.length - 1];
-    }, [messages]);
+    }, [forceRefresh, shouldQuery, optimizedRefetch]);
 
+    // Channel members computation - optimized with better memoization
     const channelMembers = useMemo(
         () =>
             channel?.members
-                ?.filter((ch: any) => ch?.user?.id != currentUser?.id && ch?.user?.__typename == 'UserAccount')
-                ?.map((m: any) => m?.user) ?? null,
-        [currentUser, channel],
+                ?.filter((ch: any) => ch?.user?.id !== currentUser?.id && ch?.user?.__typename === 'UserAccount')
+                ?.map((m: any) => m?.user) ?? [],
+        [currentUser?.id, channel?.members],
     );
 
-    const title = useMemo(() => {
-        const titleString =
-            channelMembers
-                ?.map((u: any) => u?.givenName + ' ' + (u?.familyName ?? ''))
-                ?.filter((mu: any) => mu)
-                ?.join(', ') ?? '';
+    // Set title when channel members change
+    useEffect(() => {
+        if (channelMembers.length > 0 && isMountedRef.current) {
+            const titleString =
+                channelMembers
+                    ?.map((u: any) => `${u?.givenName || ''} ${u?.familyName || ''}`.trim())
+                    ?.filter(Boolean)
+                    ?.join(', ') || '';
+            setTitle(titleString);
+        }
+    }, [channelMembers]);
 
+    // Compute title with proper truncation
+    const displayTitle = useMemo(() => {
         const length = 30;
-        return titleString.length > length ? titleString.substring(0, length - 3) + '...' : titleString;
-    }, [channelMembers]);
+        return title.length > length ? title.substring(0, length - 3) + '...' : title;
+    }, [title]);
+
+    // Combined loading state
+    const isLoading = loading || messageLoading;
 
     return (
         <Pressable
-            onPress={() => channel?.id !== selectedChannelId && onOpen(channel?.id, title)}
-            borderWidth={'$1'}
-            borderRadius={'$md'}
-            borderColor={'$trueGray200'}
-            flex={1}
-            $dark-borderColor="$coolGray600"
-            $dark-backgroundColor="$trueGray700"
-            $light-backgroundColor="$trueGray50"
-            $light-borderColor="$trueGray200"
+            onPress={() => onOpen(channel?.id, displayTitle)}
+            className="flex-1 border-gray-200 rounded-md dark:border-gray-600 dark:bg-gray-700"
+            style={{ borderBottomWidth: 1, borderColor: '#e5e7eb', marginVertical: 0, paddingHorizontal: 10 }}
         >
-            <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'}>
+            {/* Optimized subscription handler */}
+            <SubscriptionHandler
+                subscribeToMore={subscribeToMore}
+                document={CHAT_MESSAGE_ADDED}
+                variables={{ channelId: channel?.id?.toString() }}
+                enabled={shouldQuery}
+                updateQuery={(prev, { subscriptionData }) => {
+                    if (!subscriptionData?.data?.chatMessageAdded || !isMountedRef.current) return prev;
+
+                    const newMessage = subscriptionData.data.chatMessageAdded;
+
+                    // Optimized cache update - check for duplicates more efficiently
+                    const existingMessages = prev?.messages;
+                    const messageExists = existingMessages?.data?.some((msg: any) => msg.id === newMessage.id);
+
+                    if (!messageExists) {
+                        return {
+                            ...prev,
+                            messages: {
+                                ...existingMessages,
+                                data: [...(existingMessages?.data || []), newMessage],
+                                totalCount: (existingMessages?.totalCount || 0) + 1,
+                            },
+                        };
+                    }
+                    return prev;
+                }}
+                onError={(error) => {
+                    console.error(`Subscription error for channel ${channel?.id}:`, error);
+                }}
+            />
+
+            <HStack space={'md'} className="flex-1 w-[100%] py-3 items-center">
+                <Box className="flex-[0.1] items-start pl-3">
                     <AvatarGroup>
                         {channelMembers &&
                             channelMembers?.length > 0 &&
-                            channelMembers?.slice(0, 2)?.map((ch: any, i: Number) => (
+                            channelMembers?.slice(0, 1)?.map((ch: any, i: Number) => (
                                 <Avatar
                                     key={'dialogs-list-' + i}
-                                    bg={'transparent'}
                                     size={'sm'}
-                                    top={i == 1 ? '$4' : '$0'}
-                                    right={i == 1 ? '-$2' : '$0'}
-                                    zIndex={i == 1 ? 5 : 1}
+                                    className={`bg-transparent top-[${i == 1 ? '4' : '0'}] right-[${
+                                        i == 1 ? '-2' : '0'
+                                    }] z-[${i == 1 ? 5 : 1}]`}
                                 >
                                     <AvatarFallbackText>{startCase(ch?.username?.charAt(0))}</AvatarFallbackText>
-                                    <AvatarImage
-                                        alt="user image"
-                                        style={{ borderRadius: 6, borderWidth: 2, borderColor: '#fff' }}
-                                        source={{
-                                            uri: ch?.picture,
-                                        }}
-                                    />
+                                    {channelMembers?.length > 1 && (
+                                        <AvatarBadge
+                                            style={{
+                                                width: '100%',
+                                                height: '100%',
+                                                backgroundColor: '#e5e7eb',
+                                                borderRadius: 5,
+                                            }}
+                                            className="items-center justify-center bg-gray-200 rounded-md"
+                                        >
+                                            <Text style={{ fontSize: 12, fontWeight: 'bold', color: '#000' }}>
+                                                {channelMembers?.length}
+                                            </Text>
+                                        </AvatarBadge>
+                                    )}
                                     {channelMembers?.length == 1 && (
-                                        <AvatarBadge style={{ width: 10, height: 10 }} bg="$green800" />
+                                        <>
+                                            <AvatarImage
+                                                alt="user image"
+                                                style={{ borderRadius: 6, borderWidth: 2, borderColor: '#fff' }}
+                                                source={{
+                                                    uri: ch?.picture,
+                                                }}
+                                            />
+                                            <AvatarBadge style={{ width: 10, height: 10 }} />
+                                        </>
                                     )}
                                 </Avatar>
                             ))}
                     </AvatarGroup>
                 </Box>
-                <Box flex={0.9}>
-                    {/* <HStack space={1} flex={1} direction={'row'} justifyContent={'center'} alignItems={'center'}>
-                        <Box flex={0.8}>
-                            <Text color="gray.600" fontSize="lg" flexWrap={'wrap'} fontWeight="semibold">
-                                {title}
-                            </Text>
-                            <Text color="gray.600" noOfLines={1}>
-                                {lastMessage?.message ?? ''}
-                            </Text>
-                        </Box>
-
-                        <Box flex={0.2}>
-                            <Text color="gray.500">{lastMessage ? createdAtText(lastMessage?.createdAt) : ''}</Text>
-                        </Box>
-                    </HStack> */}
+                <Box className="flex-1">
                     <LastMessageComponent
-                        title={title}
+                        key={`last-msg-${lastMessage?.id || 'none'}-${messages.length}`}
+                        title={displayTitle}
                         lastMessage={lastMessage}
-                        channelId={channel?.id}
-                        subscribeToNewMessages={() =>
-                            subscribeToMore({
-                                document: CHAT_MESSAGE_ADDED,
-                                variables: {
-                                    channelId: channel.id?.toString(),
-                                },
-                                updateQuery: (prev, { subscriptionData }: any) => {
-                                    if (!subscriptionData.data) return prev;
-                                    const newMessage: any = subscriptionData?.data?.chatMessageAdded;
-                                    const existingMessages: any = prev?.messages;
-                                    const previousData = existingMessages?.data
-                                        ? [...existingMessages.data, newMessage]
-                                        : [];
-                                    const totalMsgCount = existingMessages?.totalCount + 1;
-                                    const merged = {
-                                        ...prev,
-                                        messages: {
-                                            ...existingMessages,
-                                            data: previousData,
-                                            totalCount: totalMsgCount,
-                                        },
-                                    };
-                                    return merged;
-                                },
-                            })
-                        }
                     />
-                    {/* <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 LastMessageComponent = ({ subscribeToNewMessages, title, lastMessage, channelId }) => {
-    React.useEffect(() => subscribeToNewMessages(), [channelId]);
-    return (
-        <HStack space={'sm'} flex={1} justifyContent={'center'} alignItems={'center'}>
-            <Box flex={0.8}>
-                <Text color="$trueGray600" fontSize="$lg" flexWrap={'wrap'} fontWeight="$semibold">
-                    {title}
-                </Text>
-                <Text color="$trueGray600" numberOfLines={1}>
-                    {lastMessage?.message ?? ''}
-                </Text>
-            </Box>
-
-            <Box flex={0.2}>
-                <Text color="$trueGray500">{lastMessage ? createdAtText(lastMessage?.createdAt) : ''}</Text>
-            </Box>
-        </HStack>
-    );
-};
-
 export const DialogsListItem = React.memo(DialogsListItemComponent);