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

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useEffect, useState } from 'react';
+import React, { useCallback, useMemo, useEffect, useState, useRef } from 'react';
 import {
     FlatList,
     Box,
@@ -22,6 +22,7 @@ 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>;
@@ -29,6 +30,155 @@ 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 {
+    // 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 };
@@ -38,8 +188,70 @@ const DialogsComponent = (props: InboxProps) => {
     const dispatch = useDispatch();
     const navigation = useNavigation<any>();
     const isFocused = useIsFocused();
-    const [refreshing, setRefresh] = useState<boolean>(false);
-    // const [userDirectChannel, setUserDirectChannel] = useState<any>([]);
+    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,
@@ -54,50 +266,145 @@ const DialogsComponent = (props: InboxProps) => {
                 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 },
+                });
+            }
+        },
     });
 
-    // const {
-    //     data: userChannels,
-    //     loading: userChannelsLoading,
-    //     refetch: getChannelsRefetch,
-    // } = useGetChannelsByUserQuery({
-    //     variables: {
-    //         role: channelRole,
-    //         criteria: channelFilters,
-    //     },
-    //     onCompleted: (data: any) => {
-    //         setRefresh(false);
-    //     },
-    // });
+    // 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
 
-    useFocusEffect(
-        React.useCallback(() => {
-            // Do something when the screen is focused
-            setRefresh(false);
-            //getChannelsRefetch({ role: channelRole, criteria: channelFilters });
-            getChannelsRefetch({
-                role: channelRole,
-                criteria: channelFilters,
-                supportServices: supportServices ? true : false,
-                supportServiceCriteria: {
-                    type: RoomType.Service,
-                },
+    // 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 () => {
-                // Do something when the screen is unfocused
-                // Useful for cleanup functions
+                // Reset the ref when the screen loses focus
+                console.log('Screen unfocused, resetting refresh state');
+                hasRefreshedRef.current = false;
             };
-        }, [channelFilters]),
+        }, [isFocused, refreshChannels]),
     );
 
-    // const channels = React.useMemo(() => {
-    //     if (!userChannels?.channelsByUser?.length) return null;
-    //     let uChannels: any =
-    //         userChannels?.channelsByUser?.filter((c: any) =>
-    //             c.members.some((u: any) => u !== null && u?.user?.id != auth?.id && u.user.__typename == 'UserAccount'),
-    //         ) ?? [];
-    //     return (uChannels && orderBy(uChannels, ['updatedAt'], ['desc'])) || [];
-    // }, [userChannels]);
+    const 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 ?? [])];
@@ -106,102 +413,78 @@ const DialogsComponent = (props: InboxProps) => {
                 c.members.some((u: any) => u !== null && u?.user?.id != auth?.id && u.user.__typename == 'UserAccount'),
             ) ?? [];
         return (uChannels && orderBy(uChannels, ['updatedAt'], ['desc'])) || [];
-    }, [userChannels]);
-
-    // useEffect(() => {
-    //     setTimeout(() => {
-    //         dispatch({
-    //             type: CHANGE_SETTINGS_ACTION,
-    //             payload: {
-    //                 footerRender: false,
-    //             },
-    //         } as any);
-    //     }, 0);
-    //     return () => {
-    //         dispatch({
-    //             type: CHANGE_SETTINGS_ACTION,
-    //             payload: {
-    //                 footerRender: true,
-    //             },
-    //         } as any);
-    //     };
-    // }, []);
-
-    // useEffect(() => {
-    //     if (userChannels?.channelsByUser) {
-    //         if (userChannels?.channelsByUser?.length == 0) {
-    //             setUserDirectChannel([]);
-    //         }
-    //         //Direct channel
-    //         let userDirectChannels: any =
-    //             userChannels?.channelsByUser
-    //                 ?.filter((i: any) => i.type == 'DIRECT')
-    //                 ?.filter((c: any) =>
-    //                     c.members.some((u: any) => u?.user?.id != auth?.id && u.user.__typename == 'UserAccount'),
-    //                 ) ?? [];
-
-    //         if (userDirectChannels?.length > 0) setUserDirectChannel(userDirectChannels);
-    //     }
-    // }, [userChannels?.channelsByUser]);
-
-    const handleSelectChannel = useCallback((id: any, title: any) => {
-        if (params?.channelId) {
-            navigation.navigate(config.INBOX_MESSEGE_PATH as any, {
-                channelId: params?.channelId,
-                role: params?.role,
-                title: params?.title ?? null,
-                hideTabBar: true,
-            });
-        } else {
-            navigation.navigate(config.INBOX_MESSEGE_PATH as any, {
-                channelId: id,
-                role: channelRole,
-                title: title,
-                hideTabBar: true,
+    }, [userChannels, auth?.id]);
+
+    const handleSelectChannel = useCallback(
+        (id: any, title: any) => {
+            safeSend({
+                type: DialogsActions.SELECT_CHANNEL,
+                data: { channelId: id },
             });
-        }
-    }, []);
 
-    const handleSelectServiceChannel = useCallback((id: any, title: any, postParentId: any) => {
-        if (params?.channelId) {
-            navigation.navigate(
-                params?.postParentId || params?.postParentId == 0
-                    ? config.THREAD_MESSEGE_PATH
-                    : (config.THREADS_PATH as any),
-                {
+            if (params?.channelId) {
+                navigation.navigate(config.INBOX_MESSEGE_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),
-                {
+                });
+            } else {
+                navigation.navigate(config.INBOX_MESSEGE_PATH as any, {
                     channelId: id,
                     role: channelRole,
                     title: title,
-                    postParentId: postParentId,
                     hideTabBar: true,
-                },
-            );
-        }
-    }, []);
+                });
+            }
+        },
+        [params, navigation, channelRole, safeSend],
+    );
 
-    const handleRefresh = useCallback(() => {
-        //if(userChannels?.channelsByUser?.length != channels?.length)setRefresh(true);
-        setRefresh(true);
-        getChannelsRefetch({ role: channelRole, criteria: channelFilters })?.finally(() => setRefresh(false));
-    }, []);
+    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={refreshing}
+                refreshing={safeContextProperty('refreshing', false)}
                 contentContainerStyle={{ minHeight: '100%' }}
                 ItemSeparatorComponent={() => <Box className="h-0.5 bg-gray-200" />}
                 renderItem={({ item: channel }: any) =>
@@ -210,8 +493,8 @@ const DialogsComponent = (props: InboxProps) => {
                             onOpen={handleSelectServiceChannel}
                             currentUser={auth}
                             channel={channel}
-                            refreshing={refreshing}
-                            selectedChannelId={params?.channelId}
+                            refreshing={safeContextProperty('refreshing', false)}
+                            selectedChannelId={safeContextProperty('selectedChannelId', params?.channelId)}
                             role={channelRole}
                         />
                     ) : (
@@ -219,13 +502,13 @@ const DialogsComponent = (props: InboxProps) => {
                             onOpen={handleSelectChannel}
                             currentUser={auth}
                             channel={channel}
-                            selectedChannelId={params?.channelId}
+                            selectedChannelId={safeContextProperty('selectedChannelId', params?.channelId)}
                         />
                     )
                 }
                 ListEmptyComponent={() => (
                     <>
-                        {userChannelsLoading ? (
+                        {userChannelsLoading || safeContextProperty('loading', false) ? (
                             <Center className="flex-1 justify-center items-center">
                                 <Spinner color={colors.blue[500]} />
                             </Center>
@@ -233,7 +516,16 @@ const DialogsComponent = (props: InboxProps) => {
                             <Box className="p-5">
                                 <Heading>Chat</Heading>
                                 <Input className={`h-[50] mt-3 rounded-[50] border-gray-200 border `}>
-                                    <InputField placeholder="Search" />
+                                    <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} />