@messenger-box/platform-mobile 10.0.3-alpha.18 → 10.0.3-alpha.20

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

@@ -1,28 +1,45 @@
-import React, { useCallback, useMemo, useEffect, useState, useRef } 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, Actions as DialogsActions, BaseState, MainState } from './workflow/dialogs-xstate';
+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>;
@@ -30,28 +47,28 @@ export interface InboxProps {
     supportServices: boolean;
 }
 
-// Define state type for the state machine
-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;
-    };
-    value: string;
-    matches?: (stateValue: string) => boolean;
-}
-
-// Interface for the return type to ensure proper typing
-type UseSafeMachineReturnType = [SafeStateType & { matches: (stateValue: string) => boolean }, (event: any) => void];
-
 // Create a safer version of useMachine to handle potential errors
-function useSafeMachine(machine): UseSafeMachineReturnType {
+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: {
@@ -64,6 +81,9 @@ function useSafeMachine(machine): UseSafeMachineReturnType {
             channelRole: null,
             channelFilters: {},
             supportServices: false,
+            page: 1,
+            hasMoreChannels: true,
+            loadingMore: false,
         },
         value: 'idle',
     });
@@ -72,10 +92,10 @@ function useSafeMachine(machine): UseSafeMachineReturnType {
     const send = useCallback((event) => {
         try {
             // Log event for debugging
-            console.log('Dialogs Event received:', event.type);
+            console.log('Event received:', event.type);
 
             // Handle specific events manually
-            if (event.type === DialogsActions.INITIAL_CONTEXT) {
+            if (event.type === Actions.INITIAL_CONTEXT) {
                 setState((prev) => ({
                     ...prev,
                     context: {
@@ -84,36 +104,61 @@ function useSafeMachine(machine): UseSafeMachineReturnType {
                         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 === DialogsActions.SET_SEARCH_QUERY) {
+            } else if (event.type === Actions.FETCH_CHANNELS) {
+                console.log('Setting channels:', event.data?.channels?.length || 0);
                 setState((prev) => ({
                     ...prev,
                     context: {
                         ...prev.context,
-                        searchQuery: event.data?.searchQuery || '',
+                        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 === DialogsActions.REFRESH_CHANNELS) {
+            } 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 === DialogsActions.SELECT_CHANNEL) {
+            } else if (event.type === Actions.SELECT_CHANNEL) {
                 setState((prev) => ({
                     ...prev,
                     context: {
                         ...prev.context,
                         selectedChannelId: event.data?.channelId || null,
                     },
-                    value: MainState.SelectChannel,
                 }));
-            } else if (event.type === DialogsActions.START_LOADING) {
+            } else if (event.type === Actions.START_LOADING) {
                 setState((prev) => ({
                     ...prev,
                     context: {
@@ -121,62 +166,66 @@ function useSafeMachine(machine): UseSafeMachineReturnType {
                         loading: true,
                     },
                 }));
-            } else if (event.type === DialogsActions.STOP_LOADING) {
+            } 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 === 'FETCH_CHANNELS_SUCCESS') {
+            } else if (event.type === Actions.LOAD_MORE_CHANNELS) {
                 setState((prev) => ({
                     ...prev,
                     context: {
                         ...prev.context,
-                        channels: event.data?.channels || [],
-                        loading: false,
-                        refreshing: false,
+                        loadingMore: true,
                     },
-                    value: BaseState.Idle,
+                    value: MainState.LoadMoreChannels,
                 }));
-            } else if (event.type === 'REFRESH_CHANNELS_SUCCESS') {
+            } else if (event.type === Actions.SET_SEARCH_QUERY) {
                 setState((prev) => ({
                     ...prev,
                     context: {
                         ...prev.context,
-                        channels: event.data?.channels || [],
-                        refreshing: false,
+                        searchQuery: event.data?.searchQuery || '',
                     },
-                    value: BaseState.Idle,
                 }));
-            } else if (event.type === 'ERROR') {
+            } else if (event.type === Actions.ERROR_HANDLED) {
+                console.log('Error handled:', event.data?.message);
                 setState((prev) => ({
                     ...prev,
                     context: {
                         ...prev.context,
-                        error: event.data?.message || 'An error occurred',
+                        error: event.data?.message || null,
                         loading: false,
                         refreshing: false,
+                        loadingMore: false,
                     },
-                    value: BaseState.Error,
+                    value: BaseState.Idle,
                 }));
             }
-        } catch (err) {
-            console.error('Error in send function:', err);
+        } catch (error) {
+            console.error('Error handling event:', error);
         }
     }, []);
 
-    // Add a matches method for state compatibility
+    // Add a custom matches function to the state
     const stateWithMatches = useMemo(() => {
         return {
             ...state,
-            matches: (value: string) => state.value === value,
+            matches: (checkState) => {
+                return state.value === checkState;
+            },
         };
     }, [state]);
 
     // Return as a tuple to match useMachine API
-    return [stateWithMatches, send];
+    return [stateWithMatches, send] as const;
 }
 
 const DialogsComponent = (props: InboxProps) => {
@@ -185,9 +234,9 @@ const DialogsComponent = (props: InboxProps) => {
     channelFilters.type = channelFilters?.type ?? RoomType.Direct;
     const { params } = useRoute<any>();
     const auth = useSelector(userSelector);
-    const dispatch = useDispatch();
     const navigation = useNavigation<any>();
-    const isFocused = useIsFocused();
+
+    // Create a ref to track if component is mounted
     const isMountedRef = useRef(true);
 
     // Use our safer custom implementation instead of the problematic useMachine
@@ -238,6 +287,16 @@ const DialogsComponent = (props: InboxProps) => {
         [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);
 
@@ -246,6 +305,28 @@ const DialogsComponent = (props: InboxProps) => {
         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 () => {
@@ -253,11 +334,8 @@ const DialogsComponent = (props: InboxProps) => {
         };
     }, []);
 
-    const {
-        data: userChannels,
-        loading: userChannelsLoading,
-        refetch: getChannelsRefetch,
-    } = useGetChannelsByUserWithServiceChannelsQuery({
+    // Apollo query for fetching channels
+    const { refetch: getChannelsRefetch } = useGetChannelsByUserWithServiceChannelsQuery({
         variables: {
             role: channelRole,
             criteria: channelFilters,
@@ -265,277 +343,449 @@ const DialogsComponent = (props: InboxProps) => {
             supportServiceCriteria: {
                 type: RoomType.Service,
             },
+            limit: 15,
+            skip: 0,
         },
-        onCompleted: (data) => {
-            if (isMountedRef.current) {
-                const allChannels = [...(data?.supportServiceChannels ?? []), ...(data?.channelsByUser ?? [])];
-                safeSend({
-                    type: 'FETCH_CHANNELS_SUCCESS',
-                    data: { channels: allChannels },
-                });
-            }
-        },
-        onError: (error) => {
-            if (isMountedRef.current) {
-                safeSend({
-                    type: 'ERROR',
-                    data: { message: error.message },
-                });
-            }
-        },
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'network-only',
+        notifyOnNetworkStatusChange: true,
+        skip: true, // Skip automatic fetching as we'll control it via the state machine
     });
 
-    // Set initial context once on mount, but don't fetch data as useFocusEffect will handle it
-    useEffect(() => {
-        console.log('Setting initial context');
-        // Only set the initial context with configuration, but don't trigger data fetching
-        // This prevents double fetching with useFocusEffect
-        safeSend({
-            type: DialogsActions.INITIAL_CONTEXT,
-            data: {
-                channelRole,
-                channelFilters: channelFiltersRef.current,
-                supportServices,
-                selectedChannelId: params?.channelId,
-            },
-        });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []); // Empty dependency array ensures this runs only once on mount
-
-    // Ref to track if we've already refreshed to prevent infinite loop
-    const hasRefreshedRef = useRef(false);
-    // Ref to store the current channelFilters to detect real changes
-    const channelFiltersRef = useRef(channelFilters);
-
-    // Shared function to handle channel refreshing
-    const refreshChannels = useCallback(() => {
-        // Skip if already refreshing to prevent loops
-        if (safeContextProperty('refreshing', false)) {
-            console.log('Skipping refresh - already in progress');
-            return Promise.resolve();
-        }
+    // Fetch channels implementation
+    const fetchChannelsDirectly = useCallback(
+        async (pageNum = 1, append = false) => {
+            try {
+                const context = safeGetContext();
+                console.log(`💫 FETCHING channels (page: ${pageNum}, append: ${append})`);
 
-        console.log('Starting channel refresh');
+                // Calculate skip based on page number (pagination)
+                const skipCount = (pageNum - 1) * 15;
 
-        // Start refreshing
-        safeSend({
-            type: DialogsActions.REFRESH_CHANNELS,
-        });
+                const { data } = await getChannelsRefetch({
+                    role: channelRole,
+                    criteria: channelFilters,
+                    supportServices: supportServices ? true : false,
+                    supportServiceCriteria: {
+                        type: RoomType.Service,
+                    },
+                    limit: 15,
+                    skip: skipCount,
+                });
 
-        // Use ref for filters to avoid dependency cycles
-        const currentFilters = channelFiltersRef.current;
+                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})`);
 
-        // Fetch the channels
-        return getChannelsRefetch({
-            role: channelRole,
-            criteria: currentFilters,
-            supportServices: supportServices ? true : false,
-            supportServiceCriteria: {
-                type: RoomType.Service,
-            },
-        })
-            .then((data) => {
                 if (isMountedRef.current) {
-                    const allChannels = [
-                        ...(data?.data?.supportServiceChannels ?? []),
-                        ...(data?.data?.channelsByUser ?? []),
-                    ];
-                    console.log(`Refresh completed, found ${allChannels.length} channels`);
-                    safeSend({
-                        type: 'REFRESH_CHANNELS_SUCCESS',
-                        data: { channels: allChannels },
-                    });
+                    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) => {
+            } catch (error) {
+                console.error('Error fetching channels:', error);
                 if (isMountedRef.current) {
-                    console.error('Channel refresh error:', error.message);
                     safeSend({
-                        type: 'ERROR',
-                        data: { message: error.message },
+                        type: Actions.ERROR_HANDLED,
+                        data: { message: 'Failed to fetch channels' },
                     });
                 }
-            });
-    }, [channelRole, supportServices, getChannelsRefetch, safeSend, safeContextProperty]);
+            }
+        },
+        [getChannelsRefetch, channelRole, channelFilters, supportServices, auth?.id, safeSend],
+    );
 
-    // Update the channelFiltersRef when channelFilters changes
+    // Add a safety timeout to ensure loading state is eventually cleared
+    // even if the fetchChannelsDirectly function fails to complete
     useEffect(() => {
-        const filtersChanged = JSON.stringify(channelFiltersRef.current) !== JSON.stringify(channelFilters);
-        if (filtersChanged) {
-            console.log('Channel filters changed, updating ref');
-            channelFiltersRef.current = channelFilters;
-
-            // Only refresh if already mounted and initialized
-            if (isMountedRef.current && safeContextProperty('channelRole') !== null) {
-                console.log('Refreshing due to filter change');
-                refreshChannels();
-            }
+        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);
         }
-    }, [channelFilters, refreshChannels, safeContextProperty]);
+    }, [loading, safeSend]);
 
-    // Handle focus effects
-    useFocusEffect(
-        useCallback(() => {
-            if (!isFocused) return;
+    // Add a faster refresh function with smaller dataset and timeout
+    const fastRefresh = useCallback(async () => {
+        try {
+            console.log('🔄 Fast refreshing channels...');
 
-            console.log('Screen focused, checking if refresh needed');
+            // 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,
+            });
 
-            // Only refresh on focus if we're not already loading and haven't refreshed
-            if (isMountedRef.current && !hasRefreshedRef.current) {
-                console.log('Refreshing on focus');
-                hasRefreshedRef.current = true;
-                refreshChannels();
-            }
+            // Cancel the timeout since we got a response
+            clearTimeout(clearRefreshingTimeout);
 
-            return () => {
-                // Reset the ref when the screen loses focus
-                console.log('Screen unfocused, resetting refresh state');
-                hasRefreshedRef.current = false;
-            };
-        }, [isFocused, refreshChannels]),
-    );
+            if (!isMountedRef.current) return;
 
-    const handleRefresh = useCallback(() => {
-        // Don't allow manual refresh while already refreshing
-        if (safeContextProperty('refreshing', false)) {
-            console.log('Manual refresh ignored - refresh already in progress');
-            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]);
 
-        console.log('Manual refresh triggered');
-        refreshChannels();
-    }, [refreshChannels, safeContextProperty]);
+    // 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]);
 
-    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, auth?.id]);
+    // 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,
+            });
 
-    const handleSelectChannel = useCallback(
-        (id: any, title: any) => {
             safeSend({
-                type: DialogsActions.SELECT_CHANNEL,
-                data: { channelId: id },
+                type: Actions.INITIAL_CONTEXT,
+                data: {
+                    channelRole,
+                    channelFilters,
+                    supportServices,
+                    selectedChannelId: params?.channelId,
+                },
             });
 
-            if (params?.channelId) {
-                navigation.navigate(config.INBOX_MESSEGE_PATH as any, {
-                    channelId: params?.channelId,
-                    role: params?.role,
-                    title: params?.title ?? null,
-                    hideTabBar: true,
+            // 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 {
-                navigation.navigate(config.INBOX_MESSEGE_PATH as any, {
-                    channelId: id,
-                    role: channelRole,
-                    title: title,
-                    hideTabBar: true,
+                console.log('⏩ Skipping focus refresh:', {
+                    isAlreadyFetching,
+                    hasTriggeredRefresh,
+                    shouldRefresh,
+                    timeGap: lastRefresh === null ? 'first refresh' : now - lastRefresh,
                 });
             }
+
+            return () => {
+                // Reset flag when focus is lost
+                hasTriggeredRefresh = false;
+            };
+        }, [safeSend, channels.length, safeMatches, safeGetContext, fastRefresh]),
+    );
+
+    // 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
+            });
         },
-        [params, navigation, channelRole, safeSend],
+        [navigation, channelRole, safeSend],
     );
 
     const handleSelectServiceChannel = useCallback(
-        (id: any, title: any, postParentId: any) => {
-            safeSend({
-                type: DialogsActions.SELECT_CHANNEL,
-                data: { channelId: id },
+        (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],
+    );
 
-            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,
-                    },
-                );
-            } 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,
-                    },
-                );
-            }
+    // Modified pull-to-refresh handler to use fast refresh
+    const handlePullToRefresh = useCallback(() => {
+        if (refreshing) {
+            console.log('⏩ Skipping refresh because already refreshing');
+            return;
+        }
+
+        // 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 },
+            });
         },
-        [params, navigation, channelRole, safeSend],
+        [safeSend],
     );
 
-    const searchQuery = safeContextProperty('searchQuery', '');
+    // 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]);
 
     return (
         <Box className="p-2">
             <FlatList
-                data={channels && channels?.length > 0 ? channels : []}
-                onRefresh={handleRefresh}
-                refreshing={safeContextProperty('refreshing', false)}
+                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={safeContextProperty('refreshing', false)}
-                            selectedChannelId={safeContextProperty('selectedChannelId', params?.channelId)}
+                            refreshing={refreshing}
+                            selectedChannelId={selectedChannelId}
                             role={channelRole}
                         />
                     ) : (
                         <DialogsListItem
+                            key={`direct-${channel.id}`}
                             onOpen={handleSelectChannel}
                             currentUser={auth}
                             channel={channel}
-                            selectedChannelId={safeContextProperty('selectedChannelId', params?.channelId)}
+                            selectedChannelId={selectedChannelId}
+                            forceRefresh={true}
                         />
-                    )
+                    );
+                }}
+                ListFooterComponent={() =>
+                    loadingMore ? (
+                        <Center className="py-4">
+                            <Spinner color={colors.blue[500]} size="small" />
+                        </Center>
+                    ) : null
                 }
-                ListEmptyComponent={() => (
-                    <>
-                        {userChannelsLoading || safeContextProperty('loading', false) ? (
-                            <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"
-                                        value={searchQuery}
-                                        onChangeText={(text) =>
-                                            safeSend({
-                                                type: DialogsActions.SET_SEARCH_QUERY,
-                                                data: { searchQuery: text },
-                                            })
-                                        }
-                                    />
-                                </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>
     );