@messenger-box/platform-mobile 10.0.3-alpha.5 → 10.0.3-alpha.50

package/src/screens/inbox/containers/workflow/thread-conversation-xstate.ts

@@ -0,0 +1,401 @@
+import { assign, setup } from 'xstate';
+import { merge } from 'lodash-es';
+
+export const enum Actions {
+    INITIAL_CONTEXT = 'INITIAL_CONTEXT',
+    ERROR_HANDLED = 'ERROR_HANDLED',
+    SEND_THREAD_MESSAGE = 'SEND_THREAD_MESSAGE',
+    SEND_THREAD_MESSAGE_WITH_FILE = 'SEND_THREAD_MESSAGE_WITH_FILE',
+    SET_THREAD_MESSAGES = 'SET_THREAD_MESSAGES',
+    CLEAR_MESSAGES = 'CLEAR_MESSAGES',
+    FETCH_MORE_MESSAGES = 'FETCH_MORE_MESSAGES',
+    SUBSCRIBE_TO_THREAD_MESSAGES = 'SUBSCRIBE_TO_THREAD_MESSAGES',
+    START_LOADING = 'START_LOADING',
+    STOP_LOADING = 'STOP_LOADING',
+    SET_IMAGE = 'SET_IMAGE',
+    CLEAR_IMAGE = 'CLEAR_IMAGE',
+    SET_MESSAGE_TEXT = 'SET_MESSAGE_TEXT',
+}
+
+export const enum BaseState {
+    Idle = 'idle',
+    Error = 'error',
+    Loading = 'loading',
+    Done = 'done',
+    FetchThreadMessages = 'fetchThreadMessages',
+}
+
+export const enum MainState {
+    SendThreadMessage = 'sendThreadMessage',
+    SendThreadMessageWithFile = 'sendThreadMessageWithFile',
+    FetchMoreMessages = 'fetchMoreMessages',
+}
+
+export const threadConversationXstate = setup({
+    types: {
+        context: {} as {
+            channelId: string | null;
+            postParentId: string | null;
+            role: string | null;
+            threadMessages: any[];
+            totalCount: number;
+            skip: number;
+            loading: boolean;
+            loadingOldMessages: boolean;
+            error: string | null;
+            selectedImage: string;
+            files: any[];
+            images: any[];
+            messageText: string;
+            imageLoading: boolean;
+            postThread: any;
+            threadPost: any[];
+            isScrollToBottom: boolean;
+        },
+    },
+    actions: {
+        errorState: assign(({ context, event }) => {
+            return {
+                ...context,
+                error: event.data?.message || 'An error occurred',
+                loading: false,
+                loadingOldMessages: false,
+                imageLoading: false,
+            };
+        }),
+        setInitialContext: assign(({ context, event }) => {
+            return merge({
+                ...context,
+                channelId: event.data?.channelId || null,
+                postParentId: event.data?.postParentId || null,
+                role: event.data?.role || null,
+                loading: false,
+            });
+        }),
+        setThreadMessages: assign(({ context, event }) => {
+            const messages = event.data?.messages || [];
+            console.log(`setThreadMessages: Setting ${messages.length} messages`);
+
+            // Create a set of unique IDs to remove duplicates
+            const messageIds = new Set();
+            const uniqueMessages = [];
+
+            // Process messages to ensure uniqueness
+            messages.forEach((msg) => {
+                if (msg.id && !messageIds.has(msg.id)) {
+                    messageIds.add(msg.id);
+                    uniqueMessages.push(msg);
+                }
+            });
+
+            console.log(`setThreadMessages: After deduplication, have ${uniqueMessages.length} unique messages`);
+
+            return {
+                ...context,
+                threadMessages: uniqueMessages,
+                totalCount: event.data?.totalCount || 0,
+                loading: false,
+                loadingOldMessages: false,
+                threadPost: event.data?.threadPost || [],
+                postThread: event.data?.postThread || null,
+            };
+        }),
+        addThreadMessages: assign(({ context, event }) => {
+            const newMessages = event.data?.messages || [];
+            console.log('Adding thread messages and disabling loading state. New messages:', newMessages.length);
+
+            if (newMessages.length === 0) {
+                return {
+                    ...context,
+                    loadingOldMessages: false,
+                    loading: false,
+                };
+            }
+
+            // Create a map of existing message IDs for quick lookup
+            const existingMessageIds = new Set();
+            context.threadMessages.forEach((msg) => existingMessageIds.add(msg.id));
+
+            // Filter out any duplicate messages
+            const uniqueNewMessages = newMessages.filter((msg) => {
+                if (!msg.id || existingMessageIds.has(msg.id)) {
+                    console.log('Skipping duplicate message:', msg.id);
+                    return false; // Skip messages with no ID or duplicates
+                }
+                existingMessageIds.add(msg.id); // Add to set to catch duplicates in the new messages
+                return true;
+            });
+
+            console.log(`After filtering, adding ${uniqueNewMessages.length} unique messages`);
+
+            return {
+                ...context,
+                threadMessages: [...context.threadMessages, ...uniqueNewMessages],
+                loadingOldMessages: false,
+                loading: false,
+            };
+        }),
+        addNewMessage: assign(({ context, event }) => {
+            const message = event.data?.message;
+            console.log('Adding new message to thread:', message?.id);
+            if (!message) {
+                console.warn('No message data provided to addNewMessage action');
+                return context;
+            }
+
+            // Prevent duplicate messages by checking for the same ID
+            const existingMessageIndex = context.threadMessages.findIndex((msg) => msg.id === message.id);
+            if (existingMessageIndex !== -1) {
+                console.log('Message already exists, not adding duplicate:', message.id);
+                return {
+                    ...context,
+                    loading: false,
+                };
+            }
+
+            // Use a set to ensure we only have unique message IDs
+            const messageIds = new Set();
+            const uniqueMessages = [...context.threadMessages];
+
+            // Add all existing message IDs to the set
+            uniqueMessages.forEach((msg) => messageIds.add(msg.id));
+
+            // Only add the new message if its ID isn't already in the set
+            if (!messageIds.has(message.id)) {
+                uniqueMessages.unshift(message); // Add to beginning (newest first)
+            }
+
+            console.log('Successfully added new message to thread');
+            return {
+                ...context,
+                threadMessages: uniqueMessages,
+                totalCount: context.totalCount + 1,
+                loading: false,
+            };
+        }),
+        updateSkip: assign(({ context, event }) => {
+            console.log('Setting loadingOldMessages to true');
+            return {
+                ...context,
+                skip: context.threadMessages.length,
+                loadingOldMessages: true,
+                loading: event.data?.loading !== undefined ? event.data.loading : context.loading,
+            };
+        }),
+        clearMessages: assign(({ context }) => {
+            return {
+                ...context,
+                threadMessages: [],
+                totalCount: 0,
+                skip: 0,
+            };
+        }),
+        setPostParentId: assign(({ context, event }) => {
+            return {
+                ...context,
+                postParentId: event.data?.postParentId || null,
+            };
+        }),
+        setPostThread: assign(({ context, event }) => {
+            return {
+                ...context,
+                postThread: event.data?.postThread || null,
+            };
+        }),
+        startLoading: assign(({ context, event }) => {
+            return {
+                ...context,
+                loading: true,
+                loadingOldMessages:
+                    event.data?.loadingOldMessages !== undefined
+                        ? event.data.loadingOldMessages
+                        : context.loadingOldMessages,
+            };
+        }),
+        stopLoading: assign(({ context, event }) => {
+            return {
+                ...context,
+                loading: false,
+                loadingOldMessages:
+                    event.data?.loadingOldMessages !== undefined
+                        ? event.data.loadingOldMessages
+                        : context.loadingOldMessages,
+            };
+        }),
+        startImageLoading: assign(({ context }) => {
+            return {
+                ...context,
+                imageLoading: true,
+            };
+        }),
+        stopImageLoading: assign(({ context }) => {
+            return {
+                ...context,
+                imageLoading: false,
+            };
+        }),
+        setSelectedImage: assign(({ context, event }) => {
+            return {
+                ...context,
+                selectedImage: event.data?.image || '',
+                files: event.data?.files || context.files,
+                images: event.data?.images || context.images,
+                imageLoading: false,
+            };
+        }),
+        clearImageData: assign(({ context }) => {
+            return {
+                ...context,
+                selectedImage: '',
+                files: [],
+                images: [],
+            };
+        }),
+        setMessageText: assign(({ context, event }) => {
+            return {
+                ...context,
+                messageText: event.data?.messageText || '',
+            };
+        }),
+        setScrollToBottom: assign(({ context, event }) => {
+            return {
+                ...context,
+                isScrollToBottom: event.data?.isScrollToBottom || false,
+            };
+        }),
+    },
+    guards: {
+        hasMoreMessages: ({ context }) => {
+            return context.totalCount > context.threadMessages.length;
+        },
+    },
+}).createMachine({
+    id: 'thread-conversation-view',
+    initial: BaseState.Idle,
+    context: {
+        channelId: null,
+        postParentId: null,
+        role: null,
+        threadMessages: [],
+        totalCount: 0,
+        skip: 0,
+        loading: false,
+        loadingOldMessages: false,
+        error: null,
+        selectedImage: '',
+        files: [],
+        images: [],
+        messageText: '',
+        imageLoading: false,
+        postThread: null,
+        threadPost: [],
+        isScrollToBottom: false,
+    },
+    states: {
+        [BaseState.Idle]: {
+            on: {
+                [Actions.INITIAL_CONTEXT]: {
+                    target: BaseState.FetchThreadMessages,
+                    actions: ['setInitialContext'],
+                },
+                [Actions.SEND_THREAD_MESSAGE]: {
+                    target: MainState.SendThreadMessage,
+                    actions: ['startLoading'],
+                },
+                [Actions.SEND_THREAD_MESSAGE_WITH_FILE]: {
+                    target: MainState.SendThreadMessageWithFile,
+                    actions: ['startLoading'],
+                },
+                [Actions.FETCH_MORE_MESSAGES]: {
+                    target: MainState.FetchMoreMessages,
+                    actions: ['updateSkip'],
+                    guard: 'hasMoreMessages',
+                },
+                [Actions.CLEAR_MESSAGES]: {
+                    target: BaseState.Idle,
+                    actions: ['clearMessages'],
+                },
+                [Actions.START_LOADING]: {
+                    target: BaseState.Idle,
+                    actions: ['startLoading'],
+                },
+                [Actions.STOP_LOADING]: {
+                    target: BaseState.Idle,
+                    actions: ['stopLoading'],
+                },
+                [Actions.SET_IMAGE]: {
+                    target: BaseState.Idle,
+                    actions: ['setSelectedImage'],
+                },
+                [Actions.CLEAR_IMAGE]: {
+                    target: BaseState.Idle,
+                    actions: ['clearImageData'],
+                },
+                [Actions.SET_MESSAGE_TEXT]: {
+                    target: BaseState.Idle,
+                    actions: ['setMessageText'],
+                },
+            },
+        },
+        [BaseState.Error]: {
+            entry: ['errorState'],
+            on: {
+                [Actions.ERROR_HANDLED]: {
+                    target: BaseState.Idle,
+                },
+            },
+        },
+        [BaseState.FetchThreadMessages]: {
+            invoke: {
+                src: 'fetchThreadMessages',
+                input: ({ context, event }) => ({ context, event }),
+                onDone: {
+                    target: BaseState.Idle,
+                    actions: ['setThreadMessages'],
+                },
+                onError: {
+                    target: BaseState.Error,
+                },
+            },
+        },
+        [MainState.SendThreadMessage]: {
+            invoke: {
+                src: 'sendThreadMessage',
+                input: ({ context, event }) => ({ context, event }),
+                onDone: {
+                    target: BaseState.Idle,
+                    actions: ['addNewMessage', 'stopLoading'],
+                },
+                onError: {
+                    target: BaseState.Error,
+                },
+            },
+        },
+        [MainState.SendThreadMessageWithFile]: {
+            invoke: {
+                src: 'sendThreadMessageWithFile',
+                input: ({ context, event }) => ({ context, event }),
+                onDone: {
+                    target: BaseState.Idle,
+                    actions: ['addNewMessage', 'clearImageData', 'stopLoading'],
+                },
+                onError: {
+                    target: BaseState.Error,
+                },
+            },
+        },
+        [MainState.FetchMoreMessages]: {
+            invoke: {
+                src: 'fetchMoreThreadMessages',
+                input: ({ context, event }) => ({ context, event }),
+                onDone: {
+                    target: BaseState.Idle,
+                    actions: ['addThreadMessages'],
+                },
+                onError: {
+                    target: BaseState.Error,
+                },
+            },
+        },
+    },
+} as any);

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

@@ -0,0 +1,34 @@
+import { useCallback } from 'react';
+
+/**
+ * useInboxMessages - a generic hook for fetching and subscribing to messages
+ *
+ * @param useQueryHook - Apollo query hook (e.g., useChannelMessagesQuery)
+ * @param queryVariables - variables for the query
+ * @param subscriptionDocument - GraphQL subscription document
+ * @param subscriptionVariables - variables for the subscription
+ * @param updateQuery - Apollo updateQuery function (optional)
+ * @param onError - error handler (optional)
+ * @returns { data, loading, error, refetch, subscribe }
+ */
+export function useInboxMessages({
+    useQueryHook,
+    queryVariables,
+    subscriptionDocument,
+    subscriptionVariables,
+    updateQuery,
+    onError,
+}) {
+    const { data, loading, error, refetch, subscribeToMore } = useQueryHook(queryVariables);
+
+    const subscribe = useCallback(() => {
+        return subscribeToMore({
+            document: subscriptionDocument,
+            variables: subscriptionVariables,
+            updateQuery,
+            onError,
+        });
+    }, [subscribeToMore, subscriptionDocument, subscriptionVariables, updateQuery, onError]);
+
+    return { data, loading, error, refetch, subscribe };
+}

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';