From ad98c8f50c4a90f0ff88172c56007b8a19b30b42 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Fri, 30 Jul 2021 15:14:03 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=BE=A4=E7=BB=84=E9=82=80?=
 =?UTF-8?q?=E8=AF=B7=E9=93=BE=E6=8E=A5modal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 shared/index.tsx                          |  6 +-
 shared/model/group.ts                     | 21 +++++++
 web/src/components/modals/GroupInvite.tsx | 68 +++++++++++++++++++++++
 3 files changed, 94 insertions(+), 1 deletion(-)
 create mode 100644 web/src/components/modals/GroupInvite.tsx

diff --git a/shared/index.tsx b/shared/index.tsx
index 571fd836..a46e6309 100644
--- a/shared/index.tsx
+++ b/shared/index.tsx
@@ -55,7 +55,11 @@ export {
   denyFriendRequest,
 } from './model/friend';
 export type { FriendRequest } from './model/friend';
-export { GroupPanelType, createGroup } from './model/group';
+export {
+  GroupPanelType,
+  createGroup,
+  createGroupInviteCode,
+} 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 d9a2240e..15818066 100644
--- a/shared/model/group.ts
+++ b/shared/model/group.ts
@@ -27,6 +27,12 @@ export interface GroupInfo {
   panels: GroupPanel[];
 }
 
+export interface GroupInvite {
+  code: string;
+  groupId: string;
+  expiredAt?: Date;
+}
+
 /**
  * 创建群组
  * @param name 群组名
@@ -43,3 +49,18 @@ export async function createGroup(
 
   return data;
 }
+
+/**
+ * 创建群组邀请码
+ * 邀请码默认 7天有效期
+ * @param groupId 群组id
+ */
+export async function createGroupInviteCode(
+  groupId: string
+): Promise<GroupInvite> {
+  const { data } = await request.post('/api/group/invite/createGroupInvite', {
+    groupId,
+  });
+
+  return data;
+}
diff --git a/web/src/components/modals/GroupInvite.tsx b/web/src/components/modals/GroupInvite.tsx
new file mode 100644
index 00000000..20c1bb83
--- /dev/null
+++ b/web/src/components/modals/GroupInvite.tsx
@@ -0,0 +1,68 @@
+import { Button, Divider, Input, Typography } from 'antd';
+import React, { useCallback, useState } from 'react';
+import {
+  createGroupInviteCode,
+  useAsyncFn,
+  useGroupInfo,
+} from 'tailchat-shared';
+import { isValidStr } from '../../../../shared/utils/string-helper';
+import { ModalWrapper } from '../Modal';
+
+/**
+ * 群组邀请
+ */
+
+interface GroupInviteProps {
+  groupId: string;
+}
+export const GroupInvite: React.FC<GroupInviteProps> = React.memo((props) => {
+  const groupId = props.groupId;
+  const groupInfo = useGroupInfo(groupId);
+  // const [searchName, setSearchName] = useState('');
+  const [inviteLink, setInviteLink] = useState('');
+
+  // const handleSearch = useCallback(() => {
+  //   console.log('searchName', searchName);
+  // }, []);
+
+  const [{ loading }, handleCreateInviteLink] = useAsyncFn(async () => {
+    console.log('handleCreateInviteLink');
+    const invite = await createGroupInviteCode(groupId);
+    setInviteLink(`${location.origin}/invite/${invite.code}`);
+  }, [groupId]);
+
+  if (!groupInfo) {
+    return <div>异常</div>;
+  }
+
+  return (
+    <ModalWrapper style={{ width: '440px' }}>
+      {/* <div>邀请好友加入群组 {groupInfo.name}</div>
+
+      <div>
+        <Input.Search
+          value={searchName}
+          onChange={(e) => setSearchName(e.target.value)}
+          onSearch={handleSearch}
+        />
+      </div>
+
+      <Divider>或者创建链接并发送给外部好友</Divider> */}
+
+      <div>创建链接并发送给外部好友</div>
+
+      <div>
+        {isValidStr(inviteLink) ? (
+          <Typography.Text copyable={true} className="select-text">
+            {inviteLink}
+          </Typography.Text>
+        ) : (
+          <Button loading={loading} onClick={handleCreateInviteLink}>
+            创建链接
+          </Button>
+        )}
+      </div>
+    </ModalWrapper>
+  );
+});
+GroupInvite.displayName = 'GroupInvite';