@messenger-box/platform-mobile 10.0.3-alpha.34 → 10.0.3-alpha.37

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

@@ -1,45 +1,15 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } 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 { orderBy } from 'lodash-es';
 import { DialogsListItem } from '../components/DialogsListItem';
 import { ServiceDialogsListItem } from '../components/ServiceDialogsListItem';
-import { useGetChannelsByUserWithServiceChannelsQuery } from 'common/graphql';
+import { useGetChannelsByUserWithServiceChannelsQuery, OnChatMessageAddedDocument } from 'common/graphql';
 import { RoomType } from 'common';
 import { userSelector } from '@adminide-stack/user-auth0-client';
 import { config } from '../config';
 import colors from 'tailwindcss/colors';
-import { dialogsXstate } from './workflow/dialogs-xstate';
-
-// Define custom actions and states for our component
-const Actions = {
-    INITIAL_CONTEXT: 'INITIAL_CONTEXT',
-    ERROR_HANDLED: 'ERROR_HANDLED',
-    FETCH_CHANNELS: 'FETCH_CHANNELS',
-    APPEND_CHANNELS: 'APPEND_CHANNELS',
-    REFRESH_CHANNELS: 'REFRESH_CHANNELS',
-    SELECT_CHANNEL: 'SELECT_CHANNEL',
-    START_LOADING: 'START_LOADING',
-    STOP_LOADING: 'STOP_LOADING',
-    LOAD_MORE_CHANNELS: 'LOAD_MORE_CHANNELS',
-    SET_SEARCH_QUERY: 'SET_SEARCH_QUERY',
-};
-
-const BaseState = {
-    Idle: 'idle',
-    Error: 'error',
-    Loading: 'loading',
-    Done: 'done',
-    FetchChannels: 'fetchChannels',
-};
-
-const MainState = {
-    RefreshChannels: 'refreshChannels',
-    SelectChannel: 'selectChannel',
-    LoadMoreChannels: 'loadMoreChannels',
-};
 
 export interface InboxProps {
     channelFilters?: Record<string, unknown>;
@@ -47,187 +17,6 @@ export interface InboxProps {
     supportServices: boolean;
 }
 
-// Create a safer version of useMachine to handle potential errors
-function useSafeMachine(machine) {
-    // Define the state type
-    interface SafeStateType {
-        context: {
-            channels: any[];
-            refreshing: boolean;
-            loading: boolean;
-            error: string | null;
-            searchQuery: string;
-            selectedChannelId: string | null;
-            channelRole: string | null;
-            channelFilters: Record<string, any>;
-            supportServices: boolean;
-            page: number;
-            hasMoreChannels: boolean;
-            loadingMore: boolean;
-        };
-        value: string;
-        matches?: (stateValue: string) => boolean;
-    }
-
-    // Initialize with default state
-    const [state, setState] = useState<SafeStateType>({
-        context: {
-            channels: [],
-            refreshing: false,
-            loading: false,
-            error: null,
-            searchQuery: '',
-            selectedChannelId: null,
-            channelRole: null,
-            channelFilters: {},
-            supportServices: false,
-            page: 1,
-            hasMoreChannels: true,
-            loadingMore: false,
-        },
-        value: 'idle',
-    });
-
-    // Create a safe send function
-    const send = useCallback((event) => {
-        try {
-            // Log event for debugging
-            console.log('Event received:', event.type);
-
-            // Handle specific events manually
-            if (event.type === Actions.INITIAL_CONTEXT) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        channelRole: event.data?.channelRole || null,
-                        channelFilters: event.data?.channelFilters || {},
-                        supportServices: event.data?.supportServices || false,
-                        selectedChannelId: event.data?.selectedChannelId || null,
-                        loading: true,
-                        page: 1,
-                        hasMoreChannels: true,
-                    },
-                    value: BaseState.FetchChannels,
-                }));
-            } else if (event.type === Actions.FETCH_CHANNELS) {
-                console.log('Setting channels:', event.data?.channels?.length || 0);
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        channels: event.data?.channels || [],
-                        hasMoreChannels: (event.data?.channels?.length || 0) > 0,
-                        loading: event.data?.stopLoading ? false : prev.context.loading,
-                        refreshing: event.data?.stopLoading ? false : prev.context.refreshing,
-                        loadingMore: false,
-                    },
-                    value: BaseState.Idle,
-                }));
-            } else if (event.type === Actions.APPEND_CHANNELS) {
-                const newChannels = event.data?.channels || [];
-                console.log('Appending channels:', newChannels.length);
-
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        channels: [...prev.context.channels, ...newChannels],
-                        hasMoreChannels: newChannels.length >= 10, // If we got fewer than 10 channels, assume no more are available
-                        page: prev.context.page + 1,
-                        loadingMore: false,
-                    },
-                    value: BaseState.Idle,
-                }));
-            } else if (event.type === Actions.REFRESH_CHANNELS) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        refreshing: true,
-                        page: 1,
-                        hasMoreChannels: true,
-                    },
-                    value: MainState.RefreshChannels,
-                }));
-            } else if (event.type === Actions.SELECT_CHANNEL) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        selectedChannelId: event.data?.channelId || null,
-                    },
-                }));
-            } else if (event.type === Actions.START_LOADING) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loading: true,
-                    },
-                }));
-            } else if (event.type === Actions.STOP_LOADING) {
-                console.log('Explicitly stopping loading state');
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loading: false,
-                        refreshing: false,
-                        loadingMore: false,
-                    },
-                    value: prev.value === BaseState.FetchChannels ? BaseState.Idle : prev.value,
-                }));
-            } else if (event.type === Actions.LOAD_MORE_CHANNELS) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loadingMore: true,
-                    },
-                    value: MainState.LoadMoreChannels,
-                }));
-            } else if (event.type === Actions.SET_SEARCH_QUERY) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        searchQuery: event.data?.searchQuery || '',
-                    },
-                }));
-            } else if (event.type === Actions.ERROR_HANDLED) {
-                console.log('Error handled:', event.data?.message);
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        error: event.data?.message || null,
-                        loading: false,
-                        refreshing: false,
-                        loadingMore: false,
-                    },
-                    value: BaseState.Idle,
-                }));
-            }
-        } catch (error) {
-            console.error('Error handling event:', error);
-        }
-    }, []);
-
-    // Add a custom matches function to the state
-    const stateWithMatches = useMemo(() => {
-        return {
-            ...state,
-            matches: (checkState) => {
-                return state.value === checkState;
-            },
-        };
-    }, [state]);
-
-    // Return as a tuple to match useMachine API
-    return [stateWithMatches, send] as const;
-}
-
 const DialogsComponent = (props: InboxProps) => {
     const { channelFilters: channelFilterProp, channelRole, supportServices } = props;
     const channelFilters = { ...channelFilterProp };
@@ -236,106 +25,27 @@ const DialogsComponent = (props: InboxProps) => {
     const auth = useSelector(userSelector);
     const navigation = useNavigation<any>();
 
+    // Local state for UI control
+    const [searchQuery, setSearchQuery] = useState('');
+    const [selectedChannelId, setSelectedChannelId] = useState<string | null>(params?.channelId || null);
+    const [page, setPage] = useState(1);
+    const [isLoadingMore, setIsLoadingMore] = useState(false);
+
     // Create a ref to track if component is mounted
     const isMountedRef = useRef(true);
-
-    // Use our safer custom implementation instead of the problematic useMachine
-    const [state, send] = useSafeMachine(dialogsXstate);
-
-    // Define safe functions first to avoid "used before declaration" errors
-    const safeContext = useCallback(() => {
-        try {
-            return state?.context || {};
-        } catch (error) {
-            console.error('Error accessing state.context:', error);
-            return {};
-        }
-    }, [state]);
-
-    const safeContextProperty = useCallback(
-        (property, defaultValue = null) => {
-            try {
-                return state?.context?.[property] ?? defaultValue;
-            } catch (error) {
-                console.error(`Error accessing state.context.${property}:`, error);
-                return defaultValue;
-            }
-        },
-        [state],
-    );
-
-    const safeMatches = useCallback(
-        (stateValue) => {
-            try {
-                return state?.matches?.(stateValue) || false;
-            } catch (error) {
-                console.error(`Error calling state.matches with ${stateValue}:`, error);
-                return false;
-            }
-        },
-        [state],
-    );
-
-    const safeSend = useCallback(
-        (event) => {
-            try {
-                send(event);
-            } catch (error) {
-                console.error('Error sending event to state machine:', error, event);
-            }
-        },
-        [send],
-    );
-
-    // Destructure context properties with safe getters
-    const channels = safeContextProperty('channels', []);
-    const refreshing = safeContextProperty('refreshing', false);
-    const loading = safeContextProperty('loading', false);
-    const searchQuery = safeContextProperty('searchQuery', '');
-    const selectedChannelId = safeContextProperty('selectedChannelId', null);
-    const loadingMore = safeContextProperty('loadingMore', false);
-    const hasMoreChannels = safeContextProperty('hasMoreChannels', true);
-    const page = safeContextProperty('page', 1);
-
-    // Use a ref to track the current machine snapshot for safer access
-    const stateRef = useRef(state);
-
-    // Keep the ref updated with the latest snapshot
-    useEffect(() => {
-        stateRef.current = state;
-    }, [state]);
-
-    // Avoid referencing state.context directly in places that might cause undefined errors
-    const safeGetContext = useCallback(() => {
-        if (stateRef.current && stateRef.current.context) {
-            return stateRef.current.context;
-        }
-        // Return default values if context is undefined
-        return {
-            channels: [],
-            refreshing: false,
-            loading: false,
-            error: null,
-            searchQuery: '',
-            selectedChannelId: null,
-            channelRole: null,
-            channelFilters: {},
-            supportServices: false,
-            page: 1,
-            hasMoreChannels: true,
-            loadingMore: false,
-        };
-    }, []);
-
-    // Use cleanup function to prevent setting state after unmount
-    useEffect(() => {
-        return () => {
-            isMountedRef.current = false;
-        };
-    }, []);
-
-    // Apollo query for fetching channels
-    const { refetch: getChannelsRefetch } = useGetChannelsByUserWithServiceChannelsQuery({
+    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 } = useGetChannelsByUserWithServiceChannelsQuery({
         variables: {
             role: channelRole,
             criteria: channelFilters,
@@ -349,320 +59,328 @@ const DialogsComponent = (props: InboxProps) => {
         fetchPolicy: 'cache-and-network',
         nextFetchPolicy: 'network-only',
         notifyOnNetworkStatusChange: true,
-        skip: true, // Skip automatic fetching as we'll control it via the state machine
     });
 
-    // Fetch channels implementation
-    const fetchChannelsDirectly = useCallback(
-        async (pageNum = 1, append = false) => {
-            try {
-                const context = safeGetContext();
-                console.log(`💫 FETCHING channels (page: ${pageNum}, append: ${append})`);
-
-                // Calculate skip based on page number (pagination)
-                const skipCount = (pageNum - 1) * 15;
-
-                // Add timeout to prevent hanging requests
-                const fetchPromise = getChannelsRefetch({
-                    role: channelRole,
-                    criteria: channelFilters,
-                    supportServices: supportServices ? true : false,
-                    supportServiceCriteria: {
-                        type: RoomType.Service,
-                    },
-                    limit: 15,
-                    skip: skipCount,
-                });
-
-                // Set a timeout to abort long-running requests
-                const timeoutPromise = new Promise((_, reject) =>
-                    setTimeout(() => reject(new Error('Request timeout')), 8000),
-                );
-
-                // Race the fetch against the timeout
-                const result = (await Promise.race([fetchPromise, timeoutPromise])) as any;
-                const data = result?.data || {};
-
-                const allChannels = [...(data?.supportServiceChannels ?? []), ...(data?.channelsByUser ?? [])];
-
-                // Optimize filtering by using more efficient approach
-                const filteredChannels =
-                    allChannels?.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;
-                    }) ?? [];
-
-                // Use more efficient sorting
-                const sortedChannels =
-                    filteredChannels.sort((a, b) => {
-                        const dateA = new Date(a.updatedAt);
-                        const dateB = new Date(b.updatedAt);
-                        return dateB.getTime() - dateA.getTime();
-                    }) || [];
-
-                console.log(`📊 Processed channels: ${sortedChannels.length} (page: ${pageNum}, skip: ${skipCount})`);
-
-                if (isMountedRef.current) {
-                    if (append) {
-                        safeSend({
-                            type: Actions.APPEND_CHANNELS,
-                            data: { channels: sortedChannels },
-                        });
-                    } else {
-                        safeSend({
-                            type: Actions.FETCH_CHANNELS,
-                            data: { channels: sortedChannels, stopLoading: true },
-                        });
+    // Process the channels from the query response
+    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;
                     }
-
-                    // No need for another stop loading call as we included stopLoading: true above
                 }
-            } catch (error) {
-                console.error('Error fetching channels:', error);
-                if (isMountedRef.current) {
-                    safeSend({
-                        type: Actions.ERROR_HANDLED,
-                        data: { message: 'Failed to fetch channels' },
-                    });
+                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;
+            });
         },
-        [getChannelsRefetch, channelRole, channelFilters, supportServices, auth?.id, safeSend],
+        [auth?.id],
     );
 
-    // Optimize safety timeout to use a shorter duration
+    // Sort channels by most recent activity
+    const sortChannels = useCallback((channels) => {
+        if (!channels || !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
+        });
+    }, []);
+
+    // Combine data from both channel types
+    const allChannels = [...(data?.supportServiceChannels || []), ...(data?.channelsByUser || [])];
+
+    // Process and sort the channels
+    const channels = sortChannels(processChannels(allChannels));
+
+    // Set up subscription for real-time message updates
     useEffect(() => {
-        if (loading) {
-            const safetyTimeout = setTimeout(() => {
-                console.log('⚠️ Safety timeout triggered - forcing loading state to stop');
-                if (isMountedRef.current) {
-                    safeSend({ type: Actions.STOP_LOADING });
-                }
-            }, 3000); // Reduced from 5000 to 3000 ms
+        if (!auth || !auth.id) return;
 
-            return () => clearTimeout(safetyTimeout);
-        }
-    }, [loading, safeSend]);
+        console.log('📱 Setting up global message subscription for dialog updates');
 
-    // Add a faster refresh function with smaller dataset and timeout
-    const fastRefresh = useCallback(async () => {
-        try {
-            console.log('🔄 Fast refreshing channels...');
+        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;
 
-            // Set a timeout to ensure refreshing state is cleared if the fetch fails
-            const clearRefreshingTimeout = setTimeout(() => {
-                if (isMountedRef.current) {
-                    console.log('⚠️ Fast refresh timeout - stopping refresh state');
-                    safeSend({ type: Actions.STOP_LOADING });
-                }
-            }, 3000); // 3 second timeout for refresh
+                    const subData = subscriptionData.data as any;
+                    const newMessage = subData.chatMessageAdded;
 
-            // Perform the fetch with a smaller limit for faster results
-            const { data } = await getChannelsRefetch({
-                role: channelRole,
-                criteria: channelFilters,
-                supportServices: supportServices ? true : false,
-                supportServiceCriteria: {
-                    type: RoomType.Service,
-                },
-                limit: 10,
-                skip: 0,
-            });
+                    console.log('📱 Dialog subscription received message update:', newMessage?.id);
 
-            // Cancel the timeout since we got a response
-            clearTimeout(clearRefreshingTimeout);
-
-            if (!isMountedRef.current) return;
-
-            const allChannels = [...(data?.supportServiceChannels ?? []), ...(data?.channelsByUser ?? [])];
-            const filteredChannels =
-                allChannels?.filter((c) =>
-                    c.members.some((u) => u !== null && u?.user?.id != auth?.id && u.user.__typename == 'UserAccount'),
-                ) ?? [];
-            const sortedChannels = (filteredChannels && orderBy(filteredChannels, ['updatedAt'], ['desc'])) || [];
-
-            console.log(`📊 Fast refresh completed: ${sortedChannels.length} channels`);
-
-            // Update the state with the new channels, but only if still mounted
-            if (isMountedRef.current) {
-                // Use a single update to prevent UI jumping
-                safeSend({
-                    type: Actions.FETCH_CHANNELS,
-                    data: {
-                        channels: sortedChannels,
-                        stopLoading: true,
-                    },
-                });
-            }
-        } catch (error) {
-            console.error('Error during fast refresh:', error);
-            if (isMountedRef.current) {
-                safeSend({ type: Actions.STOP_LOADING });
-            }
-        }
-    }, [getChannelsRefetch, channelRole, channelFilters, supportServices, auth?.id, safeSend]);
+                    // Skip if no message or no channelId
+                    if (!newMessage || !newMessage.channelId) return prev;
 
-    // Process state changes and execute side effects
-    useEffect(() => {
-        // Only execute if not already refreshing or loading to prevent loops
-        const context = safeGetContext();
-        const isAlreadyFetching = context.refreshing || context.loading;
-
-        if (!isAlreadyFetching) {
-            if (safeMatches(BaseState.FetchChannels)) {
-                console.log('🔄 Fetching channels...');
-                fetchChannelsDirectly(1, false);
-            } else if (safeMatches(MainState.RefreshChannels)) {
-                console.log('🔄 Refreshing channels...');
-                fetchChannelsDirectly(1, false);
-            } else if (safeMatches(MainState.LoadMoreChannels)) {
-                console.log('🔄 Loading more channels...');
-                fetchChannelsDirectly(page, true);
-            }
-        } else {
-            // Log that we're skipping the fetch due to already being in progress
-            console.log('⏩ Skipping fetch because isAlreadyFetching:', isAlreadyFetching);
-        }
-    }, [fetchChannelsDirectly, safeMatches, safeGetContext, state.value, page]);
+                    // Find the channel this message belongs to
+                    const channelId = newMessage.channelId.toString();
 
-    // Add a debug log to track state transitions
-    useEffect(() => {
-        console.log('State changed to:', state.value);
-        console.log(
-            'Context:',
-            JSON.stringify({
-                channelsCount: channels.length,
-                loading,
-                refreshing,
-            }),
-        );
-    }, [state.value, channels.length, loading, refreshing]);
-
-    // Initialize state machine with props on mount
-    useEffect(() => {
-        if (isMountedRef.current) {
-            console.log('🚀 Initializing state machine with props', {
-                channelRole,
-                channelFilters,
-                supportServices,
-                selectedChannelId: params?.channelId,
-            });
+                    // Find which array contains this channel (direct or service)
+                    let foundInDirectChannels = false;
+                    let foundInServiceChannels = false;
 
-            safeSend({
-                type: Actions.INITIAL_CONTEXT,
-                data: {
-                    channelRole,
-                    channelFilters,
-                    supportServices,
-                    selectedChannelId: params?.channelId,
-                },
-            });
+                    // 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;
 
-            // Add a safety measure to ensure loading is stopped even if fetch fails
-            const initSafetyTimeout = setTimeout(() => {
-                if (isMountedRef.current && loading) {
-                    console.log('⚠️ Init safety timeout triggered - forcing loading state to stop');
-                    safeSend({ type: Actions.STOP_LOADING });
+                        // 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;
                 }
-            }, 8000); // 8 seconds safety timeout
+            },
+        });
 
-            return () => clearTimeout(initSafetyTimeout);
-        }
-    }, []);
+        // Clean up subscription when component unmounts
+        return () => {
+            console.log('📱 Cleaning up dialog message subscription');
+            unsubscribe();
+        };
+    }, [auth?.id, subscribeToMore]);
 
-    // Handle refresh on focus (when navigating back to this screen)
-    const focusRefreshRef = useRef<number | null>(null);
+    // 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(() => {
-            // Use a flag to ensure we only trigger refresh once per focus
-            let hasTriggeredRefresh = false;
-
-            // Reset the focus refresh tracking when component gets focus
+            // When screen gains focus, check if we're coming back from a detail screen
             const now = Date.now();
-            const lastRefresh = focusRefreshRef.current;
-
-            // Only refresh if at least 2 seconds have passed since last refresh
-            const shouldRefresh = lastRefresh === null || now - lastRefresh > 2000;
-
-            // Only refresh if component is mounted and not in initial state,
-            // and not already refreshing/loading
-            const context = safeGetContext();
-            const isAlreadyFetching = context.refreshing || context.loading;
-
-            if (
-                isMountedRef.current &&
-                !hasTriggeredRefresh &&
-                !isAlreadyFetching &&
-                shouldRefresh &&
-                (channels.length > 0 || safeMatches(BaseState.Idle))
-            ) {
-                hasTriggeredRefresh = true;
-                focusRefreshRef.current = now;
-
-                // Use fast refresh for better performance
-                console.log('🔄 Focus effect: triggering fast refresh');
-                safeSend({
-                    type: Actions.START_LOADING,
-                    data: { refreshing: true },
-                });
-
-                // Execute fast refresh with a short delay to prevent UI jank
-                setTimeout(() => {
-                    if (isMountedRef.current) {
-                        fastRefresh();
-                    }
-                }, 100);
-            } else {
-                console.log('⏩ Skipping focus refresh:', {
-                    isAlreadyFetching,
-                    hasTriggeredRefresh,
-                    shouldRefresh,
-                    timeGap: lastRefresh === null ? 'first refresh' : now - lastRefresh,
-                });
+
+            // 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 () => {
-                // Reset flag when focus is lost
-                hasTriggeredRefresh = false;
+                // 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();
+                }
             };
-        }, [safeSend, channels.length, safeMatches, safeGetContext, fastRefresh]),
+
+            const focusRefreshTimeout = setTimeout(performRefresh, 100);
+            return () => clearTimeout(focusRefreshTimeout);
+        }, [refetch]),
     );
 
-    // Navigation handlers
+    // 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 (isLoadingMore || !data || channels.length < 10) {
+            console.log('Skip loading more: already loading or all data loaded');
+            return;
+        }
+
+        console.log('Loading more channels at page:', page + 1);
+        setIsLoadingMore(true);
+
+        fetchMore({
+            variables: {
+                skip: page * 15,
+            },
+            updateQuery: (prev, { fetchMoreResult }) => {
+                setIsLoadingMore(false);
+                setPage((prevPage) => prevPage + 1);
+
+                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);
+            setIsLoadingMore(false);
+        });
+    }, [fetchMore, isLoadingMore, data, channels.length, page]);
+
+    // Navigation handlers with debounce to prevent double taps
     const handleSelectChannel = useCallback(
         (id, title) => {
-            // Always update the selected channel ID, even if it's the same channel
-            safeSend({ type: Actions.SELECT_CHANNEL, data: { channelId: id } });
+            // 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);
 
-            // Force navigation to the channel screen, even if it's already selected
-            // This ensures we can reopen the same channel multiple times
             navigation.navigate(config.INBOX_MESSEGE_PATH, {
                 channelId: id,
                 role: channelRole,
                 title: title,
                 hideTabBar: true,
-                timestamp: new Date().getTime(), // Add timestamp to force a refresh when navigating to the same screen
+                timestamp: new Date().getTime(),
             });
         },
-        [navigation, channelRole, safeSend],
+        [navigation, channelRole],
     );
 
     const handleSelectServiceChannel = useCallback(
         (id, title, postParentId) => {
-            safeSend({ type: Actions.SELECT_CHANNEL, data: { channelId: id } });
+            // 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,
@@ -671,61 +389,57 @@ const DialogsComponent = (props: InboxProps) => {
                 hideTabBar: true,
             });
         },
-        [navigation, channelRole, safeSend],
+        [navigation, channelRole],
     );
 
-    // Modified pull-to-refresh handler to use fast refresh
-    const handlePullToRefresh = useCallback(() => {
-        if (refreshing) {
-            console.log('⏩ Skipping refresh because already refreshing');
-            return;
-        }
+    // Handle search query changes
+    const handleSearchChange = useCallback((text: string) => {
+        setSearchQuery(text);
+    }, []);
 
-        // Update the last refresh timestamp to prevent simultaneous focus refresh
-        const now = Date.now();
-        focusRefreshRef.current = now;
+    // Filter channels by search query
+    const filteredChannels = useCallback(() => {
+        if (!searchQuery.trim()) return channels;
 
-        console.log('🔄 Pull-to-refresh triggered');
-        safeSend({
-            type: Actions.START_LOADING,
-            data: { refreshing: true },
-        });
+        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;
+            }
 
-        // Use the fast refresh approach for pull-to-refresh
-        fastRefresh();
-    }, [safeSend, refreshing, fastRefresh]);
+            // 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;
 
-    // Search handler
-    const handleSearchChange = useCallback(
-        (text: string) => {
-            safeSend({
-                type: Actions.SET_SEARCH_QUERY,
-                data: { searchQuery: text },
-            });
-        },
-        [safeSend],
-    );
+                    const fullName = `${user.givenName || ''} ${user.familyName || ''}`.toLowerCase();
+                    if (fullName.includes(query)) {
+                        return true;
+                    }
 
-    // Add loadMore handler with debounce to prevent multiple calls
-    const handleLoadMore = useCallback(() => {
-        if (!loadingMore && hasMoreChannels) {
-            console.log('Loading more channels at page:', page + 1);
-            safeSend({ type: Actions.LOAD_MORE_CHANNELS });
-        } else {
-            console.log('Skip loading more: loadingMore=', loadingMore, 'hasMoreChannels=', hasMoreChannels);
-        }
-    }, [safeSend, loadingMore, hasMoreChannels, page]);
+                    if (user.username && user.username.toLowerCase().includes(query)) {
+                        return true;
+                    }
+                }
+            }
+
+            return false;
+        });
+    }, [channels, searchQuery]);
+
+    const displayChannels = filteredChannels();
 
     return (
         <Box className="p-2">
             <FlatList
-                data={channels}
+                data={displayChannels}
                 onRefresh={handlePullToRefresh}
-                refreshing={refreshing}
+                refreshing={loading && !isLoadingMore}
                 contentContainerStyle={{ minHeight: '100%' }}
                 ItemSeparatorComponent={() => <Box className="h-0.5 bg-gray-200" />}
                 renderItem={({ item: channel }) => {
-                    // Use memoized key for better list performance
                     const key = `${channel.type === RoomType.Service ? 'service' : 'direct'}-${channel.id}`;
 
                     return channel?.type === RoomType.Service ? (
@@ -734,7 +448,7 @@ const DialogsComponent = (props: InboxProps) => {
                             onOpen={handleSelectServiceChannel}
                             currentUser={auth}
                             channel={channel}
-                            refreshing={refreshing}
+                            refreshing={loading}
                             selectedChannelId={selectedChannelId}
                             role={channelRole}
                         />
@@ -745,34 +459,29 @@ const DialogsComponent = (props: InboxProps) => {
                             currentUser={auth}
                             channel={channel}
                             selectedChannelId={selectedChannelId}
-                            forceRefresh={false} // Change to false to avoid unnecessary refreshes
+                            forceRefresh={true}
                         />
                     );
                 }}
                 ListFooterComponent={() =>
-                    loadingMore ? (
+                    isLoadingMore ? (
                         <Center className="py-4">
                             <Spinner color={colors.blue[500]} size="small" />
                         </Center>
                     ) : null
                 }
                 onEndReached={handleLoadMore}
-                onEndReachedThreshold={0.5} // Increased from 0.3 for earlier loading
-                initialNumToRender={5} // Reduced from 10 for faster initial render
-                maxToRenderPerBatch={5} // Reduced from 10 for smoother rendering
-                windowSize={5} // Reduced from 10 to maintain fewer items in memory
+                onEndReachedThreshold={0.5}
+                initialNumToRender={5}
+                maxToRenderPerBatch={5}
+                windowSize={5}
                 removeClippedSubviews={true}
-                updateCellsBatchingPeriod={100} // Increased from 50 to batch updates better
-                getItemLayout={(data, index) =>
-                    // Pre-calculate item dimensions for more efficient rendering
-                    ({ length: 80, offset: 80 * index, index })
-                }
+                updateCellsBatchingPeriod={100}
+                getItemLayout={(data, index) => ({ length: 80, offset: 80 * index, index })}
                 keyExtractor={(item) => `channel-${item.id}`}
                 ListEmptyComponent={() => {
-                    console.log('Rendering ListEmptyComponent', { loading, refreshing, stateValue: state.value });
-
-                    // Only show spinner during initial loading
-                    if (loading && channels.length === 0) {
+                    // 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" />