@messenger-box/platform-mobile 10.0.3-alpha.10 → 10.0.3-alpha.101

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

@@ -2,51 +2,47 @@ import React, { useMemo } from 'react';
 import {
     VStack,
     Text,
-    Image,
     Pressable,
     HStack,
     Box,
-    AvatarGroup,
     Avatar,
     AvatarFallbackText,
     AvatarImage,
-    AvatarBadge,
-    View,
     Button,
     ButtonText,
+    Icon,
+    Badge,
+    BadgeText,
+    Link,
+    LinkText,
 } from '@admin-layout/gluestack-ui-mobile';
 import { format, isToday, isYesterday } from 'date-fns';
 import { useFocusEffect } from '@react-navigation/native';
 import { IChannel, IUserAccount } from 'common';
-import {
-    useThreadMessagesQuery,
-    useMessagesQuery,
-    useUserAccountQuery,
-    useOnThreadChatMessageAddedSubscription,
-    useOnThreadCreatedUpdatedSubscription,
-} from 'common/lib/generated/generated.js';
 import { startCase } from 'lodash-es';
 import colors from 'tailwindcss/colors';
+import { useSelector } from 'react-redux';
+import { userSelector } from '@adminide-stack/user-auth0-client';
 
-const createdAtText = (value: string) => {
+const timeFormat = (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');
+    if (isToday(date)) return format(date, 'h:mm a').toUpperCase();
+    return format(date, 'MMM do').toUpperCase();
 };
 
 export interface IDialogListChannel extends IChannel {
     users: IUserAccount[];
 }
 
-export interface IDialogListItemProps {
-    currentUser?: any;
-    users?: any;
-    thread?: any;
-    onOpen: (id: any, title: any, postParentId?: any) => void;
-    role?: any;
-    setData?: any;
+export interface ThreadViewItemProps {
+    id: string;
+    post: any;
+    channel: any;
+    replies: any[];
+    onPress: (id: any, title: any, postParentId?: any) => void;
+    channelId?: string;
+    channelsDetail?: any;
 }
 
 /**
@@ -54,267 +50,183 @@ export interface IDialogListItemProps {
  * - Get Reservation info: reservation date, status
  * - Add ability to get property information: name, logo
  */
-export const ThreadViewItemComponent: React.FC<IDialogListItemProps> = function DialogsListItem({
-    currentUser,
-    // users,
-    thread,
-    onOpen,
-    role,
-    setData,
+export const ThreadViewItemComponent: React.FC<ThreadViewItemProps> = function ThreadViewItem({
+    id,
+    post,
+    channel,
+    replies,
+    onPress,
+    channelId,
+    channelsDetail,
 }) {
-    // const { data: threadCreatedUpdated } = useOnThreadCreatedUpdatedSubscription({
-    //     variables: {
-    //         channelId: thread?.channel?.id?.toString(),
-    //         postParentId: thread?.post?.id?.toString(),
-    //     },
-    // });
-
-    useFocusEffect(
-        React.useCallback(() => {
-            // Do something when the screen is focused
-            return () => {
-                // Do something when the screen is unfocused
-                // Useful for cleanup functions
-            };
-        }, []),
-    );
-
-    const threadPostReply = React.useMemo(() => {
-        if (!thread?.replies) return null;
-        return thread?.replies;
-    }, [thread]);
+    const currentUser = useSelector(userSelector);
 
-    // React.useEffect(() => {
-    //     if (threadCreatedUpdated?.threadCreatedUpdated?.data) setData(threadCreatedUpdated?.threadCreatedUpdated?.data);
-    // }, [threadCreatedUpdated?.threadCreatedUpdated]);
+    // Prepare thread replies for display
+    const threadReplies = useMemo(() => {
+        return replies || [];
+    }, [replies]);
 
-    // const threadPostReply = React.useMemo(() => {
-    //     if (!thread?.replies) return null;
-    //     if (threadCreatedUpdated?.threadCreatedUpdated?.data?.replies?.length) {
-    //         return threadCreatedUpdated?.threadCreatedUpdated?.data?.replies;
-    //     } else return thread?.replies;
-    // }, [thread, threadCreatedUpdated]);
-
-    // const lastMessage = useMemo(() => {
-    //     if (!threadPost) {
-    //         return null;
-    //     }
-    //     const replies = threadPost?.replies?.filter((p: any) => p?.message !== '') ?? [];
-    //     if (replies?.length) {
-    //         return replies[0];
-    //         // return replies[replies.length - 1];
-    //     } else {
-    //         const post = threadPost?.post ?? null;
-    //         return post ? post?.post : null;
-    //     }
-    // }, [threadPost]);
+    if (!threadReplies || threadReplies.length === 0) {
+        return null;
+    }
 
-    // const participants: any = React.useMemo(() => {
-    //     if (!thread?.participants?.length) return null;
-    //     return thread?.participants?.filter((u: any) => u?.user?.id !== currentUser?.id) ?? [];
-    // }, [thread]);
+    // Get the last reply for the thread preview
+    const lastReply = threadReplies[0]; // Most recent reply should be first in the array
+    // Get total number of replies
+    const totalReplies = threadReplies.length;
 
-    // const allParticipantsNames: any = React.useMemo(() => {
-    //     if (!participants?.length) return null;
-    //     return (
-    //         participants
-    //             ?.map((p: any) => {
-    //                 return p?.user?.givenName + ' ' + p?.user?.familyName ?? '';
-    //             })
-    //             ?.join(', ') ?? ''
-    //     );
-    // }, [participants]);
+    // Get the first user in the thread as the primary user
+    const primaryUser = channel?.users?.[0] || lastReply?.author;
+    const channelName = channel?.title || `${primaryUser?.givenName || ''} ${primaryUser?.familyName || ''}`;
 
-    if (!threadPostReply || threadPostReply?.length == 0) {
-        return <></>;
-    }
+    // Determine if the current user is in the thread
+    const userIsInThread = channel?.users?.some((user: any) => user.id === currentUser?.id);
 
     return (
-        <VStack
-            space={'sm'}
-            className="flex-1 py-2 px-2 border rounded-md bg-white border-gray-200 dark:border-white dark:bg-white"
+        <Pressable
+            onPress={() => onPress(channel?.id, 'Thread', post?.id)}
+            style={{
+                marginVertical: 5,
+                backgroundColor: 'white',
+                borderRadius: 10,
+                paddingVertical: 5,
+                elevation: 1,
+                shadowColor: '#000',
+                shadowOffset: { width: 0, height: 1 },
+                shadowOpacity: 0.1,
+                shadowRadius: 2,
+            }}
         >
-            <HStack space={'sm'} className="py-2 w-[100%] flex-1 justify-between items-center">
-                <Box className="flex-1">
-                    {/* <HStack flex={1} space={5} py={2} alignItems={'baseline'}>
-                        <Box>
-                            <Avatar.Badge size={4} left={0} zIndex={1} bg="green.800" />
-                        </Box>
-                        <Box>
-                            <Text color="gray.600" fontSize="lg" flexWrap={'wrap'} fontWeight="semibold">
-                                {allParticipantsNames || ''}
-                            </Text>
-                        </Box>
+            <Box className="mb-3">
+                <VStack space="md">
+                    {/* Thread header with green dot and users */}
+                    {/* <HStack space="sm" className="px-4 items-center">
+                        <Box 
+                            className="bg-green-500 rounded-full" 
+                            style={{ width: 8, height: 8 }}
+                        />
+                        <Text className="text-base text-gray-900">{channelName}</Text>
                     </HStack> */}
-                    <HStack space={'sm'} className="flex-1 justify-center items-center">
-                        <Box className="flex-1">
-                            {/* <HStack space={2} py={2}>
-                                <Box>
+
+                    {/* Thread members */}
+                    <Text className="text-sm font-medium text-gray-600 px-4 pt-2">
+                        {channel?.users?.map((user: any) => user?.givenName || user?.username)?.join(', ')}
+                    </Text>
+
+                    {/* Thread messages preview - show up to 3 most recent messages */}
+                    {threadReplies.slice(0, 3).map((reply: any, index: number) => {
+                        // Group consecutive messages from the same user
+                        const previousReply = index > 0 ? threadReplies.slice(0, 3)[index - 1] : null;
+                        const isConsecutiveReply = previousReply && previousReply.author?.id === reply.author?.id;
+
+                        return (
+                            <HStack key={reply.id || index} space="md" className="px-4 py-1">
+                                {!isConsecutiveReply ? (
                                     <Avatar
-                                        bg={'transparent'}
-                                        size={8}
-                                        _image={{ borderRadius: 6, borderWidth: 2, borderColor: '#fff' }}
-                                        source={{
-                                            uri: thread?.post?.author?.picture,
+                                        size="md"
+                                        style={{
+                                            width: 40,
+                                            height: 40,
+                                            backgroundColor:
+                                                reply?.author?.id === currentUser?.id ? '#2EB67D' : '#E8A54A',
                                         }}
                                     >
-                                        {startCase(thread?.post?.author?.username?.charAt(0))}
+                                        <AvatarFallbackText>
+                                            {startCase(reply?.author?.username?.charAt(0) || 'U')}
+                                        </AvatarFallbackText>
+                                        {reply?.author?.picture && (
+                                            <AvatarImage
+                                                alt={reply?.author?.username || 'User'}
+                                                source={{
+                                                    uri: reply?.author?.picture,
+                                                }}
+                                            />
+                                        )}
                                     </Avatar>
-                                </Box>
-                                <Box>
-                                    <HStack space={4}>
-                                        <Text>
-                                            {thread?.post?.author?.givenName + ' ' + thread?.post?.author?.familyName ??
-                                                ''}
-                                        </Text>
-                                        <Text color="gray.500">
-                                            {thread?.post ? createdAtText(thread?.post?.createdAt) : ''}
-                                        </Text>
-                                    </HStack>
-                                    <Text color="gray.600" noOfLines={2}>
-                                        {thread?.post?.message ?? ''}
-                                    </Text>
-                                    {!thread?.replies?.length && (
-                                        <Button
-                                            size={'xs'}
-                                            w={150}
-                                            variant={'outline'}
-                                            _text={{ fontSize: 12, color: '#000' }}
-                                            onPress={() =>
-                                                onOpen(thread?.channel?.id, thread?.channel?.title, thread?.post?.id)
-                                            }
-                                        >
-                                            Reply
-                                        </Button>
+                                ) : (
+                                    <Box style={{ width: 40 }} />
+                                )}
+
+                                <VStack space="xs" className="flex-1">
+                                    {!isConsecutiveReply && (
+                                        <HStack space="sm" className="items-center">
+                                            <Text className="font-bold text-gray-900">
+                                                {reply?.author?.givenName || reply?.author?.username || 'User'}
+                                            </Text>
+                                            <Text className="text-xs text-gray-500">
+                                                {timeFormat(reply?.createdAt)}
+                                            </Text>
+                                        </HStack>
                                     )}
-                                </Box>
-                            </HStack> */}
-                            {threadPostReply?.length > 0 && (
-                                <>
-                                    {threadPostReply
-                                        ?.slice(0, 2)
-                                        ?.reverse()
-                                        ?.map((reply: any, index: any) => (
-                                            <HStack key={index} space={'sm'} className="pb-2 pt-1">
-                                                <Box>
-                                                    <Avatar
-                                                        key={'thread-view-key-' + index}
-                                                        size={'md'}
-                                                        className="bg-transparent top-0 right-0 z-[1]"
-                                                    >
-                                                        <AvatarFallbackText>
-                                                            {' '}
-                                                            {startCase(reply?.author?.username?.charAt(0))}
-                                                        </AvatarFallbackText>
-                                                        <AvatarImage
-                                                            alt="image"
-                                                            style={{
-                                                                borderRadius: 6,
-                                                                borderWidth: 2,
-                                                                borderColor: '#fff',
-                                                            }}
-                                                            source={{
-                                                                uri: reply?.author?.picture,
-                                                            }}
-                                                        />
-                                                    </Avatar>
-                                                </Box>
-                                                <Box>
-                                                    <HStack space={'md'}>
-                                                        <Text>
-                                                            {reply?.author?.givenName ?? '' ?? ''}{' '}
-                                                            {reply?.author?.familyName ?? '' ?? ''}
-                                                            {/* {lastMessage?.author?.givenName +
-                                                    ' ' +
-                                                    lastMessage?.author?.familyName ?? ''} */}
-                                                        </Text>
-                                                        <Text color={colors.gray[500]}>
-                                                            {reply?.createdAt ? createdAtText(reply?.createdAt) : ''}
-                                                            {/* {lastMessage ? createdAtText(lastMessage?.createdAt) : ''} */}
-                                                        </Text>
-                                                    </HStack>
-                                                    <VStack space={'sm'}>
-                                                        {reply?.message && (
-                                                            <Text color={colors.gray[600]} numberOfLines={2}>
-                                                                {reply?.message.length < 70
-                                                                    ? `${reply?.message}`
-                                                                    : `${reply?.message.substring(0, 68)}....`}
-                                                            </Text>
-                                                        )}
-                                                        {/* <Text color="gray.600" noOfLines={2}>
-                                                            {reply?.message
-                                                                ? reply?.message.length < 70
-                                                                    ? `${reply?.message}`
-                                                                    : `${reply?.message.substring(0, 68)}....`
-                                                                : ''}
-                                                        </Text> */}
 
-                                                        <>
-                                                            {reply?.files?.data?.length > 0 &&
-                                                                reply?.files?.data?.map((f: any, index: any) => (
-                                                                    <Box>
-                                                                        <Avatar
-                                                                            key={'thread-view-other-key-' + index}
-                                                                            className="bg-transparent"
-                                                                            size={'md'}
-                                                                        >
-                                                                            <AvatarFallbackText> I</AvatarFallbackText>
-                                                                            <AvatarImage
-                                                                                alt="image"
-                                                                                style={{
-                                                                                    borderRadius: 6,
-                                                                                    borderWidth: 2,
-                                                                                    borderColor: '#fff',
-                                                                                }}
-                                                                                source={{
-                                                                                    uri: f?.url,
-                                                                                }}
-                                                                            />
-                                                                        </Avatar>
-                                                                    </Box>
-                                                                ))}
-                                                        </>
-                                                    </VStack>
+                                    {reply?.message && (
+                                        <Text color={colors.gray[700]} numberOfLines={2} className="text-base">
+                                            {reply?.message}
+                                            {reply?.edited && <Text className="text-xs text-gray-500"> (edited)</Text>}
+                                        </Text>
+                                    )}
 
-                                                    {(threadPostReply?.length == 1 || index !== 0) && (
-                                                        <Button
-                                                            size={'xs'}
-                                                            className="w-[150]"
-                                                            variant={'outline'}
-                                                            onPress={() =>
-                                                                onOpen(
-                                                                    thread?.channel?.id,
-                                                                    thread?.channel?.title,
-                                                                    thread?.post?.id,
-                                                                )
-                                                            }
-                                                        >
-                                                            <ButtonText style={{ fontSize: 12, color: '#000' }}>
-                                                                Reply
-                                                            </ButtonText>
-                                                        </Button>
-                                                    )}
+                                    {reply.email && <Text className="text-blue-500">{reply.email}</Text>}
+
+                                    {reply?.files?.data?.length > 0 && (
+                                        <HStack space="sm" className="my-1">
+                                            {reply?.files?.data?.map((file: any, fileIndex: number) => (
+                                                <Box
+                                                    key={fileIndex}
+                                                    className="overflow-hidden"
+                                                    style={{ width: 80, height: 80 }}
+                                                >
+                                                    <AvatarImage
+                                                        alt="attachment"
+                                                        className="rounded-none border-none"
+                                                        style={{
+                                                            width: '100%',
+                                                            height: '100%',
+                                                        }}
+                                                        source={{
+                                                            uri: file?.url,
+                                                        }}
+                                                    />
                                                 </Box>
-                                            </HStack>
-                                        ))}
-                                </>
-                            )}
-                        </Box>
-                    </HStack>
-                </Box>
-            </HStack>
-            {/* <HStack>
-                <Box flex={0.06} alignItems={'flex-start'}></Box>
-                <Button
-                    size={'xs'}
-                    variant={'outline'}
-                    _text={{ fontSize: 12, color: '#000' }}
-                    onPress={() => onOpen(thread?.channel?.id, thread?.channel?.title, postParentId)}
-                >
-                    Reply
-                </Button>
-            </HStack> */}
-        </VStack>
+                                            ))}
+                                        </HStack>
+                                    )}
+                                </VStack>
+                            </HStack>
+                        );
+                    })}
+
+                    {/* Show more replies indicator */}
+                    {totalReplies > 3 && (
+                        <HStack className="px-4 items-center" space="sm">
+                            <Box style={{ width: 40 }} />
+                            <Link onPress={() => onPress(channel?.id, 'Thread', post?.id)}>
+                                <LinkText className="text-blue-600 mt-1">
+                                    {totalReplies - 3} more {totalReplies - 3 === 1 ? 'reply' : 'replies'}
+                                </LinkText>
+                            </Link>
+                        </HStack>
+                    )}
+
+                    {/* Reply button */}
+                    <Box className="px-4 pb-2">
+                        <Button
+                            size="sm"
+                            className="self-start rounded-full"
+                            variant="outline"
+                            style={{
+                                borderColor: '#E2E8F0',
+                                paddingHorizontal: 16,
+                                paddingVertical: 6,
+                            }}
+                            onPress={() => onPress(channel?.id, 'Thread', post?.id)}
+                        >
+                            <ButtonText style={{ fontSize: 14, color: colors.gray[800] }}>Reply</ButtonText>
+                        </Button>
+                    </Box>
+                </VStack>
+            </Box>
+        </Pressable>
     );
 };
 

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