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

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

@@ -1,544 +0,0 @@
-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 { 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 { DialogsListItem } from '../components/DialogsListItem';
-import { ServiceDialogsListItem } from '../components/ServiceDialogsListItem';
-import { useGetChannelsByUserQuery, 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';
-
-export interface InboxProps {
-    channelFilters?: Record<string, unknown>;
-    channelRole?: string;
-    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 {
-    // 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,
-        },
-        value: 'idle',
-    });
-
-    // Create a safe send function
-    const send = useCallback((event) => {
-        try {
-            // Log event for debugging
-            console.log('Dialogs Event received:', event.type);
-
-            // Handle specific events manually
-            if (event.type === DialogsActions.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,
-                    },
-                    value: BaseState.FetchChannels,
-                }));
-            } else if (event.type === DialogsActions.SET_SEARCH_QUERY) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        searchQuery: event.data?.searchQuery || '',
-                    },
-                }));
-            } else if (event.type === DialogsActions.REFRESH_CHANNELS) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        refreshing: true,
-                    },
-                    value: MainState.RefreshChannels,
-                }));
-            } else if (event.type === DialogsActions.SELECT_CHANNEL) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        selectedChannelId: event.data?.channelId || null,
-                    },
-                    value: MainState.SelectChannel,
-                }));
-            } else if (event.type === DialogsActions.START_LOADING) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loading: true,
-                    },
-                }));
-            } else if (event.type === DialogsActions.STOP_LOADING) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loading: false,
-                    },
-                }));
-            } else if (event.type === 'FETCH_CHANNELS_SUCCESS') {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        channels: event.data?.channels || [],
-                        loading: false,
-                        refreshing: false,
-                    },
-                    value: BaseState.Idle,
-                }));
-            } else if (event.type === 'REFRESH_CHANNELS_SUCCESS') {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        channels: event.data?.channels || [],
-                        refreshing: false,
-                    },
-                    value: BaseState.Idle,
-                }));
-            } else if (event.type === 'ERROR') {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        error: event.data?.message || 'An error occurred',
-                        loading: false,
-                        refreshing: false,
-                    },
-                    value: BaseState.Error,
-                }));
-            }
-        } catch (err) {
-            console.error('Error in send function:', err);
-        }
-    }, []);
-
-    // Add a matches method for state compatibility
-    const stateWithMatches = useMemo(() => {
-        return {
-            ...state,
-            matches: (value: string) => state.value === value,
-        };
-    }, [state]);
-
-    // Return as a tuple to match useMachine API
-    return [stateWithMatches, send];
-}
-
-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 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],
-    );
-
-    // 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]);
-
-    // Use cleanup function to prevent setting state after unmount
-    useEffect(() => {
-        return () => {
-            isMountedRef.current = false;
-        };
-    }, []);
-
-    const {
-        data: userChannels,
-        loading: userChannelsLoading,
-        refetch: getChannelsRefetch,
-    } = useGetChannelsByUserWithServiceChannelsQuery({
-        variables: {
-            role: channelRole,
-            criteria: channelFilters,
-            supportServices: supportServices ? true : false,
-            supportServiceCriteria: {
-                type: RoomType.Service,
-            },
-        },
-        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 },
-                });
-            }
-        },
-    });
-
-    // 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();
-        }
-
-        console.log('Starting channel refresh');
-
-        // Start refreshing
-        safeSend({
-            type: DialogsActions.REFRESH_CHANNELS,
-        });
-
-        // Use ref for filters to avoid dependency cycles
-        const currentFilters = channelFiltersRef.current;
-
-        // 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 },
-                    });
-                }
-            })
-            .catch((error) => {
-                if (isMountedRef.current) {
-                    console.error('Channel refresh error:', error.message);
-                    safeSend({
-                        type: 'ERROR',
-                        data: { message: error.message },
-                    });
-                }
-            });
-    }, [channelRole, supportServices, getChannelsRefetch, safeSend, safeContextProperty]);
-
-    // Update the channelFiltersRef when channelFilters changes
-    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();
-            }
-        }
-    }, [channelFilters, refreshChannels, safeContextProperty]);
-
-    // Handle focus effects
-    useFocusEffect(
-        useCallback(() => {
-            if (!isFocused) return;
-
-            console.log('Screen focused, checking if refresh needed');
-
-            // 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();
-            }
-
-            return () => {
-                // Reset the ref when the screen loses focus
-                console.log('Screen unfocused, resetting refresh state');
-                hasRefreshedRef.current = false;
-            };
-        }, [isFocused, refreshChannels]),
-    );
-
-    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;
-        }
-
-        console.log('Manual refresh triggered');
-        refreshChannels();
-    }, [refreshChannels, safeContextProperty]);
-
-    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]);
-
-    const handleSelectChannel = useCallback(
-        (id: any, title: any) => {
-            safeSend({
-                type: DialogsActions.SELECT_CHANNEL,
-                data: { channelId: id },
-            });
-
-            if (params?.channelId) {
-                navigation.navigate(config.INBOX_MESSEGE_PATH as any, {
-                    channelId: params?.channelId,
-                    role: params?.role,
-                    title: params?.title ?? null,
-                    hideTabBar: true,
-                });
-            } else {
-                navigation.navigate(config.INBOX_MESSEGE_PATH as any, {
-                    channelId: id,
-                    role: channelRole,
-                    title: title,
-                    hideTabBar: true,
-                });
-            }
-        },
-        [params, navigation, channelRole, safeSend],
-    );
-
-    const handleSelectServiceChannel = useCallback(
-        (id: any, title: any, postParentId: any) => {
-            safeSend({
-                type: DialogsActions.SELECT_CHANNEL,
-                data: { channelId: id },
-            });
-
-            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,
-                    },
-                );
-            }
-        },
-        [params, navigation, channelRole, safeSend],
-    );
-
-    const searchQuery = safeContextProperty('searchQuery', '');
-
-    return (
-        <Box className="p-2">
-            <FlatList
-                data={channels && channels?.length > 0 ? channels : []}
-                onRefresh={handleRefresh}
-                refreshing={safeContextProperty('refreshing', false)}
-                contentContainerStyle={{ minHeight: '100%' }}
-                ItemSeparatorComponent={() => <Box className="h-0.5 bg-gray-200" />}
-                renderItem={({ item: channel }: any) =>
-                    channel?.type === RoomType.Service ? (
-                        <ServiceDialogsListItem
-                            onOpen={handleSelectServiceChannel}
-                            currentUser={auth}
-                            channel={channel}
-                            refreshing={safeContextProperty('refreshing', false)}
-                            selectedChannelId={safeContextProperty('selectedChannelId', params?.channelId)}
-                            role={channelRole}
-                        />
-                    ) : (
-                        <DialogsListItem
-                            onOpen={handleSelectChannel}
-                            currentUser={auth}
-                            channel={channel}
-                            selectedChannelId={safeContextProperty('selectedChannelId', params?.channelId)}
-                        />
-                    )
-                }
-                ListEmptyComponent={() => (
-                    <>
-                        {userChannelsLoading || safeContextProperty('loading', false) ? (
-                            <Center className="flex-1 justify-center items-center">
-                                <Spinner color={colors.blue[500]} />
-                            </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>
-                            </Box>
-                        )}
-                    </>
-                )}
-                keyExtractor={(item, index) => 'key' + index}
-            />
-        </Box>
-    );
-};
-
-export const Dialogs = React.memo(DialogsComponent);

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

@@ -1,119 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import { FlatList, Box } from '@admin-layout/gluestack-ui-mobile';
-import { useSelector, useDispatch } from 'react-redux';
-import { useNavigation, useRoute, useIsFocused, useFocusEffect } from '@react-navigation/native';
-import { useSupportServiceChannelsQuery } from 'common/graphql';
-import { userSelector } from '@adminide-stack/user-auth0-client';
-import { CHANGE_SETTINGS_ACTION } from '@admin-layout/client';
-import { SupportServiceDialogsListItem } from '../components/SupportServiceDialogsListItem';
-import { config } from '../config';
-
-export interface SupportServiceInboxProps {
-    channelFilters?: Record<string, unknown>;
-    channelRole?: string;
-}
-
-const SupportServiceDialogsComponent = (props: SupportServiceInboxProps) => {
-    const { channelFilters, channelRole } = props;
-    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: serviceChannels,
-        loading: serviceChannelsLoading,
-        refetch: getServiceChannelsRefetch,
-    } = useSupportServiceChannelsQuery({
-        variables: {
-            criteria: { type: 'SERVICE' },
-        },
-        onCompleted: (data: any) => {
-            //setRefresh(false);
-        },
-    });
-
-    useFocusEffect(
-        React.useCallback(() => {
-            // Do something when the screen is focused
-            setRefresh(false);
-            getServiceChannelsRefetch({ criteria: { type: 'SERVICE' } });
-
-            return () => {
-                // Do something when the screen is unfocused
-                // Useful for cleanup functions
-            };
-        }, []),
-    );
-
-    const channels = React.useMemo(() => {
-        if (!serviceChannels?.supportServiceChannels?.length) return null;
-        let uChannels: any =
-            serviceChannels?.supportServiceChannels?.filter((c: any) =>
-                c.members.some((u: any) => u !== null && u.user.__typename == 'UserAccount'),
-            ) ?? [];
-        return uChannels || [];
-    }, [serviceChannels]);
-
-    const handleSelectChannel = 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,
-                },
-            );
-        } 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,
-                },
-            );
-        }
-    }, []);
-
-    const handleRefresh = useCallback(() => {
-        //if(userChannels?.channelsByUser?.length != channels?.length)setRefresh(true);
-        setRefresh(true);
-        getServiceChannelsRefetch({ criteria: { type: 'SERVICE' } })?.then((res: any) => setRefresh(false));
-    }, []);
-
-    return (
-        <Box className="p-2 pb-0">
-            <FlatList
-                data={channels && channels?.length > 0 ? channels : []}
-                onRefresh={handleRefresh}
-                refreshing={refreshing}
-                contentContainerStyle={{}}
-                ItemSeparatorComponent={() => <Box className="h-0.5 bg-gray-200" />}
-                renderItem={({ item: channel }) => (
-                    <SupportServiceDialogsListItem
-                        onOpen={handleSelectChannel}
-                        currentUser={auth}
-                        channel={channel}
-                        refreshing={refreshing}
-                        selectedChannelId={params?.channelId}
-                        role={channelRole}
-                    />
-                )}
-                keyExtractor={(item, index) => 'support-service-key' + index}
-            />
-        </Box>
-    );
-};
-
-export const SupportServiceDialogs = React.memo(SupportServiceDialogsComponent);