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

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