From 517c8950f6895823c3964d9ea82c3d0b427fd23f Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Fri, 23 Jul 2021 11:49:29 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=88=9B=E5=BB=BA=E7=BE=A4?=
 =?UTF-8?q?=E7=BB=84=E4=B8=8EPortalHost?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 shared/index.tsx                          |  2 +-
 shared/model/group.ts                     | 20 ++++++++++++++++++++
 web/src/App.tsx                           |  5 +----
 web/src/components/modals/CreateGroup.tsx | 21 ++++++++++++++++-----
 web/src/routes/Main/Provider.tsx          |  5 ++++-
 5 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/shared/index.tsx b/shared/index.tsx
index e87eca67..ba8103c9 100644
--- a/shared/index.tsx
+++ b/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';
diff --git a/shared/model/group.ts b/shared/model/group.ts
index be2514fc..d9a2240e 100644
--- a/shared/model/group.ts
+++ b/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;
+}
diff --git a/web/src/App.tsx b/web/src/App.tsx
index fbbaefac..ba357c33 100644
--- a/web/src/App.tsx
+++ b/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>
   );
 });
diff --git a/web/src/components/modals/CreateGroup.tsx b/web/src/components/modals/CreateGroup.tsx
index 1c6523ce..c329b363 100644
--- a/web/src/components/modals/CreateGroup.tsx
+++ b/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>
diff --git a/web/src/routes/Main/Provider.tsx b/web/src/routes/Main/Provider.tsx
index 7b84bfc7..47ec5783 100644
--- a/web/src/routes/Main/Provider.tsx
+++ b/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>
   );
 });