feat: markdown auto format

src/routes/chat/DMList/NavItem.js

@@ -0,0 +1,111 @@
+// import React from 'react'
+import { NavLink, useNavigate } from "react-router-dom";
+import { useDrop } from "react-dnd";
+import { useSelector, useDispatch } from "react-redux";
+import { NativeTypes } from "react-dnd-html5-backend";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import Tippy from "@tippyjs/react";
+import { useReadMessageMutation } from "../../../app/services/message";
+import { removeUserSession } from "../../../app/slices/message.user";
+
+import useContextMenu from "../../../common/hook/useContextMenu";
+import ContextMenu from "../../../common/component/ContextMenu";
+dayjs.extend(relativeTime);
+import { renderPreviewMessage } from "../utils";
+import Contact from "../../../common/component/Contact";
+const NavItem = ({ uid, mid, unreads, setFiles }) => {
+  const dispatch = useDispatch();
+  const [updateReadIndex] = useReadMessageMutation();
+  const { currMsg, currUser } = useSelector((store) => {
+    return {
+      currUser: store.contacts.byId[uid],
+      currMsg: store.message[mid],
+    };
+  });
+  const navigate = useNavigate();
+  const {
+    visible: contextMenuVisible,
+    offset,
+    handleContextMenuEvent,
+    hideContextMenu,
+  } = useContextMenu();
+  const [{ isActive }, drop] = useDrop(() => ({
+    accept: [NativeTypes.FILE],
+    drop({ dataTransfer }) {
+      if (dataTransfer.files.length) {
+        // console.log(files, rest);
+        setFiles([...dataTransfer.files]);
+        navigate(`/chat/dm/${uid}`);
+        // 重置
+        setTimeout(() => {
+          setFiles([]);
+        }, 300);
+      }
+    },
+    collect: (monitor) => ({
+      isActive: monitor.canDrop() && monitor.isOver(),
+    }),
+  }));
+  const handleReadAll = () => {
+    const param = { users: [{ uid, mid }] };
+    updateReadIndex(param);
+  };
+  const handleRemoveSession = () => {
+    dispatch(removeUserSession(uid));
+  };
+  if (!currUser || !currMsg) return null;
+  return (
+    <Tippy
+      interactive
+      placement="right-start"
+      offset={[offset.y, offset.x]}
+      visible={contextMenuVisible}
+      onClickOutside={hideContextMenu}
+      key={uid}
+      content={
+        <ContextMenu
+          hideMenu={hideContextMenu}
+          items={[
+            {
+              title: "Mark As Read",
+              handler: handleReadAll,
+            },
+            {
+              title: "Hide Session",
+              danger: true,
+              handler: handleRemoveSession,
+            },
+          ]}
+        />
+      }
+    >
+      <NavLink
+        ref={drop}
+        key={uid}
+        className={`session ${isActive ? "drop_over" : ""}`}
+        to={`/chat/dm/${uid}`}
+        onContextMenu={handleContextMenuEvent}
+      >
+        <Contact compact interactive={false} className="avatar" uid={uid} />
+        <div className="details">
+          <div className="up">
+            <span className="name">{currUser.name}</span>
+            {currMsg && <time>{dayjs(currMsg.created_at).fromNow()}</time>}
+          </div>
+
+          <div className="down">
+            {renderPreviewMessage(currMsg)}
+            {unreads > 0 && (
+              <i className={`badge ${unreads > 99 ? "dot" : ""}`}>
+                {unreads > 99 ? null : unreads}
+              </i>
+            )}
+          </div>
+        </div>
+      </NavLink>
+    </Tippy>
+  );
+};
+
+export default NavItem;

src/routes/chat/DMList/index.js

@@ -0,0 +1,41 @@
+// import React from "react";
+import { useSelector } from "react-redux";
+
+import { getUnreadCount } from "../utils";
+
+import NavItem from "./NavItem";
+export default function DMList({ uids, setDropFiles }) {
+  const { userMessage, messageData, readUsers, loginUid } = useSelector(
+    (store) => {
+      return {
+        loginUid: store.authData.uid,
+        readUsers: store.footprint.readUsers,
+        contactData: store.contacts.byId,
+        userMessage: store.userMessage.byId,
+        messageData: store.message,
+      };
+    }
+  );
+  const sessions = uids.map((uid) => {
+    const mids = userMessage[uid];
+    const lastMid = [...mids].pop();
+    const readIndex = readUsers[uid];
+    const unreads = getUnreadCount({ mids, readIndex, messageData, loginUid });
+
+    return { lastMid, unreads, uid };
+  });
+
+  return sessions
+    .sort((s1, s2) => s2.lastMid - s1.lastMid)
+    .map(({ lastMid, uid, unreads }) => {
+      return (
+        <NavItem
+          key={uid}
+          uid={uid}
+          mid={lastMid}
+          unreads={unreads}
+          setFiles={setDropFiles}
+        />
+      );
+    });
+}