refactor: send and message display

src/routes/chat/ChannelChat/index.js

@@ -127,7 +127,6 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
           </div>
 
           <Send dragFiles={dragFiles} id={cid} type="channel" name={name} />
-          <div className="placeholder"></div>
         </StyledChannelChat>
         {/* {unreads != 0 && (
         <StyledNotification>

src/routes/chat/ChannelList/NavItem.js

@@ -1,13 +1,11 @@
-// import React from 'react'
 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 useContextMenu from "../../common/hook/useContextMenu";
-import ContextMenu from "../../common/component/ContextMenu";
-import { toggleChannelSetting } from "../../app/slices/ui";
-import ChannelIcon from "../../common/component/ChannelIcon";
-import { getUnreadCount } from "./utils";
+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();
@@ -44,7 +42,10 @@ const NavItem = ({ id, setFiles, contextMenuEventHandler }) => {
   const unreads = getUnreadCount(mids, messageData);
   return (
     <NavLink
-      onContextMenu={contextMenuEventHandler}
+      data-cid={id}
+      onContextMenu={(evt) => {
+        contextMenuEventHandler(evt, id);
+      }}
       ref={drop}
       key={id}
       className={`link ${isActive ? "drop_over" : ""}`}
@@ -65,58 +66,5 @@ const NavItem = ({ id, setFiles, contextMenuEventHandler }) => {
     </NavLink>
   );
 };
-export default function ChannelList({ setDropFiles }) {
-  const channelIds = useSelector((store) => store.channels.ids);
-  const {
-    visible: contextMenuVisible,
-    posX,
-    posY,
-    hideContextMenu,
-    handleContextMenuEvent,
-  } = useContextMenu();
-  return (
-    <>
-      {channelIds.map((cid) => {
-        return (
-          <NavItem
-            contextMenuEventHandler={handleContextMenuEvent}
-            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,
-            },
-            {
-              title: "Edit Channel",
-              underline: true,
-            },
-            {
-              title: "Invite People",
-            },
-            {
-              title: "Delete Channel",
-              danger: true,
-            },
-          ]}
-        />
-      ) : null}
-    </>
-  );
-}
+
+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} />
+      )}
+    </>
+  );
+}

src/routes/chat/DMChat/index.js

@@ -75,7 +75,6 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
             })}
         </div>
       </StyledDMChat>
-      <div className="placeholder"></div>
       <Send
         dragFiles={dragFiles}
         type="user"

src/routes/chat/DMChat/styled.js

@@ -56,8 +56,4 @@ export const StyledDMChat = styled.article`
     overflow-y: scroll;
     overflow-x: visible;
   }
-  .placeholder {
-    width: 100%;
-    height: 80px;
-  }
 `;

src/routes/chat/Layout.js

@@ -96,13 +96,14 @@ export default function Layout({
   useEffect(() => {
     if (messagesContainer) {
       const container = messagesContainer.current;
+      // 点击查看大图
       container.addEventListener(
         "click",
         (evt) => {
           console.log(evt);
           const { target } = evt;
           if (target.nodeType == 1 && target.classList.contains("preview")) {
-            setPreviewImage(target.src);
+            setPreviewImage(target.dataset.origin || target.src);
           }
         },
         true