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

package/src/screens/inbox/containers/Dialogs.tsx

@@ -1,29 +1,20 @@
-import React, { useCallback, useMemo, useEffect, useState } from 'react';
-import {
-    FlatList,
-    Box,
-    Heading,
-    Input,
-    InputField,
-    Text,
-    Icon,
-    Center,
-    Spinner,
-} from '@admin-layout/gluestack-ui-mobile';
+import React, { useCallback, useEffect, useRef, useState, useMemo } from 'react';
+import { FlatList, Box, Heading, Input, InputField, Text, Center, Spinner } from '@admin-layout/gluestack-ui-mobile';
 import { Ionicons } from '@expo/vector-icons';
-import { useSelector, useDispatch } from 'react-redux';
-import { useNavigation, useRoute, useIsFocused, useFocusEffect } from '@react-navigation/native';
-import { orderBy, uniqBy, startCase } from 'lodash-es';
-import { DialogsListItem } from '../components/DialogsListItem';
-import { ServiceDialogsListItem } from '../components/ServiceDialogsListItem';
+import { useSelector, shallowEqual } from 'react-redux';
+import { useNavigation, useRoute, useFocusEffect } from '@react-navigation/native';
+import { DialogItem } from '../components/DialogItem';
+// import { useChannelsQuery, CHAT_MESSAGE_ADDED } from '../../../queries/inboxQueries';
 import {
     useGetChannelsByUserQuery,
-    useGetChannelsByUserWithServiceChannelsQuery,
-} from 'common/lib/generated/generated.js';
+    useGetChannelsByUserWithLastMessageQuery,
+    OnChatMessageAddedDocument,
+} from 'common/graphql';
 import { RoomType } from 'common';
 import { userSelector } from '@adminide-stack/user-auth0-client';
-import { CHANGE_SETTINGS_ACTION } from '@admin-layout/client';
 import { config } from '../config';
+import colors from 'tailwindcss/colors';
+import { SubscriptionHandler } from '../components/SubscriptionHandler';
 
 export interface InboxProps {
     channelFilters?: Record<string, unknown>;
@@ -34,224 +25,431 @@ export interface InboxProps {
 const DialogsComponent = (props: InboxProps) => {
     const { channelFilters: channelFilterProp, channelRole, supportServices } = props;
     const channelFilters = { ...channelFilterProp };
-    channelFilters.type = channelFilters?.type ?? RoomType.Direct;
+    // channelFilters.type = channelFilters?.type ?? RoomType.Direct;
+    const channelType = channelFilters?.type ?? RoomType.Direct;
+    channelFilters.type = supportServices ? [channelType, RoomType.Service] : RoomType.Direct;
     const { params } = useRoute<any>();
-    const auth = useSelector(userSelector);
-    const dispatch = useDispatch();
+    const auth = useSelector(userSelector, shallowEqual);
     const navigation = useNavigation<any>();
-    const isFocused = useIsFocused();
-    const [refreshing, setRefresh] = useState<boolean>(false);
-    // const [userDirectChannel, setUserDirectChannel] = useState<any>([]);
-
-    const {
-        data: userChannels,
-        loading: userChannelsLoading,
-        refetch: getChannelsRefetch,
-    } = useGetChannelsByUserWithServiceChannelsQuery({
+    // Local state for UI control - only keeping searchQuery as it's needed for local filtering
+    const [searchQuery, setSearchQuery] = useState('');
+
+    // Create a ref to track if component is mounted
+    const isMountedRef = useRef(true);
+    const focusRefreshRef = useRef<number | null>(null);
+    const lastRefreshTimeRef = useRef(Date.now());
+    const MIN_REFRESH_INTERVAL = 2000;
+
+    // Add lastNavigationTimestamp to track when the user navigates away
+    const lastNavigationTimestamp = useRef(0);
+    // Track active channel to prevent duplicate clicks on the same channel
+    const activeChannelRef = useRef<string | null>(null);
+    // Hold a timeout ref to reset active channel status
+    const resetActiveChannelTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+    // Apollo query with pagination and optimistic updates
+    const { data, loading, refetch, fetchMore, subscribeToMore } = useGetChannelsByUserWithLastMessageQuery({
         variables: {
             role: channelRole,
             criteria: channelFilters,
-            supportServices: supportServices ? true : false,
-            supportServiceCriteria: {
-                type: RoomType.Service,
-            },
+            // supportServices: false,
+            // supportServices: supportServices ? true : false,
+            // supportServiceCriteria: {
+            //     type: RoomType.Service,
+            // },
+            limit: 15,
+            skip: 0,
         },
+        notifyOnNetworkStatusChange: true,
+        fetchPolicy: 'cache-and-network',
     });
 
-    // const {
-    //     data: userChannels,
-    //     loading: userChannelsLoading,
-    //     refetch: getChannelsRefetch,
-    // } = useGetChannelsByUserQuery({
-    //     variables: {
-    //         role: channelRole,
-    //         criteria: channelFilters,
-    //     },
-    //     onCompleted: (data: any) => {
-    //         setRefresh(false);
-    //     },
-    // });
+    // Subscribe to new messages to update lastMessage in channels
+    // useEffect(() => {
+    //     if (!data?.channelsByUser?.length || !subscribeToMore) return;
 
-    useFocusEffect(
-        React.useCallback(() => {
-            // Do something when the screen is focused
-            setRefresh(false);
-            //getChannelsRefetch({ role: channelRole, criteria: channelFilters });
-            getChannelsRefetch({
-                role: channelRole,
-                criteria: channelFilters,
-                supportServices: supportServices ? true : false,
-                supportServiceCriteria: {
-                    type: RoomType.Service,
-                },
-            });
-            return () => {
-                // Do something when the screen is unfocused
-                // Useful for cleanup functions
-            };
-        }, [channelFilters]),
-    );
+    //     const subscriptions: (() => void)[] = [];
 
-    // const channels = React.useMemo(() => {
-    //     if (!userChannels?.channelsByUser?.length) return null;
-    //     let uChannels: any =
-    //         userChannels?.channelsByUser?.filter((c: any) =>
-    //             c.members.some((u: any) => u !== null && u?.user?.id != auth?.id && u.user.__typename == 'UserAccount'),
-    //         ) ?? [];
-    //     return (uChannels && orderBy(uChannels, ['updatedAt'], ['desc'])) || [];
-    // }, [userChannels]);
-
-    const channels = React.useMemo(() => {
-        const allChannels = [...(userChannels?.supportServiceChannels ?? []), ...(userChannels?.channelsByUser ?? [])];
-        let uChannels: any =
-            allChannels?.filter((c: any) =>
-                c.members.some((u: any) => u !== null && u?.user?.id != auth?.id && u.user.__typename == 'UserAccount'),
-            ) ?? [];
-        return (uChannels && orderBy(uChannels, ['updatedAt'], ['desc'])) || [];
-    }, [userChannels]);
+    //     // Subscribe to each channel for real-time lastMessage updates
+    //     data.channelsByUser.forEach(channel => {
+    //         if (!channel?.id) return;
 
-    // useEffect(() => {
-    //     setTimeout(() => {
-    //         dispatch({
-    //             type: CHANGE_SETTINGS_ACTION,
-    //             payload: {
-    //                 footerRender: false,
+    //         const unsubscribe = subscribeToMore({
+    //             document: OnChatMessageAddedDocument,
+    //             variables: {
+    //                 channelId: channel.id.toString(),
     //             },
-    //         } as any);
-    //     }, 0);
-    //     return () => {
-    //         dispatch({
-    //             type: CHANGE_SETTINGS_ACTION,
-    //             payload: {
-    //                 footerRender: true,
+    //             updateQuery: (prev, { subscriptionData }: any) => {
+    //                 if (!subscriptionData?.data?.chatMessageAdded || !isMountedRef.current) {
+    //                     return prev;
+    //                 }
+
+    //                 const newMessage = subscriptionData.data.chatMessageAdded;
+    //                 const channelId = newMessage.channel?.id;
+
+    //                 if (!channelId) return prev;
+
+    //                 // Update the specific channel's lastMessage
+    //                 const updatedChannels = (prev.channelsByUser || []).map(ch => {
+    //                     if (ch?.id === channelId) {
+    //                         return {
+    //                             ...ch,
+    //                             lastMessage: {
+    //                                 id: newMessage.id,
+    //                                 message: newMessage.message || '',
+    //                                 createdAt: newMessage.createdAt,
+    //                                 updatedAt: newMessage.updatedAt,
+    //                                 author: newMessage.author ? {
+    //                                     id: newMessage.author.id,
+    //                                     givenName: newMessage.author.givenName,
+    //                                     familyName: newMessage.author.familyName,
+    //                                     username: newMessage.author.username,
+    //                                 } : null,
+    //                                 files: newMessage.files ? {
+    //                                     totalCount: newMessage.files.totalCount || 0,
+    //                                     data: (newMessage.files.data || []).map(file => ({
+    //                                         id: file.id,
+    //                                         name: file.name,
+    //                                         extension: file.extension,
+    //                                         mimeType: file.mimeType,
+    //                                     }))
+    //                                 } : null,
+    //                             },
+    //                             updatedAt: newMessage.createdAt,
+    //                             lastPostAt: newMessage.createdAt,
+    //                         };
+    //                     }
+    //                     return ch;
+    //                 });
+
+    //                 return {
+    //                     ...prev,
+    //                     channelsByUser: updatedChannels,
+    //                 };
+    //             },
+    //             onError: (error) => {
+    //                 console.error(`LastMessage subscription error for channel ${channel.id}:`, error);
     //             },
-    //         } as any);
+    //         });
+
+    //         subscriptions.push(unsubscribe);
+    //     });
+
+    //     // Cleanup subscriptions
+    //     return () => {
+    //         subscriptions.forEach(unsub => {
+    //             try {
+    //                 unsub?.();
+    //             } catch (error) {
+    //                 console.error('Error unsubscribing from lastMessage updates:', error);
+    //             }
+    //         });
     //     };
-    // }, []);
+    // }, [data?.channelsByUser, subscribeToMore]);
 
-    // useEffect(() => {
-    //     if (userChannels?.channelsByUser) {
-    //         if (userChannels?.channelsByUser?.length == 0) {
-    //             setUserDirectChannel([]);
-    //         }
-    //         //Direct channel
-    //         let userDirectChannels: any =
-    //             userChannels?.channelsByUser
-    //                 ?.filter((i: any) => i.type == 'DIRECT')
-    //                 ?.filter((c: any) =>
-    //                     c.members.some((u: any) => u?.user?.id != auth?.id && u.user.__typename == 'UserAccount'),
-    //                 ) ?? [];
-
-    //         if (userDirectChannels?.length > 0) setUserDirectChannel(userDirectChannels);
-    //     }
-    // }, [userChannels?.channelsByUser]);
-
-    const handleSelectChannel = useCallback((id: any, title: any) => {
-        if (params?.channelId) {
-            navigation.navigate(config.INBOX_MESSEGE_PATH as any, {
-                channelId: params?.channelId,
-                role: params?.role,
-                title: params?.title ?? null,
+    // Memoize processChannels and sortChannels to avoid unnecessary recalculations
+    const processChannels = useCallback(
+        (rawChannels = []) => {
+            if (!rawChannels?.length) return [];
+            return rawChannels.filter((c) => {
+                if (!c?.members) return false;
+                return c.members.some(
+                    (member) => member?.user && member.user.id !== auth?.id && member.user.__typename === 'UserAccount',
+                );
+            });
+        },
+        [auth?.id],
+    );
+
+    const sortChannels = useCallback((channels) => {
+        if (!channels?.length) return [];
+        return channels;
+        // return [...channels].sort((a, b) => {
+        //     const dateA = new Date(a?.updatedAt || a?.createdAt).getTime();
+        //     const dateB = new Date(b?.updatedAt || b?.createdAt).getTime();
+        //     return dateB - dateA;
+        // });
+    }, []);
+
+    // Navigation handlers with debounce to prevent double taps
+    const handleSelectChannel = useCallback(
+        (id, title) => {
+            if (activeChannelRef.current === id) {
+                console.log('📱 Ignoring repeated tap on channel:', id);
+                return;
+            }
+            activeChannelRef.current = id;
+            if (resetActiveChannelTimeoutRef.current) {
+                clearTimeout(resetActiveChannelTimeoutRef.current);
+            }
+            resetActiveChannelTimeoutRef.current = setTimeout(() => {
+                activeChannelRef.current = null;
+            }, 2000);
+            console.log('📱 Navigating to channel:', id);
+            navigation.navigate(config.INBOX_MESSEGE_PATH, {
+                channelId: id,
+                role: channelRole,
+                title: title,
                 hideTabBar: true,
+                timestamp: new Date().getTime(),
+                orgName: params?.orgName,
             });
-        } else {
-            navigation.navigate(config.INBOX_MESSEGE_PATH as any, {
+        },
+        [navigation, channelRole],
+    );
+
+    const handleSelectServiceChannel = useCallback(
+        (id, title, postParentId) => {
+            if (activeChannelRef.current === id) {
+                console.log('📱 Ignoring repeated tap on service channel:', id);
+                return;
+            }
+            activeChannelRef.current = id;
+            if (resetActiveChannelTimeoutRef.current) {
+                clearTimeout(resetActiveChannelTimeoutRef.current);
+            }
+            resetActiveChannelTimeoutRef.current = setTimeout(() => {
+                activeChannelRef.current = null;
+            }, 2000);
+            console.log('📱 Navigating to service channel:', id);
+            navigation.navigate(postParentId || postParentId === 0 ? config.THREAD_MESSEGE_PATH : config.THREADS_PATH, {
                 channelId: id,
                 role: channelRole,
                 title: title,
+                postParentId: postParentId,
                 hideTabBar: true,
+                orgName: params?.orgName,
             });
-        }
+        },
+        [navigation, channelRole],
+    );
+
+    // Handle search query changes
+    const handleSearchChange = useCallback((text: string) => {
+        setSearchQuery(text);
     }, []);
 
-    const handleSelectServiceChannel = useCallback((id: any, title: any, postParentId: any) => {
-        if (params?.channelId) {
-            navigation.navigate(
-                params?.postParentId || params?.postParentId == 0
-                    ? config.THREAD_MESSEGE_PATH
-                    : (config.THREADS_PATH as any),
-                {
-                    channelId: params?.channelId,
-                    role: params?.role,
-                    title: params?.title ?? null,
-                    postParentId: params?.postParentId,
-                    hideTabBar: true,
-                },
+    // Memoize allChannels and channels
+    // const allChannels = useMemo(
+    //     () => [...(data?.supportServiceChannels || []), ...(data?.channelsByUser || [])],
+    //     [data],
+    // );
+    const allChannels = useMemo(() => [...(data?.channelsByUser || [])], [data]);
+    const channels = useMemo(
+        () => sortChannels(processChannels(allChannels)),
+        [allChannels, processChannels, sortChannels],
+    );
+
+    // Memoize filteredChannels
+    const displayChannels = useMemo(() => {
+        if (!searchQuery.trim()) return channels;
+        const query = searchQuery.toLowerCase();
+        return channels.filter((channel) => {
+            if (channel.title && channel.title.toLowerCase().includes(query)) return true;
+            if (channel.members) {
+                return channel.members.some((member) => {
+                    const user = member?.user;
+                    if (!user) return false;
+                    const fullName = `${user.givenName || ''} ${user.familyName || ''}`.toLowerCase();
+                    return fullName.includes(query) || (user.username && user.username.toLowerCase().includes(query));
+                });
+            }
+            return false;
+        });
+    }, [channels, searchQuery]);
+
+    // Memoize renderItem to avoid re-renders
+    const renderItem = useCallback(
+        ({ item: channel }) => {
+            const key = `${channel.type === RoomType.Service ? 'service' : 'direct'}-${channel.id}`;
+            return (
+                <DialogItem
+                    key={key}
+                    onOpen={channel?.type === RoomType.Service ? handleSelectServiceChannel : handleSelectChannel}
+                    currentUser={auth}
+                    channel={channel}
+                />
             );
-        } else {
-            navigation.navigate(
-                postParentId || postParentId == 0 ? config.THREAD_MESSEGE_PATH : (config.THREADS_PATH as any),
-                {
-                    channelId: id,
-                    role: channelRole,
-                    title: title,
-                    postParentId: postParentId,
-                    hideTabBar: true,
-                },
+        },
+        [auth, handleSelectChannel, handleSelectServiceChannel],
+    );
+
+    // Memoize ListFooterComponent and ListEmptyComponent
+    const ListFooterComponent = useMemo(
+        () =>
+            loading ? (
+                <Center className="py-4">
+                    <Spinner color={colors.blue[500]} size="small" />
+                </Center>
+            ) : null,
+        [loading],
+    );
+
+    const ListEmptyComponent = useMemo(() => {
+        if (loading && displayChannels.length === 0) {
+            return (
+                <Center className="flex-1 justify-center items-center" style={{ height: 300 }}>
+                    <Spinner color={colors.blue[500]} size="large" />
+                    <Text className="mt-4 text-gray-500">Loading conversations...</Text>
+                </Center>
             );
         }
-    }, []);
+        return (
+            <Box className="p-6">
+                <Box className="mb-6">
+                    <Heading className="text-2xl font-bold">Direct Messages</Heading>
+                    <Text className="text-gray-600 mt-1">Private conversations with other users</Text>
+                </Box>
+                <Input
+                    className="mb-8 h-[50] rounded-md border-gray-300 border"
+                    size="md"
+                    style={{
+                        paddingVertical: 8,
+                        marginBottom: 10,
+                        borderColor: '#d1d5db',
+                        borderRadius: 10,
+                    }}
+                >
+                    <InputField
+                        placeholder="Search messages..."
+                        onChangeText={handleSearchChange}
+                        value={searchQuery}
+                    />
+                </Input>
+                <Center className="items-center" style={{ paddingVertical: 5 }}>
+                    <Box className="w-16 h-16 rounded-full bg-blue-500 flex items-center justify-center mb-5">
+                        <Ionicons name="chatbubble-ellipses" size={30} color="white" />
+                    </Box>
+                    <Text className="text-2xl font-bold text-center mb-2">No messages yet</Text>
+                    <Text className="text-gray-600 text-center mb-8">
+                        When you start conversations with others,{'\n'}
+                        they'll appear here.
+                    </Text>
+                </Center>
+            </Box>
+        );
+    }, [loading, displayChannels.length, handleSearchChange, searchQuery]);
 
-    const handleRefresh = useCallback(() => {
-        //if(userChannels?.channelsByUser?.length != channels?.length)setRefresh(true);
-        setRefresh(true);
-        getChannelsRefetch({ role: channelRole, criteria: channelFilters })?.finally(() => setRefresh(false));
+    // Handle component cleanup
+    useEffect(() => {
+        return () => {
+            isMountedRef.current = false;
+            // Clear any active timeouts
+            if (resetActiveChannelTimeoutRef.current) {
+                clearTimeout(resetActiveChannelTimeoutRef.current);
+            }
+        };
     }, []);
 
+    // Reset activeChannelRef when returning to this screen
+    useFocusEffect(
+        useCallback(() => {
+            // When screen gains focus, check if we're coming back from a detail screen
+            const now = Date.now();
+
+            // Reset active channel ref if enough time has passed since last navigation
+            if (now - lastNavigationTimestamp.current > 300) {
+                activeChannelRef.current = null;
+                console.log('Reset active channel reference on focus');
+            }
+
+            return () => {
+                // When losing focus, update the timestamp
+                lastNavigationTimestamp.current = Date.now();
+            };
+        }, []),
+    );
+
+    // Handle refresh on focus
+    useFocusEffect(
+        useCallback(() => {
+            console.log('📱 Focus effect triggered for Dialogs screen');
+
+            // Refresh when returning to the screen if enough time has passed
+            const performRefresh = () => {
+                const now = Date.now();
+                if (now - lastRefreshTimeRef.current < MIN_REFRESH_INTERVAL) {
+                    console.log('⏩ Skipping refresh: too soon after previous refresh');
+                    return;
+                }
+
+                console.log('🔄 Performing refresh on screen focus');
+                if (isMountedRef.current) {
+                    lastRefreshTimeRef.current = now;
+                    refetch();
+                }
+            };
+
+            const focusRefreshTimeout = setTimeout(performRefresh, 100);
+            return () => clearTimeout(focusRefreshTimeout);
+        }, [refetch]),
+    );
+
+    // Handle pull-to-refresh
+    const handlePullToRefresh = useCallback(() => {
+        const now = Date.now();
+        focusRefreshRef.current = now;
+
+        console.log('🔄 Pull-to-refresh triggered');
+        refetch();
+    }, [refetch]);
+
+    // Load more channels
+    const handleLoadMore = useCallback(() => {
+        if (loading || !data || channels.length < 10) {
+            console.log('Skip loading more: already loading or all data loaded');
+            return;
+        }
+
+        console.log('Loading more channels');
+
+        fetchMore({
+            variables: {
+                skip: channels.length,
+            },
+            updateQuery: (prev, { fetchMoreResult }) => {
+                if (!fetchMoreResult) return prev;
+
+                // Combine previous and new results
+                return {
+                    ...fetchMoreResult,
+                    channelsByUser: [...(prev.channelsByUser || []), ...(fetchMoreResult.channelsByUser || [])],
+                    // supportServiceChannels: [
+                    //     ...(prev.supportServiceChannels || []),
+                    //     ...(fetchMoreResult.supportServiceChannels || []),
+                    // ],
+                };
+            },
+        }).catch((error) => {
+            console.error('Error loading more channels:', error);
+        });
+    }, [fetchMore, loading, data, channels.length]);
+
     return (
-        <Box p={'$2'}>
+        <Box className="p-2">
             <FlatList
-                data={channels && channels?.length > 0 ? channels : []}
-                onRefresh={handleRefresh}
-                refreshing={refreshing}
+                data={displayChannels}
+                onRefresh={handlePullToRefresh}
+                refreshing={loading}
                 contentContainerStyle={{ minHeight: '100%' }}
-                ItemSeparatorComponent={() => <Box height="$0.5" backgroundColor="$gray200" />}
-                renderItem={({ item: channel }: any) =>
-                    channel?.type === RoomType.Service ? (
-                        <ServiceDialogsListItem
-                            onOpen={handleSelectServiceChannel}
-                            currentUser={auth}
-                            channel={channel}
-                            refreshing={refreshing}
-                            selectedChannelId={params?.channelId}
-                            role={channelRole}
-                        />
-                    ) : (
-                        <DialogsListItem
-                            onOpen={handleSelectChannel}
-                            currentUser={auth}
-                            channel={channel}
-                            selectedChannelId={params?.channelId}
-                        />
-                    )
-                }
-                ListEmptyComponent={() => (
-                    <>
-                        {userChannelsLoading ? (
-                            <Center flex={1} justifyContent="center" alignItems="center">
-                                <Spinner color={'$blue500'} />
-                            </Center>
-                        ) : (
-                            <Box p={'$5'}>
-                                <Heading>Chat</Heading>
-                                <Input
-                                    height={50}
-                                    mt={'$3'}
-                                    borderRadius={50}
-                                    borderColor={'$trueGray200'}
-                                    borderWidth={'$1'}
-                                >
-                                    <InputField placeholder="Search" />
-                                </Input>
-                                <Center mt={'$6'}>
-                                    <Ionicons name="chatbubbles" size={50} />
-                                    <Text>You don't have any messages yet!</Text>
-                                </Center>
-                            </Box>
-                        )}
-                    </>
+                ItemSeparatorComponent={React.useCallback(
+                    () => (
+                        <Box className="h-0.5 bg-gray-200" />
+                    ),
+                    [],
                 )}
-                keyExtractor={(item, index) => 'key' + index}
+                renderItem={renderItem}
+                ListFooterComponent={ListFooterComponent}
+                onEndReached={handleLoadMore}
+                onEndReachedThreshold={0.5}
+                initialNumToRender={5}
+                maxToRenderPerBatch={5}
+                windowSize={5}
+                removeClippedSubviews={true}
+                updateCellsBatchingPeriod={100}
+                getItemLayout={React.useCallback((data, index) => ({ length: 80, offset: 80 * index, index }), [])}
+                keyExtractor={React.useCallback((item) => `channel-${item.id}`, [])}
+                ListEmptyComponent={ListEmptyComponent}
             />
         </Box>
     );