refactor: send and message display

src/routes/chat/ChannelList/NavItem.js

@@ -0,0 +1,70 @@
+import { NavLink, useNavigate } from "react-router-dom";
+import { useDrop } from "react-dnd";
+import { NativeTypes } from "react-dnd-html5-backend";
+import { useDispatch, useSelector } from "react-redux";
+import { toggleChannelSetting } from "../../../app/slices/ui";
+import ChannelIcon from "../../../common/component/ChannelIcon";
+import { getUnreadCount } from "../utils";
+
+const NavItem = ({ id, setFiles, contextMenuEventHandler }) => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const { channel, mids, messageData } = useSelector((store) => {
+    return {
+      channel: store.channels.byId[id],
+      mids: store.channelMessage[id],
+      messageData: store.message,
+    };
+  });
+  const handleChannelSetting = (evt) => {
+    evt.preventDefault();
+    evt.stopPropagation();
+    dispatch(toggleChannelSetting(id));
+  };
+  const [{ isActive }, drop] = useDrop(() => ({
+    accept: [NativeTypes.FILE],
+    drop({ dataTransfer }) {
+      if (dataTransfer.files.length) {
+        // console.log(files, rest);
+        setFiles([...dataTransfer.files]);
+        navigate(`/chat/channel/${id}`);
+        // 重置
+        setTimeout(() => {
+          setFiles([]);
+        }, 300);
+      }
+    },
+    collect: (monitor) => ({
+      isActive: monitor.canDrop() && monitor.isOver(),
+    }),
+  }));
+  const { is_public, name } = channel;
+  const unreads = getUnreadCount(mids, messageData);
+  return (
+    <NavLink
+      data-cid={id}
+      onContextMenu={(evt) => {
+        contextMenuEventHandler(evt, id);
+      }}
+      ref={drop}
+      key={id}
+      className={`link ${isActive ? "drop_over" : ""}`}
+      to={`/chat/channel/${id}`}
+    >
+      <span className="txt">
+        <ChannelIcon personal={!is_public} />
+        {name}
+      </span>
+      <div className="icons">
+        <i className="setting" onClick={handleChannelSetting}></i>
+        {unreads > 0 && (
+          <i className={`badge ${unreads > 99 ? "dot" : ""}`}>
+            {unreads > 99 ? null : unreads}
+          </i>
+        )}
+      </div>
+    </NavLink>
+  );
+};
+
+export default NavItem;

src/routes/chat/ChannelList/index.js

@@ -0,0 +1,77 @@
+import { useState } from "react";
+import { useSelector } from "react-redux";
+import useContextMenu from "../../../common/hook/useContextMenu";
+import ContextMenu from "../../../common/component/ContextMenu";
+import DeleteConfirmModal from "../../../common/component/ChannelSetting/DeleteConfirmModal";
+import NavItem from "./NavItem";
+
+export default function ChannelList({ setDropFiles }) {
+  const [removeConfirmVisible, setRemoveConfirmVisible] = useState(false);
+  const [currId, setCurrId] = useState(null);
+  const { channelIds, channelData } = useSelector((store) => {
+    return { channelIds: store.channels.ids, channelData: store.channels.byId };
+  });
+  const {
+    visible: contextMenuVisible,
+    posX,
+    posY,
+    hideContextMenu,
+    handleContextMenuEvent,
+  } = useContextMenu();
+  const handleContextMenuClick = (evt, id) => {
+    console.log("wtf", evt, id);
+    setCurrId(id);
+    handleContextMenuEvent(evt);
+  };
+  const toggleRemoveConfirm = () => {
+    setRemoveConfirmVisible((prev) => !prev);
+  };
+  const { is_public } = channelData[currId] || {};
+  return (
+    <>
+      {channelIds.map((cid) => {
+        return (
+          <NavItem
+            contextMenuEventHandler={handleContextMenuClick}
+            key={cid}
+            id={cid}
+            setFiles={setDropFiles}
+          />
+        );
+      })}
+      {contextMenuVisible ? (
+        <ContextMenu
+          hideMenu={hideContextMenu}
+          posX={posX}
+          posY={posY}
+          items={[
+            {
+              title: "Mark As Read",
+              underline: true,
+            },
+            {
+              title: "Mute",
+            },
+            {
+              title: "Notification Settings",
+              underline: true,
+            },
+            is_public
+              ? null
+              : {
+                  title: "Invite People",
+                },
+            {
+              title: "Delete Channel",
+              danger: true,
+              handler: toggleRemoveConfirm,
+            },
+          ]}
+        />
+      ) : null}
+      {removeConfirmVisible && (
+        <DeleteConfirmModal id={currId} closeModal={toggleRemoveConfirm} />
+      )}
+    </>
+  );
+}