mirror of https://github.com/msgbyte/tailchat
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
2.4 KiB
TypeScript
89 lines
2.4 KiB
TypeScript
import { Icon } from '@iconify/react';
|
|
import { Button, Typography } from 'antd';
|
|
import React, { useState } from 'react';
|
|
import {
|
|
createGroupInviteCode,
|
|
useAsyncRequest,
|
|
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] = useAsyncRequest(async () => {
|
|
const invite = await createGroupInviteCode(groupId);
|
|
setInviteLink(`${location.origin}/invite/${invite.code}`);
|
|
}, [groupId]);
|
|
|
|
if (!groupInfo) {
|
|
return <div>异常</div>;
|
|
}
|
|
|
|
return (
|
|
<ModalWrapper>
|
|
{/* <div>邀请好友加入群组 {groupInfo.name}</div>
|
|
|
|
<div>
|
|
<Input.Search
|
|
value={searchName}
|
|
onChange={(e) => setSearchName(e.target.value)}
|
|
onSearch={handleSearch}
|
|
/>
|
|
</div>
|
|
|
|
<Divider>或者创建链接并发送给外部好友</Divider> */}
|
|
|
|
<Icon
|
|
className="text-6xl block m-auto opacity-30 mb-4 mt-2"
|
|
icon="mdi:email-edit-outline"
|
|
/>
|
|
|
|
<div className="text-gray-400 font-bold text-lg mb-2">
|
|
创建链接并发送给外部好友
|
|
</div>
|
|
|
|
<div>
|
|
{isValidStr(inviteLink) ? (
|
|
<div>
|
|
<Typography.Title
|
|
className="bg-black bg-opacity-30 px-2 py-1 select-text text-lg rounded border border-black border-opacity-20"
|
|
level={4}
|
|
copyable={true}
|
|
>
|
|
{inviteLink}
|
|
</Typography.Title>
|
|
<p className="text-gray-500 text-sm">该邀请链接将会于7天后过期</p>
|
|
</div>
|
|
) : (
|
|
<Button
|
|
block={true}
|
|
size="large"
|
|
type="primary"
|
|
loading={loading}
|
|
onClick={handleCreateInviteLink}
|
|
>
|
|
创建链接
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</ModalWrapper>
|
|
);
|
|
});
|
|
GroupInvite.displayName = 'GroupInvite';
|