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

package/src/screens/inbox/components/SupportServiceDialogsListItem.tsx

@@ -29,10 +29,23 @@ import colors from 'tailwindcss/colors';
 
 const createdAtText = (value: string) => {
     if (!value) return '';
-    let date = new Date(value);
-    if (isToday(date)) return 'Today';
-    if (isYesterday(date)) return 'Yesterday';
-    return format(new Date(value), 'MMM dd, yyyy');
+
+    try {
+        // Validate the date before processing
+        const timestamp = new Date(value).getTime();
+        if (isNaN(timestamp)) {
+            console.warn(`Invalid date value in createdAtText: ${value}`);
+            return 'Unknown date';
+        }
+
+        let date = new Date(value);
+        if (isToday(date)) return 'Today';
+        if (isYesterday(date)) return 'Yesterday';
+        return format(date, 'MMM dd, yyyy');
+    } catch (error) {
+        console.error(`Error processing date in createdAtText: ${value}`, error);
+        return 'Unknown date';
+    }
 };
 
 export interface IDialogListChannel extends IChannel {
@@ -250,6 +263,23 @@ export const SupportServiceDialogsListItemComponent: React.FC<IDialogListItemPro
 
 const ServiceChannelWithLastMessage = React.memo(({ channel, lastMessage, subscribeToNewMessages }: any) => {
     React.useEffect(() => subscribeToNewMessages(), []);
+
+    // Define message display text
+    let displayMessage = 'No messages yet';
+
+    if (lastMessage) {
+        // Check for file attachments
+        const hasFileAttachments = lastMessage.files?.data?.length > 0;
+
+        if (hasFileAttachments) {
+            displayMessage = '📎 File attachment';
+        } else if (lastMessage.message && lastMessage.message.trim() !== '') {
+            displayMessage = lastMessage.message;
+        } else {
+            displayMessage = '(Empty message)';
+        }
+    }
+
     return (
         <HStack space={'sm'} className="flex-1 justify-center items-center">
             <Box className="flex-[0.8]">
@@ -257,23 +287,11 @@ const ServiceChannelWithLastMessage = React.memo(({ channel, lastMessage, subscr
                     {channel?.title}
                 </Text>
                 <Text color={colors.gray[600]} numberOfLines={1}>
-                    {/* {creatorAndMembersId?.length && creatorAndMembersId?.includes(currentUser?.id)
-                    ? lastMessageCreatorAndMembers?.message ?? ''
-                    : lastMessage?.message ?? ''} */}
-                    {lastMessage?.message ?? ''}
+                    {displayMessage}
                 </Text>
             </Box>
 
             <Box className="flex-[0.2]">
-                {/* {creatorAndMembersId?.length && creatorAndMembersId?.includes(currentUser?.id) ? (
-                <Text color="gray.500">
-                    {lastMessageCreatorAndMembers
-                        ? createdAtText(lastMessageCreatorAndMembers?.createdAt)
-                        : ''}
-                </Text>
-            ) : (
-                <Text color="gray.500">{lastMessage ? createdAtText(lastMessage?.createdAt) : ''}</Text>
-            )} */}
                 <Text color={colors.gray[500]}>{lastMessage ? createdAtText(lastMessage?.createdAt) : ''}</Text>
             </Box>
         </HStack>

package/src/screens/inbox/components/workflow/dialogs-list-item-xstate.ts

@@ -0,0 +1,145 @@
+import { assign, setup } from 'xstate';
+import { merge } from 'lodash-es';
+
+export const enum Actions {
+    INITIAL_CONTEXT = 'INITIAL_CONTEXT',
+    ERROR_HANDLED = 'ERROR_HANDLED',
+    FETCH_MESSAGES = 'FETCH_MESSAGES',
+    UPDATE_MESSAGES = 'UPDATE_MESSAGES',
+    SUBSCRIBE_TO_MESSAGES = 'SUBSCRIBE_TO_MESSAGES',
+    SET_TITLE = 'SET_TITLE',
+    START_LOADING = 'START_LOADING',
+    STOP_LOADING = 'STOP_LOADING',
+}
+
+export const enum BaseState {
+    Idle = 'idle',
+    Error = 'error',
+    FetchingMessages = 'fetchingMessages',
+}
+
+export const dialogsListItemXstate = setup({
+    types: {
+        context: {} as {
+            channelId: string | null;
+            currentUser: any;
+            messages: any[];
+            loading: boolean;
+            error: string | null;
+            title: string;
+            channelMembers: any[];
+            lastMessage: any;
+        },
+    },
+    actions: {
+        errorState: assign(({ context, event }) => {
+            return {
+                ...context,
+                error: event.data?.message || 'An error occurred',
+                loading: false,
+            };
+        }),
+        setInitialContext: assign(({ context, event }) => {
+            return merge({
+                ...context,
+                channelId: event.data?.channelId || null,
+                currentUser: event.data?.currentUser || null,
+                loading: true,
+            });
+        }),
+        setMessages: assign(({ context, event }) => {
+            return {
+                ...context,
+                messages: event.data?.messages || [],
+                loading: false,
+            };
+        }),
+        updateMessages: assign(({ context, event }) => {
+            const newMessage = event.data?.message;
+            if (!newMessage) return context;
+
+            return {
+                ...context,
+                messages: [...context.messages, newMessage],
+            };
+        }),
+        setTitle: assign(({ context, event }) => {
+            return {
+                ...context,
+                title: event.data?.title || '',
+            };
+        }),
+        startLoading: assign(({ context }) => {
+            return {
+                ...context,
+                loading: true,
+            };
+        }),
+        stopLoading: assign(({ context }) => {
+            return {
+                ...context,
+                loading: false,
+            };
+        }),
+    },
+}).createMachine({
+    id: 'dialogs-list-item',
+    initial: BaseState.Idle,
+    context: {
+        channelId: null,
+        currentUser: null,
+        messages: [],
+        loading: false,
+        error: null,
+        title: '',
+        channelMembers: [],
+        lastMessage: null,
+    },
+    states: {
+        [BaseState.Idle]: {
+            on: {
+                [Actions.INITIAL_CONTEXT]: {
+                    target: BaseState.FetchingMessages,
+                    actions: ['setInitialContext'],
+                },
+                [Actions.UPDATE_MESSAGES]: {
+                    target: BaseState.Idle,
+                    actions: ['updateMessages'],
+                },
+                [Actions.SET_TITLE]: {
+                    target: BaseState.Idle,
+                    actions: ['setTitle'],
+                },
+                [Actions.START_LOADING]: {
+                    target: BaseState.Idle,
+                    actions: ['startLoading'],
+                },
+                [Actions.STOP_LOADING]: {
+                    target: BaseState.Idle,
+                    actions: ['stopLoading'],
+                },
+            },
+        },
+        [BaseState.Error]: {
+            entry: ['errorState'],
+            on: {
+                [Actions.ERROR_HANDLED]: {
+                    target: BaseState.Idle,
+                },
+            },
+        },
+        [BaseState.FetchingMessages]: {
+            invoke: {
+                src: 'fetchMessages',
+                input: ({ context, event }) => ({ context, event }),
+                onDone: {
+                    target: BaseState.Idle,
+                    actions: ['setMessages'],
+                },
+                onError: {
+                    target: BaseState.Error,
+                },
+            },
+        },
+    },
+} as any);

package/src/screens/inbox/components/workflow/service-dialogs-list-item-xstate.ts

@@ -0,0 +1,159 @@
+import { assign, setup } from 'xstate';
+import { merge } from 'lodash-es';
+
+export const enum Actions {
+    INITIAL_CONTEXT = 'INITIAL_CONTEXT',
+    ERROR_HANDLED = 'ERROR_HANDLED',
+    FETCH_THREAD_MESSAGES = 'FETCH_THREAD_MESSAGES',
+    UPDATE_THREAD_MESSAGES = 'UPDATE_THREAD_MESSAGES',
+    SUBSCRIBE_TO_THREAD_MESSAGES = 'SUBSCRIBE_TO_THREAD_MESSAGES',
+    SET_TITLE = 'SET_TITLE',
+    START_LOADING = 'START_LOADING',
+    STOP_LOADING = 'STOP_LOADING',
+    SET_SERVICE_POST_PARENT_ID = 'SET_SERVICE_POST_PARENT_ID',
+}
+
+export const enum BaseState {
+    Idle = 'idle',
+    Error = 'error',
+    FetchingThreadMessages = 'fetchingThreadMessages',
+}
+
+export const serviceDialogsListItemXstate = setup({
+    types: {
+        context: {} as {
+            channelId: string | null;
+            currentUser: any;
+            threadMessages: any[];
+            loading: boolean;
+            error: string | null;
+            title: string;
+            role: string;
+            servicePostParentId: string | null;
+            lastMessage: any;
+        },
+    },
+    actions: {
+        errorState: assign(({ context, event }) => {
+            return {
+                ...context,
+                error: event.data?.message || 'An error occurred',
+                loading: false,
+            };
+        }),
+        setInitialContext: assign(({ context, event }) => {
+            return merge({
+                ...context,
+                channelId: event.data?.channelId || null,
+                currentUser: event.data?.currentUser || null,
+                role: event.data?.role || null,
+                loading: true,
+            });
+        }),
+        setThreadMessages: assign(({ context, event }) => {
+            return {
+                ...context,
+                threadMessages: event.data?.threadMessages || [],
+                loading: false,
+            };
+        }),
+        updateThreadMessages: assign(({ context, event }) => {
+            const newThreadMessage = event.data?.message;
+            if (!newThreadMessage) return context;
+
+            return {
+                ...context,
+                threadMessages: [...context.threadMessages, newThreadMessage],
+            };
+        }),
+        setTitle: assign(({ context, event }) => {
+            return {
+                ...context,
+                title: event.data?.title || '',
+            };
+        }),
+        setServicePostParentId: assign(({ context, event }) => {
+            return {
+                ...context,
+                servicePostParentId: event.data?.servicePostParentId || null,
+            };
+        }),
+        startLoading: assign(({ context }) => {
+            return {
+                ...context,
+                loading: true,
+            };
+        }),
+        stopLoading: assign(({ context }) => {
+            return {
+                ...context,
+                loading: false,
+            };
+        }),
+    },
+}).createMachine({
+    id: 'service-dialogs-list-item',
+    initial: BaseState.Idle,
+    context: {
+        channelId: null,
+        currentUser: null,
+        threadMessages: [],
+        loading: false,
+        error: null,
+        title: '',
+        role: '',
+        servicePostParentId: null,
+        lastMessage: null,
+    },
+    states: {
+        [BaseState.Idle]: {
+            on: {
+                [Actions.INITIAL_CONTEXT]: {
+                    target: BaseState.FetchingThreadMessages,
+                    actions: ['setInitialContext'],
+                },
+                [Actions.UPDATE_THREAD_MESSAGES]: {
+                    target: BaseState.Idle,
+                    actions: ['updateThreadMessages'],
+                },
+                [Actions.SET_TITLE]: {
+                    target: BaseState.Idle,
+                    actions: ['setTitle'],
+                },
+                [Actions.SET_SERVICE_POST_PARENT_ID]: {
+                    target: BaseState.Idle,
+                    actions: ['setServicePostParentId'],
+                },
+                [Actions.START_LOADING]: {
+                    target: BaseState.Idle,
+                    actions: ['startLoading'],
+                },
+                [Actions.STOP_LOADING]: {
+                    target: BaseState.Idle,
+                    actions: ['stopLoading'],
+                },
+            },
+        },
+        [BaseState.Error]: {
+            entry: ['errorState'],
+            on: {
+                [Actions.ERROR_HANDLED]: {
+                    target: BaseState.Idle,
+                },
+            },
+        },
+        [BaseState.FetchingThreadMessages]: {
+            invoke: {
+                src: 'fetchThreadMessages',
+                input: ({ context, event }) => ({ context, event }),
+                onDone: {
+                    target: BaseState.Idle,
+                    actions: ['setThreadMessages'],
+                },
+                onError: {
+                    target: BaseState.Error,
+                },
+            },
+        },
+    },
+} as any);