@messenger-box/platform-mobile 10.0.3-alpha.40 → 10.0.3-alpha.46

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

@@ -1,15 +1,16 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+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 } from 'react-redux';
 import { useNavigation, useRoute, useFocusEffect } from '@react-navigation/native';
 import { DialogsListItem } from '../components/DialogsListItem';
 import { ServiceDialogsListItem } from '../components/ServiceDialogsListItem';
-import { useGetChannelsByUserWithServiceChannelsQuery, OnChatMessageAddedDocument } from 'common/graphql';
+import { useChannelsQuery, CHAT_MESSAGE_ADDED } from '../../../queries/inboxQueries';
 import { RoomType } from 'common';
 import { userSelector } from '@adminide-stack/user-auth0-client';
 import { config } from '../config';
 import colors from 'tailwindcss/colors';
+import { SubscriptionHandler } from '../components/SubscriptionHandler';
 
 export interface InboxProps {
     channelFilters?: Record<string, unknown>;
@@ -24,7 +25,7 @@ const DialogsComponent = (props: InboxProps) => {
     const { params } = useRoute<any>();
     const auth = useSelector(userSelector);
     const navigation = useNavigation<any>();
-
+    console.log('---dialogs component---orgName---', params?.orgName);
     // Local state for UI control
     const [searchQuery, setSearchQuery] = useState('');
     const [selectedChannelId, setSelectedChannelId] = useState<string | null>(params?.channelId || null);
@@ -45,7 +46,7 @@ const DialogsComponent = (props: InboxProps) => {
     const resetActiveChannelTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
     // Apollo query with pagination and optimistic updates
-    const { data, loading, refetch, fetchMore, subscribeToMore } = useGetChannelsByUserWithServiceChannelsQuery({
+    const { data, loading, refetch, fetchMore, subscribeToMore } = useChannelsQuery({
         variables: {
             role: channelRole,
             criteria: channelFilters,
@@ -56,167 +57,203 @@ const DialogsComponent = (props: InboxProps) => {
             limit: 15,
             skip: 0,
         },
-        fetchPolicy: 'cache-and-network',
-        nextFetchPolicy: 'network-only',
         notifyOnNetworkStatusChange: true,
     });
 
-    // Process the channels from the query response
+    // Memoize processChannels and sortChannels to avoid unnecessary recalculations
     const processChannels = useCallback(
         (rawChannels = []) => {
-            if (!rawChannels || !rawChannels.length) return [];
-
-            // Filter out channels without valid members
-            const filteredChannels = rawChannels.filter((c) => {
-                if (!c || !c.members) return false;
-
-                // Early return pattern for better performance
-                for (const member of c.members) {
-                    if (
-                        member &&
-                        member.user &&
-                        member.user.id !== auth?.id &&
-                        member.user.__typename === 'UserAccount'
-                    ) {
-                        return true;
-                    }
-                }
-                return false;
-            });
-
-            // Process channels to ensure lastMessage property is properly structured
-            return filteredChannels.map((channel) => {
-                // If channel has a lastMessage, ensure it's properly formatted
-                if (channel.lastMessage) {
-                    return {
-                        ...channel,
-                        lastMessage: {
-                            ...channel.lastMessage,
-                            // Ensure these essential properties exist
-                            id: channel.lastMessage.id,
-                            message: channel.lastMessage.message,
-                            createdAt: channel.lastMessage.createdAt || channel.lastMessage.updatedAt,
-                            updatedAt: channel.lastMessage.updatedAt || channel.lastMessage.createdAt,
-                            userId: channel.lastMessage.userId,
-                            channelId: channel.lastMessage.channelId || channel.id,
-                        },
-                    };
-                }
-                return channel;
+            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],
     );
 
-    // Sort channels by most recent activity
     const sortChannels = useCallback((channels) => {
-        if (!channels || !channels.length) return [];
-
+        if (!channels?.length) return [];
         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; // Newest first
+            return dateB - dateA;
         });
     }, []);
 
-    // Combine data from both channel types
-    const allChannels = [...(data?.supportServiceChannels || []), ...(data?.channelsByUser || [])];
+    // 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);
+            setSelectedChannelId(id);
+            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,
+            });
+        },
+        [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);
+            setSelectedChannelId(id);
+            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);
+    }, []);
 
-    // Process and sort the channels
-    const channels = sortChannels(processChannels(allChannels));
+    // Memoize allChannels and channels
+    const allChannels = useMemo(
+        () => [...(data?.supportServiceChannels || []), ...(data?.channelsByUser || [])],
+        [data],
+    );
+    const channels = useMemo(
+        () => sortChannels(processChannels(allChannels)),
+        [allChannels, processChannels, sortChannels],
+    );
 
-    // Set up subscription for real-time message updates
-    useEffect(() => {
-        if (!auth || !auth.id) return;
-
-        console.log('📱 Setting up global message subscription for dialog updates');
-
-        const unsubscribe = subscribeToMore({
-            document: OnChatMessageAddedDocument,
-            variables: {}, // No specific channel ID - we'll handle all messages
-            updateQuery: (prev, { subscriptionData }) => {
-                try {
-                    if (!subscriptionData.data || !isMountedRef.current) return prev;
-
-                    const subData = subscriptionData.data as any;
-                    const newMessage = subData.chatMessageAdded;
-
-                    console.log('📱 Dialog subscription received message update:', newMessage?.id);
-
-                    // Skip if no message or no channelId
-                    if (!newMessage || !newMessage.channelId) return prev;
-
-                    // Find the channel this message belongs to
-                    const channelId = newMessage.channelId.toString();
-
-                    // Find which array contains this channel (direct or service)
-                    let foundInDirectChannels = false;
-                    let foundInServiceChannels = false;
-
-                    // Check if this channel exists in direct channels
-                    const directChannelIndex = prev.channelsByUser?.findIndex((c) => c.id.toString() === channelId);
-                    if (directChannelIndex !== undefined && directChannelIndex >= 0) {
-                        foundInDirectChannels = true;
-                    }
-
-                    // Check if this channel exists in service channels
-                    const serviceChannelIndex = prev.supportServiceChannels?.findIndex(
-                        (c) => c.id.toString() === channelId,
-                    );
-                    if (serviceChannelIndex !== undefined && serviceChannelIndex >= 0) {
-                        foundInServiceChannels = true;
-                    }
-
-                    // Create a deep copy of the previous state to avoid mutating it
-                    const result = {
-                        ...prev,
-                        channelsByUser: [...(prev.channelsByUser || [])],
-                        supportServiceChannels: [...(prev.supportServiceChannels || [])],
-                    };
-
-                    // Optimistically update the channel with the new message
-                    if (foundInDirectChannels && directChannelIndex >= 0) {
-                        // Update the direct channel
-                        const channel = { ...result.channelsByUser[directChannelIndex] } as any;
-
-                        // Update lastMessage
-                        channel.lastMessage = newMessage;
-
-                        // Update timestamp to move to top of sorted list
-                        channel.updatedAt = newMessage.createdAt || new Date().toISOString();
-
-                        // Replace the channel in the array
-                        result.channelsByUser[directChannelIndex] = channel;
-                    }
-
-                    if (foundInServiceChannels && serviceChannelIndex >= 0) {
-                        // Update the service channel
-                        const channel = { ...result.supportServiceChannels[serviceChannelIndex] } as any;
-
-                        // Update lastMessage
-                        channel.lastMessage = newMessage;
-
-                        // Update timestamp to move to top of sorted list
-                        channel.updatedAt = newMessage.createdAt || new Date().toISOString();
-
-                        // Replace the channel in the array
-                        result.supportServiceChannels[serviceChannelIndex] = channel;
-                    }
-
-                    return result;
-                } catch (error) {
-                    console.error('Error in dialog subscription handler:', error);
-                    return prev;
-                }
-            },
+    // 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]);
 
-        // Clean up subscription when component unmounts
-        return () => {
-            console.log('📱 Cleaning up dialog message subscription');
-            unsubscribe();
-        };
-    }, [auth?.id, subscribeToMore]);
+    // Memoize renderItem to avoid re-renders
+    const renderItem = useCallback(
+        ({ item: channel }) => {
+            const key = `${channel.type === RoomType.Service ? 'service' : 'direct'}-${channel.id}`;
+            return channel?.type === RoomType.Service ? (
+                <ServiceDialogsListItem
+                    key={key}
+                    onOpen={handleSelectServiceChannel}
+                    currentUser={auth}
+                    channel={channel}
+                    refreshing={loading}
+                    selectedChannelId={selectedChannelId}
+                    role={channelRole}
+                />
+            ) : (
+                <DialogsListItem
+                    key={key}
+                    onOpen={handleSelectChannel}
+                    currentUser={auth}
+                    channel={channel}
+                    selectedChannelId={selectedChannelId}
+                    forceRefresh={true}
+                />
+            );
+        },
+        [auth, channelRole, handleSelectChannel, handleSelectServiceChannel, loading, selectedChannelId],
+    );
+
+    // Memoize ListFooterComponent and ListEmptyComponent
+    const ListFooterComponent = useMemo(
+        () =>
+            isLoadingMore ? (
+                <Center className="py-4">
+                    <Spinner color={colors.blue[500]} size="small" />
+                </Center>
+            ) : null,
+        [isLoadingMore],
+    );
+
+    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]);
 
     // Handle component cleanup
     useEffect(() => {
@@ -318,158 +355,27 @@ const DialogsComponent = (props: InboxProps) => {
         });
     }, [fetchMore, isLoadingMore, data, channels.length, page]);
 
-    // Navigation handlers with debounce to prevent double taps
-    const handleSelectChannel = useCallback(
-        (id, title) => {
-            // Return early if this channel is already active (prevents double navigation)
-            if (activeChannelRef.current === id) {
-                console.log('📱 Ignoring repeated tap on channel:', id);
-                return;
-            }
-
-            // Set this channel as active
-            activeChannelRef.current = id;
-
-            // Clear any existing timeout
-            if (resetActiveChannelTimeoutRef.current) {
-                clearTimeout(resetActiveChannelTimeoutRef.current);
-            }
-
-            // Set a timeout to clear the active channel after 2 seconds
-            // This prevents the active state from getting stuck if navigation fails
-            resetActiveChannelTimeoutRef.current = setTimeout(() => {
-                activeChannelRef.current = null;
-            }, 2000);
-
-            setSelectedChannelId(id);
-
-            console.log('📱 Navigating to channel:', id);
-
-            navigation.navigate(config.INBOX_MESSEGE_PATH, {
-                channelId: id,
-                role: channelRole,
-                title: title,
-                hideTabBar: true,
-                timestamp: new Date().getTime(),
-            });
-        },
-        [navigation, channelRole],
-    );
-
-    const handleSelectServiceChannel = useCallback(
-        (id, title, postParentId) => {
-            // Return early if this channel is already active (prevents double navigation)
-            if (activeChannelRef.current === id) {
-                console.log('📱 Ignoring repeated tap on service channel:', id);
-                return;
-            }
-
-            // Set this channel as active
-            activeChannelRef.current = id;
-
-            // Clear any existing timeout
-            if (resetActiveChannelTimeoutRef.current) {
-                clearTimeout(resetActiveChannelTimeoutRef.current);
-            }
-
-            // Set a timeout to clear the active channel after 2 seconds
-            resetActiveChannelTimeoutRef.current = setTimeout(() => {
-                activeChannelRef.current = null;
-            }, 2000);
-
-            setSelectedChannelId(id);
-
-            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,
-            });
-        },
-        [navigation, channelRole],
-    );
-
-    // Handle search query changes
-    const handleSearchChange = useCallback((text: string) => {
-        setSearchQuery(text);
-    }, []);
-
-    // Filter channels by search query
-    const filteredChannels = useCallback(() => {
-        if (!searchQuery.trim()) return channels;
-
-        const query = searchQuery.toLowerCase();
-        return channels.filter((channel) => {
-            // Check if the channel title contains the search query
-            if (channel.title && channel.title.toLowerCase().includes(query)) {
-                return true;
-            }
-
-            // Check if any member's name contains the search query
-            if (channel.members) {
-                for (const member of channel.members) {
-                    const user = member?.user;
-                    if (!user) continue;
-
-                    const fullName = `${user.givenName || ''} ${user.familyName || ''}`.toLowerCase();
-                    if (fullName.includes(query)) {
-                        return true;
-                    }
-
-                    if (user.username && user.username.toLowerCase().includes(query)) {
-                        return true;
-                    }
-                }
-            }
-
-            return false;
-        });
-    }, [channels, searchQuery]);
-
-    const displayChannels = filteredChannels();
-
     return (
         <Box className="p-2">
+            <SubscriptionHandler
+                subscribeToMore={subscribeToMore}
+                document={CHAT_MESSAGE_ADDED}
+                variables={{}}
+                updateQuery={undefined}
+            />
             <FlatList
                 data={displayChannels}
                 onRefresh={handlePullToRefresh}
                 refreshing={loading && !isLoadingMore}
                 contentContainerStyle={{ minHeight: '100%' }}
-                ItemSeparatorComponent={() => <Box className="h-0.5 bg-gray-200" />}
-                renderItem={({ item: channel }) => {
-                    const key = `${channel.type === RoomType.Service ? 'service' : 'direct'}-${channel.id}`;
-
-                    return channel?.type === RoomType.Service ? (
-                        <ServiceDialogsListItem
-                            key={key}
-                            onOpen={handleSelectServiceChannel}
-                            currentUser={auth}
-                            channel={channel}
-                            refreshing={loading}
-                            selectedChannelId={selectedChannelId}
-                            role={channelRole}
-                        />
-                    ) : (
-                        <DialogsListItem
-                            key={key}
-                            onOpen={handleSelectChannel}
-                            currentUser={auth}
-                            channel={channel}
-                            selectedChannelId={selectedChannelId}
-                            forceRefresh={true}
-                        />
-                    );
-                }}
-                ListFooterComponent={() =>
-                    isLoadingMore ? (
-                        <Center className="py-4">
-                            <Spinner color={colors.blue[500]} size="small" />
-                        </Center>
-                    ) : null
-                }
+                ItemSeparatorComponent={React.useCallback(
+                    () => (
+                        <Box className="h-0.5 bg-gray-200" />
+                    ),
+                    [],
+                )}
+                renderItem={renderItem}
+                ListFooterComponent={ListFooterComponent}
                 onEndReached={handleLoadMore}
                 onEndReachedThreshold={0.5}
                 initialNumToRender={5}
@@ -477,59 +383,9 @@ const DialogsComponent = (props: InboxProps) => {
                 windowSize={5}
                 removeClippedSubviews={true}
                 updateCellsBatchingPeriod={100}
-                getItemLayout={(data, index) => ({ length: 80, offset: 80 * index, index })}
-                keyExtractor={(item) => `channel-${item.id}`}
-                ListEmptyComponent={() => {
-                    // Show spinner during initial loading
-                    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>
-                        );
-                    }
-
-                    // Show empty state when no channels and not loading
-                    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>
-                    );
-                }}
+                getItemLayout={React.useCallback((data, index) => ({ length: 80, offset: 80 * index, index }), [])}
+                keyExtractor={React.useCallback((item) => `channel-${item.id}`, [])}
+                ListEmptyComponent={ListEmptyComponent}
             />
         </Box>
     );

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

@@ -2,7 +2,7 @@ import React, { useCallback, useState } from 'react';
 import { FlatList, Box } from '@admin-layout/gluestack-ui-mobile';
 import { useSelector, useDispatch } from 'react-redux';
 import { useNavigation, useRoute, useIsFocused, useFocusEffect } from '@react-navigation/native';
-import { useSupportServiceChannelsQuery } from 'common/graphql';
+import { useServiceChannelsQuery } from '../../../queries/inboxQueries';
 import { userSelector } from '@adminide-stack/user-auth0-client';
 import { CHANGE_SETTINGS_ACTION } from '@admin-layout/client';
 import { SupportServiceDialogsListItem } from '../components/SupportServiceDialogsListItem';
@@ -27,7 +27,7 @@ const SupportServiceDialogsComponent = (props: SupportServiceInboxProps) => {
         data: serviceChannels,
         loading: serviceChannelsLoading,
         refetch: getServiceChannelsRefetch,
-    } = useSupportServiceChannelsQuery({
+    } = useServiceChannelsQuery({
         variables: {
             criteria: { type: 'SERVICE' },
         },