mr-chat-bird 1.0.0 → 1.0.2

package/src/components/ChatUserList/ChatUserList.tsx

@@ -1,434 +0,0 @@
-"use client";
-
-import {
-  Text,
-  Modal,
-  Button,
-  ActionIcon,
-  Autocomplete,
-  Group,
-  Avatar,
-  Divider,
-} from "@mantine/core";
-import { IconPlus } from "@tabler/icons-react";
-import { useDisclosure } from "@mantine/hooks";
-import classes from "./ChatUserList.module.css";
-import { ChatUserMessage } from "./ChatUserMessage";
-import {
-  addUserToChatList,
-  fetchMessageListByUserId,
-  resetMessageList,
-  setMessagedUserList,
-} from "../../store/slices/ChatSlice";
-import { useDispatch, useSelector } from "react-redux";
-import { RootState } from "../../store/store";
-import { useEffect, useState } from "react";
-import { getSocket } from "../../lib/socket";
-import users from "./users_list.json";
-import { VirtualizedList } from "../VirtualizedList";
-import DOMPurify from "dompurify";
-import { UserData, UserOption } from "./ChatUserList.type";
-import { getChatDisplayTime } from "../../utils/helper";
-
-export function ChatUserList() {
-  const [opened, { open, close }] = useDisclosure(false);
-
-  const dispatch = useDispatch<any>();
-  const chatList: any = useSelector(
-    (state: RootState) => state.chat.messagedUserList,
-  );
-
-  const [page, setPage] = useState(0);
-  const [chatId, setChatId] = useState<string>("");
-  const [enableChat, setEnableChat] = useState(false);
-  const [receiverSearchValue, setReceiverSearchValue] = useState("");
-  const [receiverDetails, setReceiverDetails] = useState<any>();
-  const [receiverUserDetails, setReceiverUserDetails] =
-    useState<UserData | null>();
-
-  // Temp
-  const [senderSearchValue, setSenderSearchValue] = useState("");
-  const [senderDetails, setSenderDetails] = useState<any>("");
-  const [senderUserDetails, setSenderUserDetails] = useState<any>();
-
-  useEffect(() => {
-    if (senderUserDetails) {
-      setSenderDetails(senderUserDetails);
-    }
-  }, [senderUserDetails]);
-
-  useEffect(() => {
-    if (!senderUserDetails) return;
-    dispatch(
-      fetchMessageListByUserId({ userId: senderUserDetails.userId, page: 0 }),
-    );
-  }, [senderUserDetails]);
-
-  const handleStartChat = () => {
-    if (!receiverUserDetails?.userId) return;
-
-    const existingChat = chatList?.rows?.data?.find(
-      (item: any) => item.userId === receiverUserDetails.userId,
-    );
-
-    if (existingChat) {
-      handleJoinChat(existingChat);
-      close();
-      setReceiverSearchValue("");
-      return;
-    }
-
-    dispatch(
-      addUserToChatList({
-        userId: receiverUserDetails?.userId,
-        username: receiverUserDetails?.username,
-        displayName: receiverUserDetails?.displayName,
-        avatar: receiverUserDetails?.avatar,
-      }),
-    );
-    setReceiverDetails(receiverUserDetails);
-    close();
-    setReceiverSearchValue("");
-    dispatch(resetMessageList());
-    setChatId("");
-    setEnableChat(true);
-  };
-
-  useEffect(() => {
-    if (!senderDetails?.userId) return;
-
-    const socket = getSocket(senderDetails.userId);
-    if (!socket) return;
-
-    if (!socket.connected) {
-      socket.connect();
-    }
-  }, [senderDetails?.userId]);
-
-  useEffect(() => {
-    if (!senderUserDetails?.userId) return;
-    const socket = getSocket(senderDetails.userId);
-    if (!socket) return;
-
-    const handleNewChat = (data: any) => {
-      if (data.sender === senderUserDetails.userId) return;
-      dispatch(
-        addUserToChatList({
-          message: data.message,
-          chatId: data.chatId,
-          userId: data.sender,
-          username: data.userDetails.username,
-          displayName: data.userDetails.displayName,
-          avatar: data.userDetails.avatar,
-        }),
-      );
-    };
-
-    socket.on("newChat", handleNewChat);
-
-    return () => {
-      socket.off("newChat", handleNewChat);
-    };
-  }, [senderDetails.userId]);
-
-  useEffect(() => {
-    if (!senderDetails?.userId) return;
-    const socket = getSocket(senderDetails?.userId || "");
-    if (!socket) return;
-
-    const handleUpdatePreviewMessage = (data: any) => {
-      if (!chatList?.rows?.data) return;
-
-      const updatedList = chatList.rows.data.map((item: any) => {
-        if (item.chatId === data.chatId) {
-          const isActive = data.chatId === chatId;
-
-          return {
-            ...item,
-            message: data.message,
-            updatedAt: new Date().toISOString(),
-            unreadCount: isActive ? 0 : (item.unreadCount || 0) + 1,
-          };
-        }
-        return item;
-      });
-
-      const index = updatedList.findIndex(
-        (item: any) => item.chatId === data.chatId,
-      );
-
-      if (index !== -1) {
-        const updatedItem = updatedList.splice(index, 1)[0];
-        updatedList.unshift(updatedItem);
-      }
-
-      console.log("Updated", updatedList, data);
-
-      dispatch(
-        setMessagedUserList({
-          ...chatList,
-          rows: {
-            ...chatList.rows,
-            data: updatedList,
-          },
-        }),
-      );
-    };
-
-    socket.on("newMessageNotification", handleUpdatePreviewMessage);
-
-    return () => {
-      socket.off("newMessageNotification", handleUpdatePreviewMessage);
-    };
-  }, [chatList, senderDetails?.userId]);
-
-  const loadMoreChats = () => {
-    if (!chatList?.hasMore) return;
-
-    const nextPage = page + 1;
-    setPage(nextPage);
-
-    dispatch(
-      fetchMessageListByUserId({
-        userId: senderUserDetails.userId,
-        page: nextPage,
-      }),
-    );
-  };
-
-  const handleJoinChat = (item: any) => {
-    const socket = getSocket(senderDetails.userId);
-    if (!socket) return;
-    setReceiverDetails({
-      userId: item.userId,
-      username: item.username,
-      displayName: item.displayName,
-      avatar: item.avatar,
-    });
-    socket.emit("joinChat", {
-      chatId: item.chatId,
-    });
-    setChatId(item?.chatId || "");
-    dispatch(resetMessageList());
-    const updatedList = chatList.rows.data.map((chat: any) =>
-      chat.chatId === item.chatId ? { ...chat, unreadCount: 0 } : chat,
-    );
-
-    dispatch(
-      setMessagedUserList({
-        ...chatList,
-        rows: {
-          ...chatList.rows,
-          data: updatedList,
-        },
-      }),
-    );
-  };
-
-  const stripHtml = (html: string) => {
-    const div = document.createElement("div");
-    div.innerHTML = html;
-    return div.textContent || "";
-  };
-
-  const userOptions = users.map((user) => ({
-    value: user.username,
-    label: user.displayName || user.username,
-    user,
-  }));
-
-  return (
-    <div className={classes.chatWrapper}>
-      <Modal
-        opened={opened}
-        onClose={() => {
-          close();
-          setReceiverSearchValue("");
-        }}
-        title="Find User"
-        centered
-        withCloseButton
-      >
-        <Autocomplete
-          mb={12}
-          label="Sender"
-          placeholder="Type username..."
-          limit={20}
-          data={userOptions}
-          value={senderSearchValue}
-          onChange={setSenderSearchValue}
-          onOptionSubmit={(val) => {
-            const selected = users.find((u) => u.username === val);
-            if (selected) {
-              setSenderSearchValue("");
-              setSenderUserDetails(selected);
-            }
-          }}
-          renderOption={({ option }) => {
-            const user = (option as UserOption).user;
-            return (
-              <Group gap="sm">
-                <Avatar src={user.avatar} size={36} radius="xl" />
-                <div>
-                  <Text size="sm">{user.displayName || user.username}</Text>
-                  {user.displayName && (
-                    <Text size="xs" opacity={0.5}>
-                      @{user.username}
-                    </Text>
-                  )}
-                </div>
-              </Group>
-            );
-          }}
-        />
-
-        <Autocomplete
-          mb={12}
-          label="Receiver"
-          placeholder="Type username..."
-          limit={20}
-          data={userOptions}
-          value={receiverSearchValue}
-          onChange={setReceiverSearchValue}
-          onOptionSubmit={(val) => {
-            const selected = users.find((u) => u.username === val);
-            if (selected) {
-              setReceiverSearchValue("");
-              setReceiverUserDetails(selected);
-            }
-          }}
-          renderOption={({ option }) => {
-            const user = (option as UserOption).user;
-            return (
-              <Group gap="sm">
-                <Avatar src={user.avatar} size={36} radius="xl" />
-                <div>
-                  <Text size="sm">{user.displayName || user.username}</Text>
-                  {user.displayName && (
-                    <Text size="xs" opacity={0.5}>
-                      @{user.username}
-                    </Text>
-                  )}
-                </div>
-              </Group>
-            );
-          }}
-        />
-
-        <Button
-          fullWidth
-          onClick={handleStartChat}
-          disabled={!Boolean(receiverUserDetails?.username)}
-        >
-          Start Chat
-        </Button>
-      </Modal>
-
-      <div className={classes.chatContainer}>
-        <div className={classes.sidebar}>
-          <div className={classes.sidebarTop}>
-            <div className={classes.topBar}>
-              <Text size="lg" fw={600}>
-                MrChat
-              </Text>
-              <div className={classes.topActions}>
-                <ActionIcon
-                  variant="subtle"
-                  onClick={() => {
-                    setReceiverUserDetails(null);
-                    open();
-                  }}
-                  radius="lg"
-                >
-                  <IconPlus size={20} stroke={3} />
-                </ActionIcon>
-              </div>
-            </div>
-          </div>
-          <Text size="xs" c="dimmed" mt="sm" mb="xs" ml={12}>
-            All Messages
-          </Text>
-          {/* Scrollable DM list */}
-          <div className={classes.scrollWrapper}>
-            <VirtualizedList
-              data={chatList?.rows?.data || []}
-              endReached={loadMoreChats}
-              itemContent={(_, item: any) => {
-                const isActive = item.chatId === chatId;
-
-                return (
-                  <div
-                    className={`${classes.chatItem} ${
-                      isActive ? classes.activeChatItem : ""
-                    }`}
-                    onClick={() => {
-                      if (isActive) return;
-                      handleJoinChat(item);
-                    }}
-                  >
-                    {item.avatar ? (
-                      <Avatar src={item.avatar} size={36} radius="xl" />
-                    ) : (
-                      <Avatar
-                        key={item.displayName || item.username}
-                        name={item.displayName || item.username}
-                        color="initials"
-                      />
-                    )}
-
-                    <div className={classes.chatInfo}>
-                      <Text className={classes.chatLabelItem} truncate>
-                        {item.displayName || item.username}
-                      </Text>
-                      {item.unreadCount > 0 && (
-                        <div className={classes.unreadBadge}>
-                          {item.unreadCount || 10}
-                        </div>
-                      )}
-
-                      <div className={classes.messagePreview}>
-                        <Text
-                          truncate
-                          size="xs"
-                          c="dimmed"
-                          style={{ maxWidth: 150 }}
-                          className={classes.messagePreviewContent}
-                        >
-                          {stripHtml(DOMPurify.sanitize(item.message))}
-                        </Text>
-                        <Text
-                          size="xs"
-                          c="dimmed"
-                          className={classes.messagePreviewTime}
-                        >
-                          {getChatDisplayTime(item.updatedAt || item.createdAt)}
-                        </Text>
-                      </div>
-                    </div>
-                  </div>
-                );
-              }}
-            />
-          </div>
-        </div>
-
-        {/* Main chat area */}
-        <ChatUserMessage
-          chatId={chatId}
-          enableChat={enableChat}
-          senderDetails={senderDetails}
-          receiverDetails={receiverDetails}
-          onChatInitialized={(data: any) => {
-            handleJoinChat({
-              chatId: data.chatId,
-              userId: receiverDetails?.userId,
-              username: receiverDetails?.username,
-              displayName: receiverDetails?.displayName,
-              avatar: receiverDetails?.avatar,
-            });
-          }}
-        />
-      </div>
-    </div>
-  );
-}

package/src/components/ChatUserList/ChatUserList.type.tsx

@@ -1,12 +0,0 @@
-export type UserOption = {
-  value: string;
-  label?: string;
-  user: UserData;
-};
-
-export type UserData = {
-  userId: string;
-  username: string;
-  displayName?: string;
-  avatar?: string;
-};