@messenger-box/tailwind-ui-inbox 10.0.3-alpha.100

package/src/container/ThreadMessagesInbox.tsx

@@ -0,0 +1,450 @@
+import React, { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { orderBy, uniqBy, startCase } from 'lodash-es';
+import {
+    OnThreadChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
+    useGetPostThreadQuery,
+    useCreatePostThreadMutation,
+} from 'common/graphql';
+import { useUploadFiles } from '@messenger-box/platform-client';
+import { IFileInfo, RoomType, IPostThread } from 'common';
+import { useSelector } from 'react-redux';
+import { MessageInput, Messages } from '../components';
+import { userSelector } from '@adminide-stack/user-auth0-client';
+import { config } from '../config';
+import { BiChevronLeftSquare } from '@react-icons/all-files/bi/BiChevronLeftSquare.js';
+import { objectId } from '@messenger-box/core';
+
+const { MESSAGES_PER_PAGE, WEB_INBOX_MESSEGE_PATH } = config;
+
+export interface ThreadMessageInboxProps {
+    channelId: any;
+    postId?: any;
+    role?: string;
+    isPostParentIdThread?: boolean;
+    goBack?: boolean;
+    pathPrefix?: string;
+    setChannelId?: (channelId: any) => void;
+    setPostId?: (postId?: any) => void;
+    onMessageClick: (reservationId) => void;
+}
+
+export const ThreadMessagesInbox = React.memo((props: ThreadMessageInboxProps) => {
+    const {
+        channelId,
+        postId,
+        role,
+        isPostParentIdThread,
+        goBack = false,
+        pathPrefix,
+        setPostId,
+        setChannelId,
+        onMessageClick,
+    } = props;
+    const threadMessageRootRef = React.useRef(null);
+    const messageListRef = useRef(null);
+    const currentUser: any = useSelector(userSelector);
+    const [channelToTop, setChannelToTop] = useState(0);
+    const [postThread, setPostThread] = useState<IPostThread>();
+    const [channelMessages, setChannelMessages] = React.useState<any>([]);
+    const [totalCount, setTotalCount] = React.useState<any>(0);
+    const [loadingOldMessages, setLoadingOldMessages] = React.useState<boolean>(false);
+    const [loading, setLoading] = React.useState<boolean>(true);
+    const [isScrollToBottom, setIsScrollToBottom] = useState(false);
+    const { startUpload } = useUploadFiles();
+    const [sendThreadMessage] = useCreatePostThreadMutation();
+
+    const {
+        data,
+        loading: threadLoading,
+        fetchMore: fetchMoreMessages,
+        refetch: refetchThreadMessages,
+        subscribeToMore,
+    } = useGetPostThreadQuery({
+        variables: {
+            channelId: channelId?.toString(),
+            role: role?.toString(),
+            postParentId: postId?.toString(),
+            limit: MESSAGES_PER_PAGE,
+        },
+        fetchPolicy: 'cache-and-network',
+    });
+
+    React.useEffect(() => {
+        if (postId) {
+            refetchThreadMessages({
+                channelId: channelId?.toString(),
+                role: role?.toString(),
+                postParentId: postId?.toString(),
+                limit: MESSAGES_PER_PAGE,
+            });
+        }
+    }, [postId]);
+
+    // React.useEffect(() => {
+    //     if (data?.threadMessages) {
+    //         const threads = data?.threadMessages ?? null;
+    //         const threadsData = threads?.data ?? [];
+    //         const messeageTotalCount = threadsData?.reduce((accumulator, thread) => {
+    //             return accumulator + thread?.replyCount;
+    //         }, 0);
+    //         const replies = threadsData?.map((t: any) => t?.replies)?.flat(1) ?? [];
+    //         const posts = threadsData?.map((t: any) => t?.post)?.flat(1) ?? [];
+    //         const messages = [...posts, ...replies];
+
+    //         if (
+    //             (messages && messages.length > 0 && messages?.length > totalCount) ||
+    //             (messages && messages.length > 0 && channelMessages.length === 0)
+    //         ) {
+    //             setThreadMessages(messages, messages?.length);
+    //         }
+    //     }
+    //     if (isScrollToBottom && channelMessages) scrollToBottom();
+    // }, [data, channelMessages, loadingOldMessages, totalCount, isPostParentIdThread, isScrollToBottom]);
+
+    React.useEffect(() => {
+        if (data?.getPostThread) {
+            const threads: any = data.getPostThread;
+            const threadPost = threads?.post ?? {};
+            const threadReplies = threads?.replies ?? [];
+            const messeageTotalCount = threads?.replyCount ?? 0;
+            const messages = [threadPost, ...threadReplies];
+            if (
+                (messages && messages.length > 0 && messeageTotalCount > totalCount) ||
+                (messages && messages.length > 0 && channelMessages.length === 0)
+            ) {
+                setThreadMessages(messages, messeageTotalCount);
+            }
+        }
+        if (isScrollToBottom && channelMessages) scrollToBottom();
+    }, [data, channelMessages, loadingOldMessages, totalCount, isPostParentIdThread, isScrollToBottom]);
+
+    const lastMessage = useMemo(() => {
+        const threads: any = data?.getPostThread ?? null;
+        const threadPost = threads?.post ?? {};
+        const threadReplies = threads?.replies ?? [];
+
+        if (!threads) {
+            return null;
+        }
+        let threadMessagesData;
+        if (threadReplies?.length) {
+            threadMessagesData = [...threadReplies];
+        } else if (threadPost && Object.keys(threadPost).length) {
+            threadMessagesData = [threadPost];
+        }
+
+        let filteredLastMessage =
+            threadMessagesData && threadMessagesData?.length > 1
+                ? threadMessagesData?.reduce((a, b) => {
+                      return new Date(a?.updatedAt) > new Date(b?.updatedAt) ? a : b;
+                  }, []) ?? null
+                : threadMessagesData?.length <= 1
+                ? threadMessagesData?.[0] ?? []
+                : null;
+
+        return filteredLastMessage;
+    }, [data?.getPostThread]);
+
+    // const lastMessage = useMemo(() => {
+    //     const threads = data?.threadMessages ?? null;
+    //     const threadsData = threads?.data ?? [];
+    //     const replies = threadsData?.map((t: any) => t?.replies)?.flat(1) ?? [];
+    //     const posts = threadsData?.map((t: any) => t?.post)?.flat(1) ?? [];
+    //     if (!threadsData?.length) {
+    //         return null;
+    //     }
+    //     let threadMessagesData;
+    //     if (replies?.length) {
+    //         threadMessagesData = [...replies];
+    //     } else if (posts?.length) {
+    //         threadMessagesData = [...posts];
+    //     }
+
+    //     let filteredLastMessage =
+    //         threadMessagesData && threadMessagesData?.length > 1
+    //             ? threadMessagesData?.reduce((a, b) => {
+    //                   return new Date(a?.updatedAt) > new Date(b?.updatedAt) ? a : b;
+    //               }, []) ?? null
+    //             : threadMessagesData?.length <= 1
+    //             ? threadMessagesData?.[0] ?? []
+    //             : null;
+
+    //     return filteredLastMessage;
+    //     // //return data[data.length - 1];
+    // }, [data?.threadMessages]);
+
+    React.useEffect(() => {
+        if (lastMessage && (!postId || postId == 0)) {
+            const sParentId = lastMessage?.parentId ? lastMessage?.parentId : lastMessage?.id;
+            setPostId?.(sParentId);
+        }
+    }, [lastMessage, postId]);
+
+    const setThreadMessages = useCallback((messages: any, messagesTotalCount: number) => {
+        setChannelMessages((oldMessages: any) => uniqBy([...messages, ...oldMessages], ({ id }) => id));
+        setTotalCount(messagesTotalCount);
+    }, []);
+
+    const scrollToBottom = React.useCallback(() => {
+        if (threadMessageRootRef?.current) {
+            setIsScrollToBottom(false);
+            threadMessageRootRef.current.scrollTop = threadMessageRootRef.current.scrollHeight;
+        }
+    }, [threadMessageRootRef]);
+
+    const handleSend = useCallback(
+        async (message: string, files: []) => {
+            if (!(message && channelId)) {
+                return;
+            }
+            const newPostId = objectId();
+
+            if (files && files?.length > 0) {
+                const uploadResponse = await startUpload({
+                    file: files,
+                    saveUploadedFile: {
+                        variables: {
+                            newPostId,
+                        },
+                    },
+                    createUploadLink: {
+                        variables: {
+                            newPostId,
+                        },
+                    },
+                });
+                if (uploadResponse?.error) setLoading(false);
+                const uploadedFiles = uploadResponse.data as unknown as IFileInfo[];
+                if (uploadResponse.data) {
+                    const files = uploadedFiles?.map((f: any) => f.id) ?? null;
+                    await sendThreadMessage({
+                        variables: {
+                            postId: newPostId,
+                            channelId,
+                            postThreadId: postThread && postThread?.id,
+                            postParentId: !postId || postId == 0 ? null : postId,
+                            threadMessageInput: {
+                                content: message,
+                                files,
+                                role,
+                            },
+                        },
+                        update: (cache, { data, errors }) => {
+                            if (!data || errors) {
+                                setLoading(false);
+                                return;
+                            }
+                            const responseMessage = data?.createPostThread?.lastMessage;
+                            // setPostThread(data?.createPostThread?.data);
+                            // if (!postId || postId == 0) {
+                            //     setPostId(data?.createPostThread?.lastMessage?.id);
+                            // }
+
+                            setChannelToTop(channelToTop + 1);
+                            setLoading(false);
+
+                            // scrollToBottom();
+                        },
+                    });
+                }
+            } else {
+                await sendThreadMessage({
+                    variables: {
+                        channelId,
+                        postParentId: !postId || postId == 0 ? null : postId,
+                        postThreadId: postThread && postThread?.id,
+                        threadMessageInput: {
+                            content: message,
+                            role,
+                        },
+                    },
+                    update: (cache, { data, errors }) => {
+                        if (!data || errors) {
+                            return;
+                        }
+                        // setPostThread(data?.createPostThread.data);
+                        // if (!postId || postId == 0) {
+                        //     setPostId(data?.createPostThread?.lastMessage?.id);
+                        // }
+                        setChannelToTop(channelToTop + 1);
+                        //scrollToBottom();
+                    },
+                });
+            }
+        },
+        [setChannelMessages, channelId, postId, channelToTop, postThread],
+    );
+
+    const onFetchOld = useCallback(
+        async (skip: number) => {
+            if (channelId && postId) {
+                setLoadingOldMessages(true);
+                fetchMoreMessages({
+                    variables: {
+                        channelId: channelId?.toString(),
+                        role: role?.toString(),
+                        postParentId: postId?.toString(),
+                        //  selectedFields: 'id channel post replies replyCount lastReplyAt createdAt updatedAt',
+                        limit: MESSAGES_PER_PAGE,
+                        skip: skip - 1,
+                    },
+                })
+                    .then((res: any) => {
+                        if (res?.data?.getPostThread) {
+                            const threads: any = res?.data?.getPostThread;
+                            const threadReplies = threads?.replies ?? [];
+                            const messeageTotalCount = threads?.replyCount ?? 0;
+                            setThreadMessages(threadReplies, messeageTotalCount);
+                            if (threadMessageRootRef?.current) {
+                                threadMessageRootRef.current.scrollTop =
+                                    threadMessageRootRef.current.scrollTop +
+                                    threadMessageRootRef.current.clientHeight / 2;
+                            }
+                        }
+                    })
+                    // .then((res) => {
+                    //     if (res?.data?.threadMessages?.data) {
+                    //         const threads = res?.data?.threadMessages ?? null;
+                    //         const threadsData = threads?.data ?? [];
+                    //         const threadReplies = threadsData?.map((t: any) => t?.replies)?.flat(1) ?? [];
+                    //         const messeageTotalCount = threadsData?.reduce((accumulator, thread) => {
+                    //             return accumulator + thread?.replyCount;
+                    //         }, 0);
+                    //         const posts = threadsData?.map((t: any) => t?.post)?.flat(1) ?? [];
+                    //         const messages = [...posts, ...threadReplies];
+                    //         setThreadMessages(threadReplies, messages?.length);
+                    //         if (threadMessageRootRef?.current) {
+                    //             threadMessageRootRef.current.scrollTop =
+                    //                 threadMessageRootRef.current.scrollTop +
+                    //                 threadMessageRootRef.current.clientHeight / 2;
+                    //         }
+                    //     }
+                    // })
+                    .finally(() => {
+                        setLoadingOldMessages(false);
+                    })
+                    .catch((error: any) => {
+                        setLoadingOldMessages(false);
+                    });
+            }
+        },
+        [postId, channelId, threadMessageRootRef, channelMessages],
+    );
+
+    const onMessagesScroll = useCallback(
+        async (e) => {
+            if (threadMessageRootRef.current) {
+                const {
+                    clientHeight: messageContainerClientHeight,
+                    scrollHeight: messageContainerScrollHeight,
+                    scrollTop: messageContainerScrollTop,
+                    offsetTop: messageContainerOffsetTop,
+                } = threadMessageRootRef?.current;
+                if (
+                    messageContainerClientHeight - messageContainerScrollTop == messageContainerScrollHeight &&
+                    !loadingOldMessages &&
+                    totalCount > channelMessages.length
+                ) {
+                    await onFetchOld(channelMessages?.length);
+                }
+            }
+        },
+        [threadMessageRootRef, loadingOldMessages, channelMessages, totalCount],
+    );
+
+    const sortedMessages = useMemo(
+        () => channelMessages && orderBy(channelMessages, ['createdAt'], ['asc']),
+        [channelMessages],
+    );
+
+    return (
+        <React.Fragment>
+            {goBack && (
+                <button
+                    className="absolute m-1.5 w-10 bg-transparent text-gray-300 z-10 text-xs hover:border-none hover:shadow-none focus:border-none focus:shadow-none focus:outline-none"
+                    onClick={() => {
+                        setChannelId?.(channelId);
+                        setPostId?.(1);
+                    }}
+                >
+                    <BiChevronLeftSquare fontSize="32" />
+                </button>
+            )}
+            <div
+                ref={threadMessageRootRef}
+                className="flex flex-col-reverse overflow-y-auto flex-grow flex-shrink p-4 px-2.5 md:px-12 lg:px-20"
+                onScroll={onMessagesScroll}
+            >
+                <Messages
+                    innerRef={messageListRef}
+                    channelId={channelId}
+                    currentUser={currentUser}
+                    channelMessages={sortedMessages}
+                    totalCount={totalCount}
+                    onMessageClick={onMessageClick}
+                    subscribeToNewMessages={() =>
+                        subscribeToMore({
+                            document: CHAT_MESSAGE_ADDED,
+                            variables: {
+                                channelId: channelId?.toString(),
+                                postParentId: !postId || postId == 0 ? null : postId?.toString(),
+                            },
+                            updateQuery: (prev, { subscriptionData }: any) => {
+                                if (!subscriptionData.data) return prev;
+                                const newMessage: any = subscriptionData?.data?.threadChatMessageAdded;
+                                const prevReplyCount = prev?.getPostThread?.replyCount;
+                                const newReplyCount = prevReplyCount + 1;
+
+                                return Object.assign({}, prev, {
+                                    getPostThread: {
+                                        ...prev?.getPostThread,
+                                        lastReplyAt: newMessage.createdAt,
+                                        replies: [newMessage, ...prev?.getPostThread?.replies],
+                                        replyCount: newReplyCount,
+                                        updatedAt: newMessage.createdAt,
+                                    },
+                                });
+                            },
+                        })
+                    }
+                    // subscribeToNewServiceMessages={() =>
+                    //     subscribeToMore({
+                    //         document: THREAD_CHAT_ADDED,
+                    //         variables: {
+                    //             channelId: channelId?.toString(),
+                    //             postParentId: !postId || postId == 0 ? null : postId?.toString(),
+                    //         },
+                    //         updateQuery: (prev, { subscriptionData }: any) => {
+                    //             if (!subscriptionData.data) return prev;
+
+                    //             const newPostThreadData: any = subscriptionData?.data?.threadCreatedUpdated?.data;
+                    //             const newMessage: any = subscriptionData?.data?.threadCreatedUpdated?.lastMessage;
+                    //             const updatedData = 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: newPostThreadData?.totalCount ?? 0,
+                    //                     //  totalCount: prev?.threadMessages?.totalCount + 1,
+                    //                     data: updatedData?.length > 0 ? updatedData : [newPostThreadData],
+                    //                 },
+                    //             });
+                    //         },
+                    //     })
+                    // }
+                />
+            </div>
+            <MessageInput channelId={channelId} handleSend={handleSend} placeholder="Message" />
+        </React.Fragment>
+    );
+});