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

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

@@ -13,6 +13,7 @@ import { userSelector } from '@adminide-stack/user-auth0-client';
 import { CHANGE_SETTINGS_ACTION } from '@admin-layout/client';
 import { ThreadViewItem } from '../components/ThreadsViewItem';
 import { config } from '../config';
+import { Actions } from '../workflow/dialog-threads-xstate';
 const { MESSAGES_PER_PAGE } = config;
 
 export interface ThreadsViewProps {
@@ -49,27 +50,46 @@ const ThreadsViewComponent = ({
     const navigation = useNavigation<any>();
     const isFocused = useIsFocused();
     const [refreshing, setRefresh] = useState<boolean>(false);
-    const [threadData, setThreadsData] = useState<any>([]);
 
-    // const {
-    //     data,
-    //     loading: threadLoading,
-    //     error,
-    //     refetch,
-    //     subscribeToMore,
-    // } = useThreadMessagesQuery({
-    //     variables: {
-    //         channelId: channelId?.toString(),
-    //         role: role?.toString(),
-    //         limit: MESSAGES_PER_PAGE,
-    //         repliesLimit2: 5,
-    //     },
-    //     // fetchPolicy: 'cache-and-network',
-    // });
-
-    // const { data: threadCreatedUpdated } = useOnThreadCreatedUpdatedSubscription({
-    //     variables: { channelId: channelId?.toString() },
-    // });
+    // Use thread subscription for real-time updates
+    const { data: threadCreatedUpdated } = useOnThreadCreatedUpdatedSubscription({
+        variables: { channelId: channelId?.toString() },
+    });
+
+    // Subscribe to thread updates
+    const subscribeToNewMessages = useCallback(() => {
+        return subscribeToMore({
+            document: THREAD_CHAT_ADDED,
+            variables: { channelId: channelId?.toString() },
+            updateQuery: (prev: any, { subscriptionData }: any) => {
+                if (!subscriptionData.data) return prev;
+
+                const newThread = subscriptionData.data.threadCreatedUpdated.data;
+                if (!newThread) return prev;
+
+                const threads = prev.threadMessages.data || [];
+                const index = threads.findIndex((t: any) => t.id === newThread.id);
+
+                let updatedThreads;
+                if (index > -1) {
+                    // Update existing thread
+                    updatedThreads = [...threads];
+                    updatedThreads[index] = newThread;
+                } else {
+                    // Add new thread
+                    updatedThreads = [newThread, ...threads];
+                }
+
+                return {
+                    ...prev,
+                    threadMessages: {
+                        ...prev.threadMessages,
+                        data: uniqBy(updatedThreads, 'id'),
+                    },
+                };
+            },
+        });
+    }, [channelId, subscribeToMore]);
 
     useFocusEffect(
         React.useCallback(() => {
@@ -81,64 +101,25 @@ const ThreadsViewComponent = ({
                 limit: MESSAGES_PER_PAGE,
                 repliesLimit2: 5,
             });
-            // .then(({ data }) => {
-            //     if (!data?.threadMessages?.data) {
-            //         return;
-            //     }
 
-            //     if (data?.threadMessages?.data?.length) {
-            //         const { data: newThreads } = data?.threadMessages;
-            //         setThreadsData((oldThreads: any) => uniqBy([...oldThreads, ...newThreads], ({ id }) => id));
-            //     }
-            // });
+            // Setup subscription
+            const unsubscribe = subscribeToNewMessages();
 
             return () => {
-                // Do something when the screen is unfocused
-                // Useful for cleanup functions
+                // Unsubscribe on cleanup
+                if (unsubscribe) unsubscribe();
             };
         }, []),
     );
 
-    // React.useEffect(() => {
-    //     if (data?.threadMessages?.data?.length) {
-    //         const { data: newThreads } = data?.threadMessages;
-    //         setThreadsData((oldThreads: any) => uniqBy([...oldThreads, ...newThreads], ({ id }) => id));
-    //     }
-    // }, [data]);
-
-    // React.useEffect(() => {
-    //     if (threadCreatedUpdated?.threadCreatedUpdated?.data) {
-    //         const { data: newThreads } = threadCreatedUpdated?.threadCreatedUpdated;
-
-    //         setThreadsData((oldThreads: any) => {
-    //             const i = oldThreads.findIndex((el: any) => el.id === newThreads?.id);
-    //             if (i > -1) oldThreads[i] = newThreads; // (2)
-    //             else oldThreads.push(newThreads);
-    //             return oldThreads;
-    //         });
-    //         // setThreadsData((oldThreads: any) => uniqBy([...oldThreads, newThreads], ({ id }) => id));
-    //     }
-    // }, [threadCreatedUpdated]);
-
-    const setData = React.useCallback((newThreads: any) => {
-        setThreadsData((oldThreads: any) => {
-            const i = oldThreads.findIndex((el: any) => el.id === newThreads?.id);
-            if (i > -1) oldThreads[i] = newThreads; // (2)
-            else oldThreads.push(newThreads);
-            return oldThreads;
-        });
-        // setThreadsData((oldThreads: any) => uniqBy([...oldThreads, newThreads], ({ id }) => id));
-    }, []);
-
-    // const threads = React.useMemo(() => {
-    //     if (!threadData?.length) return null;
-    //     return orderBy(threadData, ['updatedAt'], ['desc']) || [];
-    //     //return threadData || [];
-    // }, [threadData]);
+    // Effect for thread updates from subscription
+    React.useEffect(() => {
+        if (threadCreatedUpdated?.threadCreatedUpdated?.data) {
+            // The subscription handler will handle updates
+        }
+    }, [threadCreatedUpdated]);
 
     const threads = React.useMemo(() => {
-        // if (!data?.threadMessages?.data?.length) return null;
-        // const { data: newThreads } = data?.threadMessages;
         if (data?.threadMessages?.data?.length == 0) return [];
         const threadsFiltered = data?.threadMessages?.data
             ? uniqBy([...data?.threadMessages?.data], ({ id }: any) => id)
@@ -149,7 +130,6 @@ const ThreadsViewComponent = ({
     const threadReplies = React.useMemo(() => {
         if (!threads?.length) return null;
         return threads?.map((t: any) => t?.replies)?.flat(1) || [];
-        //return threadData || [];
     }, [threads]);
 
     const handleSelectThread = useCallback((id: any, title: any, postParentId: any) => {
@@ -160,146 +140,85 @@ const ThreadsViewComponent = ({
             postParentId: postParentId,
             hideTabBar: true,
         });
-        // if (params?.channelId) {
-        //     navigation.navigate(config.THREAD_MESSEGE_PATH as any, {
-        //         channelId: params?.channelId,
-        //         title: params?.title ?? null,
-        //         postParentId: postParentId,
-        //         hideTabBar: true,
-        //     });
-        // } else {
-        //     navigation.navigate(config.THREAD_MESSEGE_PATH as any, {
-        //         channelId: id,
-        //         title: title,
-        //         postParentId: postParentId,
-        //         hideTabBar: true,
-        //     });
-        // }
     }, []);
 
     const handleRefresh = useCallback(() => {
+        setRefresh(true);
         refetch({
             channelId: channelId?.toString(),
             role: role?.toString(),
             limit: MESSAGES_PER_PAGE,
             repliesLimit2: 5,
+        }).finally(() => {
+            setRefresh(false);
         });
-        // .then(({ data }) => {
-        //     if (!data?.threadMessages?.data) {
-        //         return;
-        //     }
-
-        //     if (data?.threadMessages?.data?.length) {
-        //         const { data: newThreads } = data?.threadMessages;
-        //         setThreadsData((oldThreads: any) => uniqBy([...oldThreads, ...newThreads], ({ id }) => id));
-        //     }
-        // });
     }, []);
 
     const fetchMoreThreads = useCallback(() => {
         refetch({
             channelId: channelId?.toString(),
             role: role?.toString(),
-            skip: threads?.length,
+            limit: MESSAGES_PER_PAGE,
+            repliesLimit2: 5,
         });
     }, []);
 
-    // if (!threadReplies || threadReplies?.length == 0) {
-    //     return (
-    //         <Center w="full" bg={'f8f8f8'} height={'full'}>
-    //             You don't have any message yet!
-    //         </Center>
-    //     );
-    // }
-    console.log('threadLoading', threadLoading, ' threads?.length=', threads?.length);
+    if (error) {
+        return (
+            <Box style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+                <Text>Error loading threads. {error.message}</Text>
+                <Button onPress={handleRefresh} style={{ marginTop: 4 }}>
+                    <Text>Try Again</Text>
+                </Button>
+            </Box>
+        );
+    }
 
     return (
-        <Box className="flex-1 p-2 pb-0 bg-gray-100 dark:border-gray-600 dark:bg-gray-700">
-            <FlatList
-                style={{ flex: 1 }}
-                data={threads && threads?.length > 0 ? threads : []}
-                onRefresh={handleRefresh}
-                refreshing={threadLoading}
-                contentContainerStyle={{ paddingBottom: 60 }}
-                ItemSeparatorComponent={() => <Box className="h-0.5 bg-gray-200" />}
-                renderItem={({ item: thread, index }) => (
-                    <ThreadViewItem
-                        key={index}
-                        onOpen={handleSelectThread}
-                        currentUser={auth}
-                        thread={thread}
-                        role={role}
-                        setData={setData}
-                    />
-                )}
-                ListEmptyComponent={() => (
-                    <>
-                        {/* {!threadLoading || threads?.length == 0} */}
-                        {!threadLoading && threads?.length == 0 && (
-                            <Box className="p-5">
-                                <Center className="mt-6">
-                                    <Ionicons name="chatbubbles" size={50} />
-                                    <Text>You don't have any message yet!</Text>
-                                </Center>
-                            </Box>
-                        )}
-                    </>
-                )}
-                ListFooterComponent={() => (
-                    <>
-                        <SubscriptionHandler
+        <Box style={{ flex: 1 }}>
+            {threadLoading && !threads?.length ? (
+                <Center style={{ flex: 1 }}>
+                    <Spinner size="large" />
+                </Center>
+            ) : threads?.length === 0 ? (
+                <Box style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+                    <Text>No threads found</Text>
+                </Box>
+            ) : (
+                <FlatList
+                    data={threads}
+                    keyExtractor={(item) => item.id.toString()}
+                    renderItem={({ item }) => (
+                        <ThreadViewItem
+                            {...item}
+                            onPress={handleSelectThread}
                             channelId={channelId}
-                            subscribeToNewMessages={() =>
-                                subscribeToMore({
-                                    document: THREAD_CHAT_ADDED,
-                                    variables: {
-                                        channelId: channelId?.toString(),
-                                        postParentId: null,
-                                    },
-                                    updateQuery: (prev, { subscriptionData }: any) => {
-                                        if (!subscriptionData.data) return prev;
-                                        const newPostThreadData: any =
-                                            subscriptionData?.data?.threadCreatedUpdated?.data;
-                                        const newMessage: any =
-                                            subscriptionData?.data?.threadCreatedUpdated?.lastMessage;
-                                        const data = prev?.threadMessages?.data?.map((t: any) =>
-                                            t.id === newPostThreadData?.id
-                                                ? {
-                                                      ...t,
-                                                      replies: [newMessage, ...t?.replies],
-                                                      replyCount: newPostThreadData?.replyCount,
-                                                      lastReplyAt: newPostThreadData?.lastReplyAt,
-                                                      updatedAt: newPostThreadData?.updatedAt,
-                                                  }
-                                                : t,
-                                        );
-
-                                        return Object.assign({}, prev, {
-                                            threadMessages: {
-                                                ...prev?.threadMessages,
-                                                // totalCount: prev?.threadMessages?.totalCount + 1,
-                                                data: data,
-                                            },
-                                        });
-                                    },
-                                })
-                            }
+                            channelsDetail={channelsDetail}
                         />
-                    </>
-                )}
-                keyExtractor={(item, index) => 'threads-view-key' + index}
-                onEndReached={fetchMoreThreads}
-                onEndReachedThreshold={0.1}
-            />
+                    )}
+                    refreshing={refreshing}
+                    onRefresh={handleRefresh}
+                    onEndReached={fetchMoreThreads}
+                    onEndReachedThreshold={0.5}
+                    contentContainerStyle={{ padding: 16 }}
+                    ItemSeparatorComponent={() => <Box style={{ height: 3 }} />}
+                />
+            )}
+            <SubscriptionHandler subscribeToNewMessages={subscribeToNewMessages} channelId={channelId} />
         </Box>
     );
 };
 
+// Component to handle subscription logic
 const SubscriptionHandler = ({ subscribeToNewMessages, channelId }: IThreadSubscriptionHandlerProps) => {
-    useEffect(() => subscribeToNewMessages(), [channelId]);
-    return <></>;
+    useEffect(() => {
+        const unsubscribe = subscribeToNewMessages();
+        return () => {
+            if (unsubscribe) unsubscribe();
+        };
+    }, [channelId]);
+
+    return null;
 };
 
 export const ThreadsView = ThreadsViewComponent;
-
-// export const ThreadsView = React.memo(ThreadsViewComponent);

package/src/screens/inbox/hooks/useSafeDialogThreadsMachine.ts

@@ -0,0 +1,136 @@
+import { useState, useCallback, useMemo } from 'react';
+import { BaseState, Actions, dialogThreadsXstate } from '../workflow/dialog-threads-xstate';
+
+// Define proper types for the state and context
+export interface DialogThreadsContext {
+    channelId?: string;
+    postParentId?: string | number;
+    role?: string;
+    channelsDetail: any;
+    threadData: any[];
+    loading: boolean;
+    error: any;
+}
+
+export interface DialogThreadsState {
+    context: DialogThreadsContext;
+    value: BaseState;
+    matches: (stateValue: string) => boolean;
+}
+
+// Define proper action types
+export type DialogThreadsEvent =
+    | { type: typeof Actions.INITIALIZE; data: { channelId?: string; postParentId?: string | number; role?: string } }
+    | { type: typeof Actions.FETCH_CHANNEL_DETAIL; data: { id: string } }
+    | { type: typeof Actions.SET_CHANNEL_DETAIL; data: { channelsDetail: any } }
+    | { type: typeof Actions.FETCH_THREADS; data?: any }
+    | { type: typeof Actions.SET_THREADS; data: { threadData: any[] } }
+    | { type: typeof Actions.ERROR; data: { error: any } };
+
+/**
+ * Custom hook to safely use the dialog threads state machine
+ * This provides a fallback implementation in case useMachine from XState has issues
+ */
+export function useSafeDialogThreadsMachine(): [DialogThreadsState, (event: DialogThreadsEvent) => void] {
+    // Initialize with default state from the machine's initial context
+    const [state, setState] = useState<DialogThreadsState>({
+        context: {
+            channelId: undefined,
+            postParentId: undefined,
+            role: undefined,
+            channelsDetail: null,
+            threadData: [],
+            loading: true,
+            error: null,
+        },
+        value: BaseState.Idle,
+        matches: (value: string) => value === BaseState.Idle,
+    });
+
+    // Create a memoized function to determine state matching
+    const matches = useCallback((value: string) => value === state.value, [state.value]);
+
+    // Update the matches function when state changes
+    useMemo(() => {
+        setState((prev) => ({
+            ...prev,
+            matches,
+        }));
+    }, [matches]);
+
+    // Create a safe send function to handle events
+    const send = useCallback((event: DialogThreadsEvent) => {
+        try {
+            // Handle specific events based on the event type
+            if (event.type === Actions.INITIALIZE) {
+                setState((prev) => ({
+                    ...prev,
+                    context: {
+                        ...prev.context,
+                        channelId: event.data?.channelId,
+                        postParentId: event.data?.postParentId,
+                        role: event.data?.role,
+                        loading: true,
+                        error: null,
+                    },
+                    value: BaseState.LoadingChannel,
+                }));
+            } else if (event.type === Actions.SET_CHANNEL_DETAIL) {
+                setState((prev) => ({
+                    ...prev,
+                    context: {
+                        ...prev.context,
+                        channelsDetail: event.data?.channelsDetail,
+                        loading: false,
+                    },
+                    value: BaseState.LoadingThreads,
+                }));
+            } else if (event.type === Actions.SET_THREADS) {
+                setState((prev) => ({
+                    ...prev,
+                    context: {
+                        ...prev.context,
+                        threadData: event.data?.threadData || [],
+                        loading: false,
+                    },
+                    value: BaseState.Active,
+                }));
+            } else if (event.type === Actions.FETCH_THREADS) {
+                setState((prev) => ({
+                    ...prev,
+                    context: {
+                        ...prev.context,
+                        loading: true,
+                    },
+                    value: BaseState.LoadingThreads,
+                }));
+            } else if (event.type === Actions.ERROR) {
+                setState((prev) => ({
+                    ...prev,
+                    context: {
+                        ...prev.context,
+                        error: event.data?.error,
+                        loading: false,
+                    },
+                    value: BaseState.Error,
+                }));
+            }
+        } catch (error) {
+            // Handle errors gracefully
+            setState((prev) => ({
+                ...prev,
+                context: {
+                    ...prev.context,
+                    error,
+                    loading: false,
+                },
+                value: BaseState.Error,
+            }));
+        }
+    }, []);
+
+    // Return as a tuple to match useMachine API
+    return [state, send];
+}
+
+export default useSafeDialogThreadsMachine;

package/src/screens/inbox/index.ts

@@ -0,0 +1,37 @@
+// State machines
+export {
+    dialogThreadsXstate,
+    Actions as DialogThreadsActions,
+    BaseState as DialogThreadsState,
+} from './workflow/dialog-threads-xstate';
+export {
+    threadConversationXstate,
+    Actions as ThreadConversationActions,
+    BaseState as ThreadConversationState,
+} from './containers/workflow/thread-conversation-xstate';
+export {
+    conversationXstate,
+    Actions as ConversationActions,
+    BaseState as ConversationState,
+} from './containers/workflow/conversation-xstate';
+export {
+    dialogsXstate,
+    Actions as DialogsActions,
+    BaseState as DialogsState,
+} from './containers/workflow/dialogs-xstate';
+
+// Hooks
+export { default as useSafeDialogThreadsMachine } from './hooks/useSafeDialogThreadsMachine';
+
+// Components
+export { DialogThreads } from './DialogThreads';
+export { ThreadsView } from './containers/ThreadsView';
+export { ThreadConversationView } from './containers/ThreadConversationView';
+export { ConversationView } from './containers/ConversationView';
+export { Dialogs } from './containers/Dialogs';
+
+// Configuration
+export { config } from './config';
+
+// Utility
+export { threadsMachineConfig, setupThreadSubscription } from './machines/threadsMachine';

package/src/screens/inbox/machines/threadsMachine.ts

@@ -0,0 +1,147 @@
+import { orderBy, uniqBy } from 'lodash-es';
+import { config } from '../config';
+import { OnThreadCreatedUpdatedDocument as THREAD_CHAT_ADDED } from 'common/graphql';
+
+const { MESSAGES_PER_PAGE } = config;
+
+// Define more specific types for threads and thread data
+export interface Thread {
+    id: string;
+    updatedAt?: string | number; // Make updatedAt optional to match the GraphQL response
+    [key: string]: any;
+}
+
+export interface ThreadsData {
+    threadMessages?: {
+        data: Thread[] | any[]; // Allow any[] to accommodate GraphQL response types
+    };
+    [key: string]: any; // Allow additional properties from GraphQL responses
+}
+
+export interface ThreadsContext {
+    threads: Thread[];
+    loading: boolean;
+    error: any;
+    channelId?: string;
+    role?: string;
+    refreshing: boolean;
+}
+
+// Type for refetch function
+export type RefetchFunction = (variables: any) => Promise<{ data?: any }>;
+
+// Type for subscription function
+export type SubscribeFunction = (options: {
+    document: any;
+    variables: any;
+    updateQuery: (prev: any, { subscriptionData }: any) => any;
+}) => () => void;
+
+// Define machine actions and services with proper typing
+export const threadsMachineConfig = {
+    // Services
+    fetchThreads: (refetch: RefetchFunction, context: ThreadsContext) => {
+        if (!context.channelId) return Promise.resolve({ data: undefined });
+
+        return refetch({
+            channelId: context.channelId?.toString(),
+            role: context.role?.toString(),
+            limit: MESSAGES_PER_PAGE,
+            repliesLimit2: 5,
+        });
+    },
+
+    fetchMoreThreads: (refetch: RefetchFunction, context: ThreadsContext) => {
+        if (!context.channelId || !context.threads?.length) {
+            return Promise.resolve({ data: undefined });
+        }
+
+        return refetch({
+            channelId: context.channelId?.toString(),
+            role: context.role?.toString(),
+            skip: context.threads?.length,
+        });
+    },
+
+    refreshThreads: (refetch: RefetchFunction, context: ThreadsContext) => {
+        if (!context.channelId) return Promise.resolve({ data: undefined });
+
+        return refetch({
+            channelId: context.channelId?.toString(),
+            role: context.role?.toString(),
+            limit: MESSAGES_PER_PAGE,
+            repliesLimit2: 5,
+        });
+    },
+
+    // Actions - optimized for performance with proper type handling
+    setThreadData: (data: ThreadsData): Thread[] => {
+        if (!data?.threadMessages?.data) return [];
+
+        const threadsData = data.threadMessages.data;
+        if (!threadsData.length) return [];
+
+        // Use a more efficient process with proper typing
+        const threadsFiltered = uniqBy(threadsData, 'id');
+        return orderBy(threadsFiltered, ['updatedAt'], ['desc']) || [];
+    },
+
+    appendThreadData: (existingThreads: Thread[], data: ThreadsData): Thread[] => {
+        if (!data?.threadMessages?.data) return existingThreads;
+
+        const newThreads = data.threadMessages.data;
+        if (!newThreads.length) return existingThreads;
+
+        // Use a more efficient combination process
+        const combinedThreads = uniqBy([...existingThreads, ...newThreads], 'id');
+        return orderBy(combinedThreads, ['updatedAt'], ['desc']) || [];
+    },
+
+    updateThreadData: (oldThreads: Thread[], newThread: Thread | null): Thread[] => {
+        if (!newThread) return oldThreads;
+        if (!oldThreads?.length) return [newThread]; // Handle empty array case efficiently
+
+        // Check if thread exists to avoid unnecessary array copy
+        const index = oldThreads.findIndex((el) => el.id === newThread.id);
+
+        let updatedThreads: Thread[];
+        if (index > -1) {
+            // Create a new array only if we're updating
+            updatedThreads = [...oldThreads];
+            updatedThreads[index] = newThread;
+        } else {
+            // Simply add the new thread at the beginning for efficiency
+            updatedThreads = [newThread, ...oldThreads];
+        }
+
+        return orderBy(updatedThreads, ['updatedAt'], ['desc']) || [];
+    },
+};
+
+// Optimized function to subscribe to thread updates
+export const setupThreadSubscription = (
+    subscribeToMore: SubscribeFunction | undefined,
+    channelId: string | undefined,
+): (() => void) | undefined => {
+    if (!subscribeToMore || !channelId) return undefined;
+
+    return subscribeToMore({
+        document: THREAD_CHAT_ADDED,
+        variables: { channelId: channelId?.toString() },
+        updateQuery: (prev, { subscriptionData }) => {
+            if (!subscriptionData?.data) return prev;
+
+            const newThread = subscriptionData.data.threadCreatedUpdated?.data;
+            if (!newThread) return prev;
+
+            // Only create a new object if needed to optimize for unnecessary renders
+            return {
+                ...prev,
+                threadMessages: {
+                    ...prev.threadMessages,
+                    data: uniqBy([newThread, ...(prev.threadMessages?.data || [])], 'id'),
+                },
+            };
+        },
+    });
+};