@messenger-box/platform-mobile 10.0.3-alpha.20 → 10.0.3-alpha.201

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

@@ -1,301 +0,0 @@
-import React, { useMemo } from 'react';
-import {
-    Text,
-    Image,
-    Pressable,
-    HStack,
-    Box,
-    AvatarGroup,
-    Avatar,
-    AvatarFallbackText,
-    AvatarImage,
-    AvatarBadge,
-    View,
-} 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,
-    useOnThreadCreatedUpdatedSubscription,
-    useOnThreadChatMessageAddedSubscription,
-    OnThreadCreatedUpdatedDocument as THREAD_CHAT_ADDED,
-    OnThreadChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
-} from 'common/graphql';
-import { startCase } from 'lodash-es';
-import colors from 'tailwindcss/colors';
-
-const createdAtText = (value: string) => {
-    if (!value) return '';
-
-    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 {
-    users: IUserAccount[];
-}
-
-export interface IDialogListItemProps {
-    currentUser?: any;
-    users?: any;
-    selectedChannelId?: any;
-    channel?: any;
-    onOpen: (id: any, title: any, postParentId?: any) => void;
-    refreshing: boolean;
-    role: any;
-}
-
-/**
- * TODO:
- * - Get Reservation info: reservation date, status
- * - Add ability to get property information: name, logo
- */
-export const SupportServiceDialogsListItemComponent: React.FC<IDialogListItemProps> = function DialogsListItem({
-    currentUser,
-    // users,
-    selectedChannelId,
-    channel,
-    onOpen,
-    refreshing,
-    role,
-}) {
-    const [servicePostParentId, setServicePostParentId] = React.useState(null);
-    const {
-        data: threadMessages,
-        loading: threadMessageLoading,
-        error,
-        refetch: refetchThreadMessages,
-        subscribeToMore,
-    } = useThreadMessagesQuery({
-        variables: {
-            channelId: channel?.id?.toString(),
-            role,
-            limit: 2,
-        },
-        fetchPolicy: 'cache-and-network',
-    });
-
-    useFocusEffect(
-        React.useCallback(() => {
-            // Do something when the screen is focused
-            //  refetchMessages({ channelId: channel?.id?.toString(), limit: 25 });
-            refetchThreadMessages({ channelId: channel?.id?.toString(), role, limit: 2 });
-            return () => {
-                // Do something when the screen is unfocused
-                // Useful for cleanup functions
-            };
-        }, [refreshing]),
-    );
-
-    const lastMessage = useMemo(() => {
-        if (!threadMessages?.threadMessages?.data?.length) {
-            return null;
-        }
-        const { data }: any = threadMessages.threadMessages;
-        const replies =
-            data
-                ?.map((t: any) => t?.replies)
-                ?.flat(1)
-                ?.filter((p: any) => p?.message !== '') ?? [];
-        if (replies?.length) {
-            return replies[0];
-            // return replies[replies.length - 1];
-        } else {
-            const post =
-                data?.find((t: any) => {
-                    return t?.post?.message !== '';
-                }) ??
-                data?.find((t: any) => {
-                    return t?.post;
-                }) ??
-                null;
-            return post ? post?.post : null;
-        }
-    }, [threadMessages]);
-
-    React.useEffect(() => {
-        if (lastMessage) {
-            const sParentId = lastMessage?.parentId ? lastMessage?.parentId : lastMessage?.id;
-            setServicePostParentId(sParentId);
-        }
-    }, [lastMessage]);
-
-    const creatorAndMembersId = React.useMemo(() => {
-        if (!channel?.members) return null;
-        const membersIds: any =
-            channel?.members
-                ?.filter((m: any) => m !== null && m?.user?.id !== currentUser?.id)
-                ?.map((mu: any) => mu?.user?.id) ?? [];
-        const creatorId: any = channel?.creator?.id;
-        const mergedIds: any = [].concat(membersIds, creatorId) ?? [];
-        return mergedIds?.filter((m: any, pos: any) => mergedIds?.indexOf(m) === pos) ?? [];
-    }, [channel]);
-
-    const postParentId = React.useMemo(() => {
-        if (!creatorAndMembersId?.length) return null;
-
-        return creatorAndMembersId?.length && creatorAndMembersId?.includes(currentUser?.id)
-            ? null
-            : lastMessage?.parentId
-            ? lastMessage?.parentId
-            : lastMessage?.id ?? 0;
-    }, [creatorAndMembersId, lastMessage]);
-
-    // const { data: threadCreatedUpdated } = useOnThreadCreatedUpdatedSubscription({
-    //     variables: {
-    //         channelId: channel?.id?.toString(),
-    //         postParentId:
-    //             postParentId == null
-    //                 ? null
-    //                 : lastMessage?.parentId
-    //                 ? lastMessage?.parentId ?? null
-    //                 : lastMessage?.id ?? null,
-    //     },
-    // });
-
-    // React.useEffect(() => {
-    //     if (threadCreatedUpdated?.threadCreatedUpdated?.data) {
-    //         refetchThreadMessages({ channelId: channel?.id?.toString(), role, limit: 2 });
-    //     }
-    // }, [threadCreatedUpdated]);
-
-    return (
-        <Pressable
-            onPress={() => channel?.id !== selectedChannelId && onOpen(channel?.id, channel?.title, postParentId)}
-            className="flex-1 border rounded-md border-gray-200 dark:border-gray-600 dark:bg-gray-700"
-        >
-            <HStack space={'sm'} className="flex-1 w-[100%] py-3 justify-between items-center">
-                <Box className="flex-[0.1] items-start pl-3">
-                    <Avatar
-                        key={'support-service-channels-key-' + channel?.id}
-                        size={'sm'}
-                        className="bg-transparent top-0 right-0 z-[1]"
-                    >
-                        <AvatarFallbackText> {startCase(channel?.creator?.username?.charAt(0))}</AvatarFallbackText>
-                        <AvatarImage
-                            alt="user image"
-                            style={{ borderRadius: 6, borderWidth: 2, borderColor: '#fff' }}
-                            source={{
-                                uri: channel?.creator?.picture,
-                            }}
-                        />
-                    </Avatar>
-                </Box>
-                <Box className="flex-[0.9]">
-                    <ServiceChannelWithLastMessage
-                        channel={channel}
-                        lastMessage={lastMessage}
-                        subscribeToNewMessages={() =>
-                            subscribeToMore({
-                                document: THREAD_CHAT_ADDED,
-                                variables: {
-                                    channelId: channel?.id?.toString(),
-                                    postParentId: postParentId ? servicePostParentId : 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: [...t?.replies, newMessage],
-                                                  replyCount: newPostThreadData?.replyCount,
-                                                  lastReplyAt: newPostThreadData?.lastReplyAt,
-                                                  updatedAt: newPostThreadData?.updatedAt,
-                                              }
-                                            : t,
-                                    );
-
-                                    return Object.assign({}, prev, {
-                                        threadMessages: {
-                                            ...prev?.threadMessages,
-                                            //  totalCount: prev?.threadMessages?.totalCount + 1,
-                                            data: data,
-                                        },
-                                    });
-                                },
-                            })
-                        }
-                    />
-                    {/* <Text
-                        flex={1}
-                        color="gray.600"
-                        p={0}
-                        m={0}
-                        w={'100%'}
-                        justifyContent={''}
-                        fontSize="lg"
-                        fontWeight="semibold"
-                    >
-                        {title}
-                    </Text> */}
-                    {/* <Text flex={0.1} color="gray.600">
-                        {lastMessage?.message ?? ''}
-                    </Text> */}
-                </Box>
-                {/* <Text flex={0.2} color="gray.500">
-                    {lastMessage ? createdAtText(lastMessage?.createdAt) : ''}
-                </Text> */}
-            </HStack>
-        </Pressable>
-    );
-};
-
-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]">
-                <Text color={colors.gray[600]} className="text-lg flex-wrap font-semibold">
-                    {channel?.title}
-                </Text>
-                <Text color={colors.gray[600]} numberOfLines={1}>
-                    {displayMessage}
-                </Text>
-            </Box>
-
-            <Box className="flex-[0.2]">
-                <Text color={colors.gray[500]}>{lastMessage ? createdAtText(lastMessage?.createdAt) : ''}</Text>
-            </Box>
-        </HStack>
-    );
-});
-
-export const SupportServiceDialogsListItem = React.memo(SupportServiceDialogsListItemComponent);

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

@@ -1,321 +0,0 @@
-import React, { useMemo } from 'react';
-import {
-    VStack,
-    Text,
-    Image,
-    Pressable,
-    HStack,
-    Box,
-    AvatarGroup,
-    Avatar,
-    AvatarFallbackText,
-    AvatarImage,
-    AvatarBadge,
-    View,
-    Button,
-    ButtonText,
-} 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/graphql';
-import { startCase } from 'lodash-es';
-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');
-};
-
-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;
-}
-
-/**
- * TODO:
- * - 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,
-}) {
-    // 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]);
-
-    // React.useEffect(() => {
-    //     if (threadCreatedUpdated?.threadCreatedUpdated?.data) setData(threadCreatedUpdated?.threadCreatedUpdated?.data);
-    // }, [threadCreatedUpdated?.threadCreatedUpdated]);
-
-    // 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]);
-
-    // const participants: any = React.useMemo(() => {
-    //     if (!thread?.participants?.length) return null;
-    //     return thread?.participants?.filter((u: any) => u?.user?.id !== currentUser?.id) ?? [];
-    // }, [thread]);
-
-    // const allParticipantsNames: any = React.useMemo(() => {
-    //     if (!participants?.length) return null;
-    //     return (
-    //         participants
-    //             ?.map((p: any) => {
-    //                 return p?.user?.givenName + ' ' + p?.user?.familyName ?? '';
-    //             })
-    //             ?.join(', ') ?? ''
-    //     );
-    // }, [participants]);
-
-    if (!threadPostReply || threadPostReply?.length == 0) {
-        return <></>;
-    }
-
-    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"
-        >
-            <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>
-                    </HStack> */}
-                    <HStack space={'sm'} className="flex-1 justify-center items-center">
-                        <Box className="flex-1">
-                            {/* <HStack space={2} py={2}>
-                                <Box>
-                                    <Avatar
-                                        bg={'transparent'}
-                                        size={8}
-                                        _image={{ borderRadius: 6, borderWidth: 2, borderColor: '#fff' }}
-                                        source={{
-                                            uri: thread?.post?.author?.picture,
-                                        }}
-                                    >
-                                        {startCase(thread?.post?.author?.username?.charAt(0))}
-                                    </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>
-                            </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>
-
-                                                    {(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>
-                                                    )}
-                                                </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>
-    );
-};
-
-export const ThreadViewItem = React.memo(ThreadViewItemComponent);