feat: markdown auto format

src/routes/chat/ChannelList/NavItem.js

@@ -2,16 +2,28 @@ import { useNavigate } from "react-router-dom";
 import { useDrop } from "react-dnd";
 import { NativeTypes } from "react-dnd-html5-backend";
 import { useDispatch, useSelector } from "react-redux";
+import Tippy from "@tippyjs/react";
+import useContextMenu from "../../../common/hook/useContextMenu";
+import ContextMenu from "../../../common/component/ContextMenu";
 // import { useDebounce} from "rooks";
+import { useReadMessageMutation } from "../../../app/services/message";
+
 import StyledLink from "./styled";
 import { toggleChannelSetting } from "../../../app/slices/ui";
 import ChannelIcon from "../../../common/component/ChannelIcon";
 import { getUnreadCount } from "../utils";
 
-const NavItem = ({ id, setFiles, contextMenuEventHandler }) => {
+const NavItem = ({ id, setFiles, toggleRemoveConfirm }) => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
-  // const getUnreadCountDebounced=useDebounce(getUnreadCount,300)
+  const [updateReadIndex] = useReadMessageMutation();
+
+  const {
+    visible: contextMenuVisible,
+    offset,
+    handleContextMenuEvent,
+    hideContextMenu,
+  } = useContextMenu();
   const { channel, mids, messageData, readIndex, loginUid } = useSelector(
     (store) => {
       return {
@@ -45,32 +57,76 @@ const NavItem = ({ id, setFiles, contextMenuEventHandler }) => {
       isActive: monitor.canDrop() && monitor.isOver(),
     }),
   }));
+  const handleReadAll = () => {
+    const lastMid = mids[mids.length - 1];
+    console.log("last mid", mids, lastMid);
+    if (lastMid) {
+      const param = { groups: [{ gid: id, mid: lastMid }] };
+      updateReadIndex(param);
+    }
+  };
   const { is_public, name } = channel;
   const unreads = getUnreadCount({ mids, messageData, readIndex, loginUid });
   return (
-    <StyledLink
-      data-cid={id}
-      onContextMenu={(evt) => {
-        contextMenuEventHandler(evt, id);
-      }}
-      ref={drop}
+    <Tippy
+      interactive
+      placement="right-start"
+      offset={[offset.y, offset.x]}
+      visible={contextMenuVisible}
+      onClickOutside={hideContextMenu}
       key={id}
-      className={`link ${isActive ? "drop_over" : ""}`}
-      to={`/chat/channel/${id}`}
+      content={
+        <ContextMenu
+          hideMenu={hideContextMenu}
+          items={[
+            {
+              title: "Mark As Read",
+              underline: true,
+              handler: handleReadAll,
+            },
+            {
+              title: "Mute",
+            },
+            {
+              title: "Notification Settings",
+              underline: true,
+            },
+            is_public
+              ? null
+              : {
+                  title: "Invite People",
+                },
+            {
+              title: "Delete Channel",
+              danger: true,
+              handler: toggleRemoveConfirm.bind(null, id),
+            },
+          ]}
+        />
+      }
     >
-      <div className="name" title={name}>
-        <ChannelIcon personal={!is_public} />
-        <span className={`txt ${unreads == 0 ? "read" : ""}`}>{name}</span>
-      </div>
-      <div className="icons">
-        <i className="setting" onClick={handleChannelSetting}></i>
-        {unreads > 0 && (
-          <i className={`badge ${unreads > 99 ? "dot" : ""}`}>
-            {unreads > 99 ? null : unreads}
-          </i>
-        )}
-      </div>
-    </StyledLink>
+      <StyledLink
+        data-cid={id}
+        onContextMenu={handleContextMenuEvent}
+        ref={drop}
+        key={id}
+        className={`link ${isActive ? "drop_over" : ""}`}
+        to={`/chat/channel/${id}`}
+      >
+        <div className="name" title={name}>
+          <ChannelIcon personal={!is_public} />
+          <span className={`txt ${unreads == 0 ? "read" : ""}`}>{name}</span>
+        </div>
+        <div className="icons">
+          <i className="setting" onClick={handleChannelSetting}></i>
+          {unreads > 0 && (
+            <i className={`badge ${unreads > 99 ? "dot" : ""}`}>
+              {unreads > 99 ? null : unreads}
+            </i>
+          )}
+        </div>
+      </StyledLink>
+    </Tippy>
   );
 };
 

src/routes/chat/ChannelList/index.js

@@ -1,76 +1,33 @@
 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) => {
+  const { channelIds } = 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 setRemoveChannel = (cid = undefined) => {
+    setCurrId(cid);
   };
-  const toggleRemoveConfirm = () => {
-    setRemoveConfirmVisible((prev) => !prev);
-  };
-  const { is_public } = channelData[currId] || {};
+
   return (
     <>
       {channelIds.map((cid) => {
         return (
           <NavItem
-            contextMenuEventHandler={handleContextMenuClick}
             key={cid}
+            toggleRemoveConfirm={setRemoveChannel}
             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} />
+      {typeof currId !== "undefined" && (
+        <DeleteConfirmModal id={currId} closeModal={setRemoveChannel} />
       )}
     </>
   );