@messenger-box/platform-mobile 10.0.3-alpha.19 → 10.0.3-alpha.22

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

@@ -1,27 +1,45 @@
-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, useMemo, 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, useDispatch } from 'react-redux';
-import { useNavigation, useRoute, useIsFocused, useFocusEffect } from '@react-navigation/native';
-import { orderBy, uniqBy, startCase } from 'lodash-es';
+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 { useGetChannelsByUserQuery, useGetChannelsByUserWithServiceChannelsQuery } from 'common/graphql';
+import { useGetChannelsByUserWithServiceChannelsQuery } 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 { 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>;
@@ -29,23 +47,295 @@ 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 };
     channelFilters.type = channelFilters?.type ?? RoomType.Direct;
     const { params } = useRoute<any>();
     const auth = useSelector(userSelector);
-    const dispatch = useDispatch();
     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({
+
+    // 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({
         variables: {
             role: channelRole,
             criteria: channelFilters,
@@ -53,197 +343,449 @@ const DialogsComponent = (props: InboxProps) => {
             supportServiceCriteria: {
                 type: RoomType.Service,
             },
+            limit: 15,
+            skip: 0,
         },
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'network-only',
+        notifyOnNetworkStatusChange: true,
+        skip: true, // Skip automatic fetching as we'll control it via the state machine
     });
 
-    // const {
-    //     data: userChannels,
-    //     loading: userChannelsLoading,
-    //     refetch: getChannelsRefetch,
-    // } = useGetChannelsByUserQuery({
-    //     variables: {
-    //         role: channelRole,
-    //         criteria: channelFilters,
-    //     },
-    //     onCompleted: (data: any) => {
-    //         setRefresh(false);
-    //     },
-    // });
+    // Fetch channels implementation
+    const fetchChannelsDirectly = useCallback(
+        async (pageNum = 1, append = false) => {
+            try {
+                const context = safeGetContext();
+                console.log(`💫 FETCHING channels (page: ${pageNum}, append: ${append})`);
 
-    useFocusEffect(
-        React.useCallback(() => {
-            // Do something when the screen is focused
-            setRefresh(false);
-            //getChannelsRefetch({ role: channelRole, criteria: channelFilters });
-            getChannelsRefetch({
+                // Calculate skip based on page number (pagination)
+                const skipCount = (pageNum - 1) * 15;
+
+                const { data } = await getChannelsRefetch({
+                    role: channelRole,
+                    criteria: channelFilters,
+                    supportServices: supportServices ? true : false,
+                    supportServiceCriteria: {
+                        type: RoomType.Service,
+                    },
+                    limit: 15,
+                    skip: skipCount,
+                });
+
+                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(`📊 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 },
+                        });
+                    }
+
+                    // Immediately stop loading state instead of waiting
+                    safeSend({ type: Actions.STOP_LOADING });
+                }
+            } catch (error) {
+                console.error('Error fetching channels:', error);
+                if (isMountedRef.current) {
+                    safeSend({
+                        type: Actions.ERROR_HANDLED,
+                        data: { message: 'Failed to fetch channels' },
+                    });
+                }
+            }
+        },
+        [getChannelsRefetch, channelRole, channelFilters, supportServices, auth?.id, safeSend],
+    );
+
+    // Add a safety timeout to ensure loading state is eventually cleared
+    // even if the fetchChannelsDirectly function fails to complete
+    useEffect(() => {
+        if (loading) {
+            const safetyTimeout = setTimeout(() => {
+                console.log('⚠️ Safety timeout triggered - forcing loading state to stop');
+                if (isMountedRef.current) {
+                    safeSend({ type: Actions.STOP_LOADING });
+                }
+            }, 5000); // 5 seconds safety timeout
+
+            return () => clearTimeout(safetyTimeout);
+        }
+    }, [loading, safeSend]);
+
+    // Add a faster refresh function with smaller dataset and timeout
+    const fastRefresh = useCallback(async () => {
+        try {
+            console.log('🔄 Fast refreshing channels...');
+
+            // 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
+
+            // 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,
             });
+
+            // 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]);
+
+    // 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]);
+
+    // 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,
+            });
+
+            safeSend({
+                type: Actions.INITIAL_CONTEXT,
+                data: {
+                    channelRole,
+                    channelFilters,
+                    supportServices,
+                    selectedChannelId: params?.channelId,
+                },
+            });
+
+            // 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 });
+                }
+            }, 8000); // 8 seconds safety timeout
+
+            return () => clearTimeout(initSafetyTimeout);
+        }
+    }, []);
+
+    // Handle refresh on focus (when navigating back to this screen)
+    const focusRefreshRef = useRef<number | null>(null);
+
+    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
+            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,
+                });
+            }
+
             return () => {
-                // Do something when the screen is unfocused
-                // Useful for cleanup functions
+                // Reset flag when focus is lost
+                hasTriggeredRefresh = false;
             };
-        }, [channelFilters]),
+        }, [safeSend, channels.length, safeMatches, safeGetContext, fastRefresh]),
     );
 
-    // 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]);
-
-    // useEffect(() => {
-    //     setTimeout(() => {
-    //         dispatch({
-    //             type: CHANGE_SETTINGS_ACTION,
-    //             payload: {
-    //                 footerRender: false,
-    //             },
-    //         } as any);
-    //     }, 0);
-    //     return () => {
-    //         dispatch({
-    //             type: CHANGE_SETTINGS_ACTION,
-    //             payload: {
-    //                 footerRender: true,
-    //             },
-    //         } as any);
-    //     };
-    // }, []);
-
-    // 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,
+    // Navigation handlers
+    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 } });
+
+            // 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
             });
-        } else {
-            navigation.navigate(config.INBOX_MESSEGE_PATH as any, {
+        },
+        [navigation, channelRole, safeSend],
+    );
+
+    const handleSelectServiceChannel = useCallback(
+        (id, title, postParentId) => {
+            safeSend({ type: Actions.SELECT_CHANNEL, data: { channelId: 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, safeSend],
+    );
+
+    // Modified pull-to-refresh handler to use fast refresh
+    const handlePullToRefresh = useCallback(() => {
+        if (refreshing) {
+            console.log('⏩ Skipping refresh because already refreshing');
+            return;
         }
-    }, []);
 
-    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,
-                },
-            );
+        // Update the last refresh timestamp to prevent simultaneous focus refresh
+        const now = Date.now();
+        focusRefreshRef.current = now;
+
+        console.log('🔄 Pull-to-refresh triggered');
+        safeSend({
+            type: Actions.START_LOADING,
+            data: { refreshing: true },
+        });
+
+        // Use the fast refresh approach for pull-to-refresh
+        fastRefresh();
+    }, [safeSend, refreshing, fastRefresh]);
+
+    // Search handler
+    const handleSearchChange = useCallback(
+        (text: string) => {
+            safeSend({
+                type: Actions.SET_SEARCH_QUERY,
+                data: { searchQuery: text },
+            });
+        },
+        [safeSend],
+    );
+
+    // 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 {
-            navigation.navigate(
-                postParentId || postParentId == 0 ? config.THREAD_MESSEGE_PATH : (config.THREADS_PATH as any),
-                {
-                    channelId: id,
-                    role: channelRole,
-                    title: title,
-                    postParentId: postParentId,
-                    hideTabBar: true,
-                },
-            );
+            console.log('Skip loading more: loadingMore=', loadingMore, 'hasMoreChannels=', hasMoreChannels);
         }
-    }, []);
-
-    const handleRefresh = useCallback(() => {
-        //if(userChannels?.channelsByUser?.length != channels?.length)setRefresh(true);
-        setRefresh(true);
-        getChannelsRefetch({ role: channelRole, criteria: channelFilters })?.finally(() => setRefresh(false));
-    }, []);
+    }, [safeSend, loadingMore, hasMoreChannels, page]);
 
     return (
         <Box className="p-2">
             <FlatList
-                data={channels && channels?.length > 0 ? channels : []}
-                onRefresh={handleRefresh}
+                data={channels}
+                onRefresh={handlePullToRefresh}
                 refreshing={refreshing}
                 contentContainerStyle={{ minHeight: '100%' }}
                 ItemSeparatorComponent={() => <Box className="h-0.5 bg-gray-200" />}
-                renderItem={({ item: channel }: any) =>
-                    channel?.type === RoomType.Service ? (
+                renderItem={({ item: channel }) => {
+                    return channel?.type === RoomType.Service ? (
                         <ServiceDialogsListItem
+                            key={`service-${channel.id}`}
                             onOpen={handleSelectServiceChannel}
                             currentUser={auth}
                             channel={channel}
                             refreshing={refreshing}
-                            selectedChannelId={params?.channelId}
+                            selectedChannelId={selectedChannelId}
                             role={channelRole}
                         />
                     ) : (
                         <DialogsListItem
+                            key={`direct-${channel.id}`}
                             onOpen={handleSelectChannel}
                             currentUser={auth}
                             channel={channel}
-                            selectedChannelId={params?.channelId}
+                            selectedChannelId={selectedChannelId}
+                            forceRefresh={true}
                         />
-                    )
+                    );
+                }}
+                ListFooterComponent={() =>
+                    loadingMore ? (
+                        <Center className="py-4">
+                            <Spinner color={colors.blue[500]} size="small" />
+                        </Center>
+                    ) : null
                 }
-                ListEmptyComponent={() => (
-                    <>
-                        {userChannelsLoading ? (
-                            <Center className="flex-1 justify-center items-center">
-                                <Spinner color={colors.blue[500]} />
+                onEndReached={handleLoadMore}
+                onEndReachedThreshold={0.3}
+                initialNumToRender={10}
+                maxToRenderPerBatch={10}
+                windowSize={10}
+                removeClippedSubviews={true}
+                updateCellsBatchingPeriod={50}
+                ListEmptyComponent={() => {
+                    console.log('Rendering ListEmptyComponent', { loading, refreshing, stateValue: state.value });
+
+                    // Only show spinner during initial loading
+                    if (loading && channels.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>
-                        ) : (
-                            <Box className="p-5">
-                                <Heading>Chat</Heading>
-                                <Input className={`h-[50] mt-3 rounded-[50] border-gray-200 border `}>
-                                    <InputField placeholder="Search" />
-                                </Input>
-                                <Center className="mt-6">
-                                    <Ionicons name="chatbubbles" size={50} />
-                                    <Text>You don't have any messages yet!</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>
-                        )}
-                    </>
-                )}
-                keyExtractor={(item, index) => 'key' + index}
+
+                            <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>
+                    );
+                }}
+                keyExtractor={(item) => `channel-${item.id}`}
             />
         </Box>
     );