feat: markdown auto format
This commit is contained in:
zerosoul
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -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} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,99 +0,0 @@
|
||||
// import React from "react";
|
||||
import { NavLink, useNavigate } from "react-router-dom";
|
||||
import dayjs from "dayjs";
|
||||
import relativeTime from "dayjs/plugin/relativeTime";
|
||||
import { useDrop } from "react-dnd";
|
||||
import { NativeTypes } from "react-dnd-html5-backend";
|
||||
import { useSelector } from "react-redux";
|
||||
import { renderPreviewMessage, getUnreadCount } from "./utils";
|
||||
import Contact from "../../common/component/Contact";
|
||||
dayjs.extend(relativeTime);
|
||||
const NavItem = ({ uid, mid, unreads, setFiles }) => {
|
||||
const { currMsg, currUser } = useSelector((store) => {
|
||||
return {
|
||||
currUser: store.contacts.byId[uid],
|
||||
currMsg: store.message[mid],
|
||||
};
|
||||
});
|
||||
const navigate = useNavigate();
|
||||
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(),
|
||||
}),
|
||||
}));
|
||||
if (!currUser || !currMsg) return null;
|
||||
return (
|
||||
<NavLink
|
||||
ref={drop}
|
||||
key={uid}
|
||||
className={`session ${isActive ? "drop_over" : ""}`}
|
||||
to={`/chat/dm/${uid}`}
|
||||
>
|
||||
<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>
|
||||
);
|
||||
};
|
||||
// mids: ChannelMsgData[channel_id],
|
||||
// messageData,
|
||||
// readIndex: readChannels[channel_id],
|
||||
// loginUid,
|
||||
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.map(({ lastMid, uid, unreads }) => {
|
||||
return (
|
||||
<NavItem
|
||||
key={uid}
|
||||
uid={uid}
|
||||
mid={lastMid}
|
||||
unreads={unreads}
|
||||
setFiles={setDropFiles}
|
||||
/>
|
||||
);
|
||||
});
|
||||
}
|
||||
@@ -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;
|
||||
@@ -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}
|
||||
/>
|
||||
);
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user