feat: 退出群组

shared/index.tsx

@@ -64,6 +64,7 @@ export {
   createGroup,
   createGroupInviteCode,
   getGroupBasicInfo,
+  quitGroup,
   applyGroupInvite,
   modifyGroupField,
   createGroupPanel,
@@ -85,7 +86,11 @@ export {
 export { useAppSelector, useAppDispatch } from './redux/hooks/useAppSelector';
 export { useDMConverseList } from './redux/hooks/useConverse';
 export { useConverseMessage } from './redux/hooks/useConverseMessage';
-export { useGroupInfo, useGroupPanel } from './redux/hooks/useGroup';
+export {
+  useGroupInfo,
+  useGroupPanel,
+  useIsGroupOwner,
+} from './redux/hooks/useGroup';
 export { useUserInfo, useUserId } from './redux/hooks/useUserInfo';
 export { userActions } from './redux/slices';
 export type { ChatConverseState } from './redux/slices/chat';

shared/model/group.ts

@@ -98,6 +98,17 @@ export async function modifyGroupField(
   });
 }
 
+/**
+ * 退出群组(群组拥有者是解散群组)
+ * 这里必须是一个socket请求因为后端需要进行房间的退出操作
+ * @param groupId 群组ID
+ */
+export async function quitGroup(groupId: string) {
+  await request.post('/api/group/quitGroup', {
+    groupId,
+  });
+}
+
 /**
  * 创建群组邀请码
  * 邀请码默认 7天有效期

shared/redux/hooks/useGroup.ts

@@ -1,6 +1,8 @@
 import { useMemo } from 'react';
 import type { GroupInfo, GroupPanel } from '../../model/group';
+import { isValidStr } from '../../utils/string-helper';
 import { useAppSelector } from './useAppSelector';
+import { useUserId } from './useUserInfo';
 
 /**
  * 获取群组信息
@@ -23,3 +25,19 @@ export function useGroupPanel(
     [groupInfo, panelId]
   );
 }
+
+/**
+ * 检查是否为群组的所有者
+ * @param userId 群组id 必填
+ * @param userId 用户id 不传则为当前用户id
+ */
+export function useIsGroupOwner(groupId: string, userId?: string): boolean {
+  const groupInfo = useGroupInfo(groupId);
+  const selfUserId = useUserId();
+
+  if (isValidStr(userId)) {
+    return groupInfo?.owner === userId;
+  } else {
+    return typeof selfUserId === 'string' && groupInfo?.owner === selfUserId;
+  }
+}

shared/redux/setup.ts

@@ -81,4 +81,8 @@ function listenNotify(socket: AppSocket, store: AppStore) {
   socket.listen<GroupInfo>('group.updateInfo', (groupInfo) => {
     store.dispatch(groupActions.updateGroup(groupInfo));
   });
+
+  socket.listen<{ groupId: string }>('group.remove', ({ groupId }) => {
+    store.dispatch(groupActions.removeGroup(groupId));
+  });
 }

shared/redux/slices/group.ts

@@ -26,10 +26,18 @@ const groupSlice = createSlice({
     updateGroup(state, action: PayloadAction<GroupInfo>) {
       const group = action.payload;
       const groupId = group._id;
-      state.groups[groupId] = {
-        ...state.groups[groupId],
-        ...group,
-      };
+
+      if (state.groups[groupId]) {
+        // NOTICE: updateGroup 只会去更新，不会去添加新的
+        state.groups[groupId] = {
+          ...state.groups[groupId],
+          ...group,
+        };
+      }
+    },
+    removeGroup(state, action: PayloadAction<string>) {
+      const groupId = action.payload;
+      delete state.groups[groupId];
     },
   },
 });

web/src/routes/Main/Content/Group/GroupHeader.tsx

@@ -14,7 +14,7 @@ export const GroupHeader: React.FC<GroupHeaderProps> = React.memo((props) => {
   const groupInfo = useGroupInfo(groupId);
   const { t } = useTranslation();
 
-  const { handleShowGroupDetail, handleInviteUser } =
+  const { isOwner, handleShowGroupDetail, handleInviteUser, handleQuitGroup } =
     useGroupHeaderAction(groupId);
 
   if (_isNil(groupInfo)) {
@@ -23,11 +23,20 @@ export const GroupHeader: React.FC<GroupHeaderProps> = React.memo((props) => {
 
   const menu = (
     <Menu>
-      <Menu.Item key="0" onClick={handleShowGroupDetail}>
-        {t('查看详情')}
-      </Menu.Item>
-      <Menu.Item key="1" onClick={handleInviteUser}>
-        {t('邀请用户')}
+      {isOwner && (
+        <Menu.Item key="0" onClick={handleShowGroupDetail}>
+          {t('查看详情')}
+        </Menu.Item>
+      )}
+
+      {isOwner && (
+        <Menu.Item key="1" onClick={handleInviteUser}>
+          {t('邀请用户')}
+        </Menu.Item>
+      )}
+
+      <Menu.Item key="2" danger={true} onClick={handleQuitGroup}>
+        {t('退出群组')}
       </Menu.Item>
     </Menu>
   );

web/src/routes/Main/Content/Group/useGroupHeaderAction.tsx

@@ -3,11 +3,16 @@ import { GroupDetail } from '@/components/modals/GroupDetail';
 import { GroupInvite } from '@/components/modals/GroupInvite';
 import React from 'react';
 import { useCallback } from 'react';
+import { useHistory } from 'react-router';
+import { quitGroup, showAlert, t, useIsGroupOwner } from 'tailchat-shared';
 
 /**
  * 群组 Header 的操作 hooks
  */
 export function useGroupHeaderAction(groupId: string) {
+  const isOwner = useIsGroupOwner(groupId);
+  const history = useHistory();
+
   const handleShowGroupDetail = useCallback(() => {
     const key = openModal(
       <GroupDetail
@@ -23,5 +28,17 @@ export function useGroupHeaderAction(groupId: string) {
     openModal(<GroupInvite groupId={groupId} />);
   }, [groupId]);
 
-  return { handleShowGroupDetail, handleInviteUser };
+  const handleQuitGroup = useCallback(() => {
+    showAlert({
+      message: isOwner
+        ? t('您是群组管理者，退出群组会导致解散群组')
+        : t('确定要退出群组么?'),
+      async onConfirm() {
+        await quitGroup(groupId);
+        history.replace('/main'); // 返回到主页
+      },
+    });
+  }, [groupId, isOwner]);
+
+  return { isOwner, handleShowGroupDetail, handleInviteUser, handleQuitGroup };
 }