refactor: 创建多人会话

shared/model/converse.ts

@@ -12,10 +12,10 @@ export interface ChatConverseInfo {
  * 如果已创建则返回之前的
  */
 export async function createDMConverse(
-  targetId: string
+  memberIds: string[]
 ): Promise<ChatConverseInfo> {
   const { data } = await request.post('/api/chat/converse/createDMConverse', {
-    targetId,
+    memberIds,
   });
 
   return data;

web/src/components/modals/CreateDMConverse.tsx

@@ -1,8 +1,9 @@
 import { Button } from 'antd';
 import React, { useState } from 'react';
-import { t } from 'tailchat-shared';
+import { useHistory } from 'react-router';
+import { createDMConverse, t, useAsyncFn } from 'tailchat-shared';
 import { FriendPicker } from '../FriendPicker';
-import { ModalWrapper } from '../Modal';
+import { closeModal, ModalWrapper } from '../Modal';
 
 interface CreateDMCOnverseProps {
   /**
@@ -11,10 +12,17 @@ interface CreateDMCOnverseProps {
    */
   withoutUserIds?: string[];
 }
-export const CreateDMCOnverse: React.FC<CreateDMCOnverseProps> = React.memo(
+export const CreateDMConverse: React.FC<CreateDMCOnverseProps> = React.memo(
   (props) => {
     const { withoutUserIds = [] } = props;
     const [selectedFriendIds, setSelectedFriendIds] = useState<string[]>([]);
+    const history = useHistory();
+
+    const [{ loading }, handleCreate] = useAsyncFn(async () => {
+      const converse = await createDMConverse([...selectedFriendIds]);
+      closeModal();
+      history.push(`/main/personal/converse/${converse._id}`);
+    }, [selectedFriendIds]);
 
     return (
       <ModalWrapper title={t('创建多人会话')}>
@@ -25,10 +33,12 @@ export const CreateDMCOnverse: React.FC<CreateDMCOnverseProps> = React.memo(
         />
 
         <div className="text-right">
-          <Button type="primary">{t('创建')}</Button>
+          <Button type="primary" loading={loading} onClick={handleCreate}>
+            {t('创建')}
+          </Button>
         </div>
       </ModalWrapper>
     );
   }
 );
-CreateDMCOnverse.displayName = 'CreateDMCOnverse';
+CreateDMConverse.displayName = 'CreateDMConverse';

web/src/components/modals/SettingsView/System.tsx

@@ -1,4 +1,3 @@
-import DevContainer from '@/components/DevContainer';
 import { FullModalField } from '@/components/FullModal/Field';
 import { Select } from 'antd';
 import React, { useCallback } from 'react';

web/src/routes/Main/Content/Personal/Friends/FriendList.tsx

@@ -26,7 +26,7 @@ export const FriendList: React.FC = React.memo(() => {
 
   const [, handleCreateConverse] = useAsyncRequest(
     async (targetId: string) => {
-      const converse = await createDMConverse(targetId);
+      const converse = await createDMConverse([targetId]);
       history.push(`/main/personal/converse/${converse._id}`);
     },
     [history]

web/src/routes/Main/Content/Personal/Sidebar.tsx

@@ -4,7 +4,7 @@ import { SidebarItem } from '../SidebarItem';
 import { t, useDMConverseList } from 'tailchat-shared';
 import { SidebarDMItem } from './SidebarDMItem';
 import { openModal } from '@/components/Modal';
-import { CreateDMCOnverse } from '@/components/modals/CreateDMConverse';
+import { CreateDMConverse } from '@/components/modals/CreateDMConverse';
 import DevContainer from '@/components/DevContainer';
 
 const SidebarSection: React.FC<{
@@ -47,7 +47,7 @@ export const PersonalSidebar: React.FC = React.memo(() => {
           <DevContainer>
             <Icon
               icon="mdi:plus"
-              onClick={() => openModal(<CreateDMCOnverse />)}
+              onClick={() => openModal(<CreateDMConverse />)}
             />
           </DevContainer>
         }