mr-chat-bird 1.0.0 → 1.0.2

package/src/components/ChatUserList/ChatUserMessage.tsx

@@ -1,362 +0,0 @@
-"use client";
-
-import { Text, Menu, Avatar } from "@mantine/core";
-import {
-  IconBan,
-  IconDotsVertical,
-  IconLock,
-  IconTrash,
-} from "@tabler/icons-react";
-import CustomRichTextEditor from "../RichTextEditor/RichTextEditor";
-import classes from "./ChatUserList.module.css";
-import { getSocket } from "../../lib/socket";
-import { useDispatch, useSelector } from "react-redux";
-import { RootState } from "../../store/store";
-import { useEffect, useState } from "react";
-import {
-  fetchMessagesByChatId,
-  addNewMessage,
-  addUserToChatList,
-  deleteMessagesByChatId,
-} from "../../store/slices/ChatSlice";
-import DOMPurify from "dompurify";
-import { UserData } from "./ChatUserList.type";
-import { ChatScrollContainer } from "../VirtualizedList/ChatScrollContainer";
-import UserProfileDrawer from "../UserProfile/UserProfileDrawer";
-
-export function ChatUserMessage({
-  chatId,
-  enableChat,
-  senderDetails,
-  receiverDetails,
-  onChatInitialized,
-}: {
-  chatId?: string;
-  enableChat?: boolean;
-  senderDetails?: UserData;
-  receiverDetails?: UserData;
-  onChatInitialized?: (data: any) => void;
-}) {
-  const dispatch = useDispatch<any>();
-
-  const messageList: any = useSelector(
-    (state: RootState) => state.chat.messageList,
-  );
-
-  const [page, setPage] = useState(0);
-  const [scrollTrigger, setScrollTrigger] = useState(0);
-  const [showUserInfo, setShowUserInfo] = useState(false);
-
-  const messages = messageList?.rows?.data || [];
-  const isEmpty = messages.length === 0;
-
-  const loadOlderMessages = () => {
-    const hasMore = messageList?.hasMore;
-
-    if (!chatId || !hasMore) return;
-    const nextPage = page + 1;
-    dispatch(
-      fetchMessagesByChatId({
-        chatId,
-        page: nextPage,
-        userId: senderDetails?.userId,
-      }),
-    );
-    setPage(nextPage);
-  };
-
-  useEffect(() => {
-    if (chatId) {
-      setPage(0);
-      dispatch(
-        fetchMessagesByChatId({
-          chatId,
-          page: 0,
-          userId: senderDetails?.userId,
-        }),
-      );
-    }
-  }, [chatId]);
-
-  useEffect(() => {
-    if (!senderDetails?.userId) return;
-    const socket = getSocket(senderDetails?.userId || "");
-    if (!socket) return;
-
-    const handleNewMessage = (data: any) => {
-      if (data.chatId !== chatId) return;
-
-      dispatch(
-        addNewMessage({
-          id: Date.now(),
-          chatId: data.chatId,
-          message: data.message,
-          sender: data.sender,
-          recipient: data.recipient,
-          type: data.type,
-          status: data.status,
-          createdAt: data.time,
-        }),
-      );
-    };
-
-    socket.on("newmessage", handleNewMessage);
-
-    return () => {
-      socket.off("newmessage", handleNewMessage);
-    };
-  }, [chatId, senderDetails?.userId]);
-
-  const handleSendMessage = (msg: string) => {
-    const socket = getSocket(senderDetails?.userId || "");
-
-    const payload = {
-      message: msg,
-      sender: senderDetails?.userId,
-      receiver: receiverDetails?.userId,
-      type: "text",
-    };
-
-    const isNewChat = !messageList?.rows?.data?.length;
-
-    if (isNewChat) {
-      socket?.emit(
-        "initializeNewChat",
-        {
-          ...payload,
-          senderUserDetails: {
-            userId: senderDetails?.userId,
-            username: senderDetails?.username,
-            displayName: senderDetails?.displayName,
-            avatar: senderDetails?.avatar,
-          },
-          receiverUserDetails: {
-            userId: receiverDetails?.userId,
-            username: receiverDetails?.username,
-            displayName: receiverDetails?.displayName,
-            avatar: receiverDetails?.avatar,
-          },
-        },
-        (response: any) => {
-          if (response?.status === "success") {
-            const { data } = response;
-            dispatch(
-              addUserToChatList({
-                id: Date.now(),
-                chatId: data.chatId,
-                message: data.message,
-                sender: data.sender,
-                recipient: data.recipient,
-                type: data.type,
-                status: data.status,
-                createdAt: new Date(data.time).getTime(),
-                updatedAt: new Date(data.time).getTime(),
-                userId: receiverDetails?.userId,
-                username: receiverDetails?.username,
-                displayName: receiverDetails?.displayName,
-                avatar: receiverDetails?.avatar,
-              }),
-            );
-            dispatch(
-              addNewMessage({
-                id: Date.now(),
-                chatId: data.chatId,
-                message: data.message,
-                sender: data.sender,
-                recipient: data.recipient,
-                type: data.type,
-                status: data.status,
-                createdAt: Date.now(),
-              }),
-            );
-            onChatInitialized?.(data);
-          } else {
-            console.log("Failed to initialize chat", response?.error);
-          }
-        },
-      );
-      return;
-    }
-
-    socket?.emit("privatemessage", { ...payload, chatId: chatId });
-    setScrollTrigger((prev) => prev + 1);
-  };
-
-  const handleLoadOlderMessages = () => {
-    if (messageList.hasMore) {
-      loadOlderMessages();
-    }
-  };
-
-  const handleDeleteMessages = () => {
-    if (!chatId || !senderDetails?.userId) return;
-    dispatch(
-      deleteMessagesByChatId({ chatId: chatId, userId: senderDetails?.userId }),
-    );
-  };
-
-  return (
-    <div className={classes.mainArea}>
-      {/* Header */}
-      <div className={classes.chatHeader}>
-        {receiverDetails && (
-          <>
-            <div
-              className={classes.receiverInfo}
-              onClick={() => setShowUserInfo(true)}
-            >
-              {receiverDetails?.avatar ? (
-                <Avatar src={receiverDetails.avatar} size={36} radius="xl" />
-              ) : (
-                <Avatar
-                  key={
-                    receiverDetails?.displayName || receiverDetails?.username
-                  }
-                  name={
-                    receiverDetails?.displayName || receiverDetails?.username
-                  }
-                  color="initials"
-                />
-              )}
-
-              <Text fw={600} size="md">
-                {receiverDetails?.displayName || receiverDetails?.username}
-              </Text>
-            </div>
-
-            <Menu shadow="md" width={200} position="bottom-end">
-              <Menu.Target>
-                <IconDotsVertical size={20} style={{ cursor: "pointer" }} />
-              </Menu.Target>
-
-              <Menu.Dropdown>
-                <Menu.Item
-                  color="red"
-                  leftSection={<IconTrash size={16} />}
-                  onClick={handleDeleteMessages}
-                >
-                  Delete all messages
-                </Menu.Item>
-                <Menu.Item color="red" leftSection={<IconBan size={16} />}>
-                  Block
-                </Menu.Item>
-              </Menu.Dropdown>
-            </Menu>
-          </>
-        )}
-      </div>
-
-      <div className={classes.messageArea}>
-        {isEmpty ? (
-          <div className={classes.emptyState}>
-            <div className={classes.encryptionMinimal}>
-              <IconLock size={20} stroke={1.8} />
-              <Text className={classes.encryptionText} size="md">
-                End-to-end encrypted
-              </Text>
-            </div>
-          </div>
-        ) : (
-          <ChatScrollContainer
-            data={messages}
-            hasMore={messageList?.hasMore}
-            loadMore={handleLoadOlderMessages}
-            scrollToBottomTrigger={scrollTrigger}
-            renderItem={(item: any, index: number) => {
-              const isOutgoing = item?.sender === senderDetails?.userId;
-
-              const currentDate = new Date(item?.createdAt);
-              const prevItem = messages[index - 1];
-
-              const showDate =
-                index === 0 ||
-                new Date(prevItem?.createdAt).toDateString() !==
-                  currentDate.toDateString();
-
-              const today = new Date();
-              const yesterday = new Date();
-              yesterday.setDate(today.getDate() - 1);
-
-              const isToday =
-                currentDate.toDateString() === today.toDateString();
-
-              const isYesterday =
-                currentDate.toDateString() === yesterday.toDateString();
-
-              let formattedDate = "";
-
-              if (isToday) {
-                formattedDate = "Today";
-              } else if (isYesterday) {
-                formattedDate = "Yesterday";
-              } else {
-                formattedDate = currentDate.toLocaleDateString(undefined, {
-                  weekday: "short",
-                  month: "short",
-                  day: "numeric",
-                });
-              }
-
-              const time = currentDate.toLocaleTimeString([], {
-                hour: "2-digit",
-                minute: "2-digit",
-                hour12: false,
-              });
-
-              return (
-                <div key={item?.id + "_" + index}>
-                  {showDate && (
-                    <div className={classes.dateSeparator}>{formattedDate}</div>
-                  )}
-
-                  <div
-                    style={{
-                      borderRadius:
-                        item.sender === senderDetails?.userId
-                          ? "16px 16px 1px 16px"
-                          : "16px 16px 16px 1px",
-                    }}
-                    className={`${classes.messageBubble} ${
-                      isOutgoing ? classes.outgoing : classes.incoming
-                    }`}
-                  >
-                    <div
-                      className={classes.messageContent}
-                      dangerouslySetInnerHTML={{
-                        __html: DOMPurify.sanitize(item?.message),
-                      }}
-                    />
-
-                    <div className={classes.messageTime}>{time}</div>
-                  </div>
-                </div>
-              );
-            }}
-          />
-        )}
-      </div>
-
-      {(chatId || enableChat) && (
-        <div className={classes.inputBar}>
-          <CustomRichTextEditor onSubmit={handleSendMessage} />
-        </div>
-      )}
-
-      <UserProfileDrawer
-        opened={showUserInfo}
-        onClose={() => setShowUserInfo(false)}
-        user={{
-          avatar: receiverDetails?.avatar,
-          username: receiverDetails?.username,
-          displayName: receiverDetails?.displayName,
-        }}
-        onDeleteMessages={() => {
-          handleDeleteMessages();
-        }}
-        onBlock={() => {
-          console.log("block user");
-        }}
-      />
-    </div>
-  );
-}