refactor: 创建群组与PortalHost

shared/index.tsx

@@ -54,7 +54,7 @@ export {
   denyFriendRequest,
 } from './model/friend';
 export type { FriendRequest } from './model/friend';
-export { GroupPanelType } from './model/group';
+export { GroupPanelType, createGroup } from './model/group';
 export type { GroupPanel, GroupInfo } from './model/group';
 export type { ChatMessage } from './model/message';
 export type { UserBaseInfo, UserLoginInfo } from './model/user';

shared/model/group.ts

@@ -1,6 +1,9 @@
+import { request } from '../api/request';
+
 export enum GroupPanelType {
   TEXT = 0,
   GROUP = 1,
+  PLUGIN = 2,
 }
 
 export interface GroupMember {
@@ -23,3 +26,20 @@ export interface GroupInfo {
   members: GroupMember[];
   panels: GroupPanel[];
 }
+
+/**
+ * 创建群组
+ * @param name 群组名
+ * @param panels 初始面板
+ */
+export async function createGroup(
+  name: string,
+  panels: GroupPanel[]
+): Promise<GroupInfo> {
+  const { data } = await request.post('/api/group/createGroup', {
+    name,
+    panels,
+  });
+
+  return data;
+}

web/src/App.tsx

@@ -3,7 +3,6 @@ import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';
 import { TcProvider, useStorage } from 'tailchat-shared';
 import clsx from 'clsx';
 import { Loadable } from './components/Loadable';
-import { PortalHost } from './components/Portal';
 
 const MainRoute = Loadable(() =>
   import('./routes/Main').then((module) => module.MainRoute)
@@ -16,9 +15,7 @@ const EntryRoute = Loadable(() =>
 const AppProvider: React.FC = React.memo((props) => {
   return (
     <BrowserRouter>
-      <TcProvider>
-        <PortalHost>{props.children}</PortalHost>
-      </TcProvider>
+      <TcProvider>{props.children}</TcProvider>
     </BrowserRouter>
   );
 });

web/src/components/modals/CreateGroup.tsx

@@ -1,10 +1,16 @@
 import { Button, Divider, Input, Typography } from 'antd';
 import React, { useCallback, useRef, useState } from 'react';
-import { GroupPanelType } from 'tailchat-shared';
+import {
+  createGroup,
+  GroupPanelType,
+  useAppDispatch,
+  useAsyncRequest,
+} from 'tailchat-shared';
 import type { GroupPanel } from 'tailchat-shared';
 import { Avatar } from '../Avatar';
-import { ModalWrapper } from '../Modal';
+import { closeModal, ModalWrapper } from '../Modal';
 import { Slides, SlidesRef } from '../Slides';
+import { groupActions } from '../../../../shared/redux/slices';
 
 const panelTemplate: {
   key: string;
@@ -68,6 +74,7 @@ export const ModalCreateGroup: React.FC = React.memo(() => {
   const slidesRef = useRef<SlidesRef>(null);
   const [panels, setPanels] = useState<GroupPanel[]>([]);
   const [name, setName] = useState('');
+  const dispatch = useAppDispatch();
 
   const handleSelectTemplate = useCallback((panels: GroupPanel[]) => {
     setPanels(panels);
@@ -78,8 +85,12 @@ export const ModalCreateGroup: React.FC = React.memo(() => {
     slidesRef.current?.prev();
   }, []);
 
-  const handleCreate = useCallback(() => {
-    console.log({ name, panels });
+  const [{ loading }, handleCreate] = useAsyncRequest(async () => {
+    const data = await createGroup(name, panels);
+
+    dispatch(groupActions.appendGroups([data]));
+
+    closeModal();
   }, [name, panels]);
 
   return (
@@ -142,7 +153,7 @@ export const ModalCreateGroup: React.FC = React.memo(() => {
             >
               返回
             </Button>
-            <Button type="primary" onClick={handleCreate}>
+            <Button type="primary" loading={loading} onClick={handleCreate}>
               确认创建
             </Button>
           </div>

web/src/routes/Main/Provider.tsx

@@ -14,6 +14,7 @@ import { loginWithToken } from 'tailchat-shared/model/user';
 import { getUserJWT } from '../../utils/jwt-helper';
 import { useHistory } from 'react-router';
 import { SidebarContextProvider } from './SidebarContext';
+import { PortalHost } from '@/components/Portal';
 
 /**
  * 应用状态管理hooks
@@ -79,7 +80,9 @@ export const MainProvider: React.FC = React.memo((props) => {
 
   return (
     <ReduxProvider store={store}>
-      <SidebarContextProvider>{props.children}</SidebarContextProvider>
+      <PortalHost>
+        <SidebarContextProvider>{props.children}</SidebarContextProvider>
+      </PortalHost>
     </ReduxProvider>
   );
 });