From 125c50321718b36a7bf3efa6dd8b22e0737fb9fe Mon Sep 17 00:00:00 2001 From: moonrailgun Date: Wed, 2 Nov 2022 16:31:06 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E7=BE=A4=E7=BB=84?= =?UTF-8?q?=E6=89=80=E6=9C=89=E6=B6=88=E6=81=AF=E5=B7=B2=E8=AF=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../shared/i18n/langs/en-US/translation.json | 1 + .../shared/i18n/langs/zh-CN/translation.json | 1 + client/shared/index.tsx | 1 + client/shared/redux/hooks/useGroupAck.ts | 31 ++++++++++ client/shared/utils/panel-helper.ts | 16 +++++ .../web/src/routes/Main/Navbar/GroupNav.tsx | 58 +++++++++++++++---- client/web/src/routes/Main/Navbar/NavItem.tsx | 2 +- 7 files changed, 99 insertions(+), 11 deletions(-) create mode 100644 client/shared/redux/hooks/useGroupAck.ts create mode 100644 client/shared/utils/panel-helper.ts diff --git a/client/shared/i18n/langs/en-US/translation.json b/client/shared/i18n/langs/en-US/translation.json index 9cc4be19..8e20ba33 100644 --- a/client/shared/i18n/langs/en-US/translation.json +++ b/client/shared/i18n/langs/en-US/translation.json @@ -120,6 +120,7 @@ "k6c29eece": "Allows members to send message in text channels", "k6c75d61f": "Modify group avatar success", "k6cc401b0": "No role groups are currently selected", + "k6e4e3d7a": "All messages in this group are marked as read", "k6eac768d": "Add Members", "k6ee71a71": "Global Configuration", "k6efe275c": "Mark as read", diff --git a/client/shared/i18n/langs/zh-CN/translation.json b/client/shared/i18n/langs/zh-CN/translation.json index b2e2dc49..4d72dd2f 100644 --- a/client/shared/i18n/langs/zh-CN/translation.json +++ b/client/shared/i18n/langs/zh-CN/translation.json @@ -120,6 +120,7 @@ "k6c29eece": "允许成员在文字频道发送消息", "k6c75d61f": "修改群组头像成功", "k6cc401b0": "当前没有选择任何角色组", + "k6e4e3d7a": "已标记该群组所有消息已读", "k6eac768d": "添加角色", "k6ee71a71": "全局配置", "k6efe275c": "标记为已读", diff --git a/client/shared/index.tsx b/client/shared/index.tsx index 680faaf6..251869fb 100644 --- a/client/shared/index.tsx +++ b/client/shared/index.tsx @@ -183,6 +183,7 @@ export { useGroupUnread, useGroupTextPanelUnread, } from './redux/hooks/useGroup'; +export { useGroupAck } from './redux/hooks/useGroupAck'; export { useGroupMemberMute } from './redux/hooks/useGroupMemberMute'; export { useGroupMemberAllPermissions, diff --git a/client/shared/redux/hooks/useGroupAck.ts b/client/shared/redux/hooks/useGroupAck.ts new file mode 100644 index 00000000..62981f4c --- /dev/null +++ b/client/shared/redux/hooks/useGroupAck.ts @@ -0,0 +1,31 @@ +import { useMemoizedFn } from '../../hooks/useMemoizedFn'; +import { updateAck } from '../../model/converse'; +import { isConversePanel } from '../../utils/panel-helper'; +import { chatActions } from '../slices'; +import { useAppDispatch, useAppSelector } from './useAppSelector'; +import { useGroupInfo } from './useGroup'; + +/** + * 群组级别的已读管理 + */ +export function useGroupAck(groupId: string) { + const groupInfo = useGroupInfo(groupId); + const lastMessageMap = useAppSelector((state) => state.chat.lastMessageMap); + const dispatch = useAppDispatch(); + + const markGroupAllAck = useMemoizedFn(() => { + const conversePanels = (groupInfo?.panels ?? []).filter(isConversePanel); + + for (const converse of conversePanels) { + const converseId = converse.id; + const lastMessageId = lastMessageMap[converseId]; + + if (converseId && lastMessageId) { + dispatch(chatActions.setConverseAck({ converseId, lastMessageId })); + updateAck(converseId, lastMessageId); + } + } + }); + + return { markGroupAllAck }; +} diff --git a/client/shared/utils/panel-helper.ts b/client/shared/utils/panel-helper.ts new file mode 100644 index 00000000..f8787232 --- /dev/null +++ b/client/shared/utils/panel-helper.ts @@ -0,0 +1,16 @@ +import { GroupPanel, GroupPanelType } from '../model/group'; + +/** + * 判断面板是否为会话面板 + * + * 会话面板的属性是带有已读未读属性的(如默认的文本面板) + */ +export function isConversePanel(panel: GroupPanel) { + // 目前只有文本面板 + + if (panel.type === GroupPanelType.TEXT) { + return true; + } + + return false; +} diff --git a/client/web/src/routes/Main/Navbar/GroupNav.tsx b/client/web/src/routes/Main/Navbar/GroupNav.tsx index 80211bd9..6baee05d 100644 --- a/client/web/src/routes/Main/Navbar/GroupNav.tsx +++ b/client/web/src/routes/Main/Navbar/GroupNav.tsx @@ -2,21 +2,59 @@ import { Avatar, Icon } from 'tailchat-design'; import { openModal } from '@/components/Modal'; import { ModalCreateGroup } from '@/components/modals/CreateGroup'; import React, { useCallback, useMemo } from 'react'; -import { GroupInfo, t, useAppSelector, useGroupUnread } from 'tailchat-shared'; +import { + GroupInfo, + showSuccessToasts, + t, + useAppSelector, + useGroupAck, + useGroupUnread, +} from 'tailchat-shared'; import { NavbarNavItem } from './NavItem'; +import { Dropdown, Menu } from 'antd'; +/** + * 群组导航栏栏项 + */ const GroupNavItem: React.FC<{ group: GroupInfo }> = React.memo(({ group }) => { - const hasUnread = useGroupUnread(group._id); + const groupId = group._id; + const hasUnread = useGroupUnread(groupId); + const { markGroupAllAck } = useGroupAck(groupId); + + const menu = ( + , + onClick: () => { + markGroupAllAck(); + showSuccessToasts(t('已标记该群组所有消息已读')); + }, + }, + ]} + /> + ); return ( - - - + +
+ + + +
+ ); }); GroupNavItem.displayName = 'GroupNavItem'; diff --git a/client/web/src/routes/Main/Navbar/NavItem.tsx b/client/web/src/routes/Main/Navbar/NavItem.tsx index a3071006..b2f37ac2 100644 --- a/client/web/src/routes/Main/Navbar/NavItem.tsx +++ b/client/web/src/routes/Main/Navbar/NavItem.tsx @@ -47,7 +47,7 @@ export const NavbarNavItem: React.FC< } return ( -
+
{showPill && (