@messenger-box/platform-mobile 10.0.3-alpha.23 → 10.0.3-alpha.232

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

@@ -1,829 +0,0 @@
-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 } 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 { 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>;
-    channelRole?: string;
-    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 navigation = useNavigation<any>();
-
-    // 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,
-            supportServices: supportServices ? true : false,
-            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
-    });
-
-    // 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 },
-                        });
-                    }
-
-                    // 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' },
-                    });
-                }
-            }
-        },
-        [getChannelsRefetch, channelRole, channelFilters, supportServices, auth?.id, safeSend],
-    );
-
-    // Optimize safety timeout to use a shorter duration
-    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
-
-            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 () => {
-                // 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
-            });
-        },
-        [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;
-        }
-
-        // 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 {
-            console.log('Skip loading more: loadingMore=', loadingMore, 'hasMoreChannels=', hasMoreChannels);
-        }
-    }, [safeSend, loadingMore, hasMoreChannels, page]);
-
-    return (
-        <Box className="p-2">
-            <FlatList
-                data={channels}
-                onRefresh={handlePullToRefresh}
-                refreshing={refreshing}
-                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 ? (
-                        <ServiceDialogsListItem
-                            key={key}
-                            onOpen={handleSelectServiceChannel}
-                            currentUser={auth}
-                            channel={channel}
-                            refreshing={refreshing}
-                            selectedChannelId={selectedChannelId}
-                            role={channelRole}
-                        />
-                    ) : (
-                        <DialogsListItem
-                            key={key}
-                            onOpen={handleSelectChannel}
-                            currentUser={auth}
-                            channel={channel}
-                            selectedChannelId={selectedChannelId}
-                            forceRefresh={false} // Change to false to avoid unnecessary refreshes
-                        />
-                    );
-                }}
-                ListFooterComponent={() =>
-                    loadingMore ? (
-                        <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
-                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 })
-                }
-                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) {
-                        return (
-                            <Center className="flex-1 justify-center items-center" style={{ height: 300 }}>
-                                <Spinner color={colors.blue[500]} size="large" />
-                                <Text className="mt-4 text-gray-500">Loading conversations...</Text>
-                            </Center>
-                        );
-                    }
-
-                    // Show empty state when no channels and not loading
-                    return (
-                        <Box className="p-6">
-                            <Box className="mb-6">
-                                <Heading className="text-2xl font-bold">Direct Messages</Heading>
-                                <Text className="text-gray-600 mt-1">Private conversations with other users</Text>
-                            </Box>
-
-                            <Input
-                                className="mb-8 h-[50] rounded-md border-gray-300 border"
-                                size="md"
-                                style={{
-                                    paddingVertical: 8,
-                                    marginBottom: 10,
-                                    borderColor: '#d1d5db',
-                                    borderRadius: 10,
-                                }}
-                            >
-                                <InputField
-                                    placeholder="Search messages..."
-                                    onChangeText={handleSearchChange}
-                                    value={searchQuery}
-                                />
-                            </Input>
-
-                            <Center className="items-center" style={{ paddingVertical: 5 }}>
-                                <Box className="w-16 h-16 rounded-full bg-blue-500 flex items-center justify-center mb-5">
-                                    <Ionicons name="chatbubble-ellipses" size={30} color="white" />
-                                </Box>
-
-                                <Text className="text-2xl font-bold text-center mb-2">No messages yet</Text>
-
-                                <Text className="text-gray-600 text-center mb-8">
-                                    When you start conversations with others,{'\n'}
-                                    they'll appear here.
-                                </Text>
-                            </Center>
-                        </Box>
-                    );
-                }}
-            />
-        </Box>
-    );
-};
-
-export const Dialogs = React.memo(DialogsComponent);