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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@messenger-box/platform-mobile",
-    "version": "10.0.3-alpha.18",
+    "version": "10.0.3-alpha.19",
     "description": "Sample core for higher packages to depend on",
     "license": "ISC",
     "author": "CDMBase LLC",
@@ -43,5 +43,5 @@
     "typescript": {
         "definition": "lib/index.d.ts"
     },
-    "gitHead": "2c28c3aa50c7b38da5d1ef8b637d22b3bb42f42e"
+    "gitHead": "3a16f701de3692fdf794a03dd74cc0cfa765b90b"
 }

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

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