mirror of https://github.com/msgbyte/tailchat
feat: 增加创建群组永久邀请码的功能
moonrailgun
3 years ago
parent
05ae07282f
commit
faaeadd8a1
@ -0,0 +1,34 @@
|
|||||||
|
import { Tooltip } from 'antd';
|
||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
datetimeFromNow,
|
||||||
|
formatFullTime,
|
||||||
|
GroupInvite,
|
||||||
|
t,
|
||||||
|
Trans,
|
||||||
|
} from 'tailchat-shared';
|
||||||
|
|
||||||
|
interface InviteCodeExpiredAtProps {
|
||||||
|
invite: Pick<GroupInvite, 'expiredAt'>;
|
||||||
|
}
|
||||||
|
export const InviteCodeExpiredAt: React.FC<InviteCodeExpiredAtProps> =
|
||||||
|
React.memo((props) => {
|
||||||
|
const { invite } = props;
|
||||||
|
|
||||||
|
if (!invite.expiredAt) {
|
||||||
|
return t('该邀请码永不过期');
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Trans>
|
||||||
|
该邀请将于{' '}
|
||||||
|
<Tooltip title={formatFullTime(invite.expiredAt)}>
|
||||||
|
<span className="font-bold">
|
||||||
|
{{ date: datetimeFromNow(invite.expiredAt) }}
|
||||||
|
</span>{' '}
|
||||||
|
</Tooltip>
|
||||||
|
过期
|
||||||
|
</Trans>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
InviteCodeExpiredAt.displayName = 'InviteCodeExpiredAt';
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
.createInviteBtn {
|
||||||
|
display: flex;
|
||||||
|
:global {
|
||||||
|
.ant-btn:not(.ant-dropdown-trigger) {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,75 @@
|
|||||||
|
import { InviteCodeExpiredAt } from '@/components/InviteCodeExpiredAt';
|
||||||
|
import { Menu, Typography, Dropdown } from 'antd';
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import {
|
||||||
|
useAsyncRequest,
|
||||||
|
createGroupInviteCode,
|
||||||
|
t,
|
||||||
|
GroupInvite,
|
||||||
|
} from 'tailchat-shared';
|
||||||
|
import styles from './CreateInviteCode.module.less';
|
||||||
|
|
||||||
|
enum InviteCodeType {
|
||||||
|
Normal = 'normal',
|
||||||
|
Permanent = 'permanent',
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CreateInviteCodeProps {
|
||||||
|
groupId: string;
|
||||||
|
onInviteCreated?: () => void;
|
||||||
|
}
|
||||||
|
export const CreateInviteCode: React.FC<CreateInviteCodeProps> = React.memo(
|
||||||
|
({ groupId, onInviteCreated }) => {
|
||||||
|
const [createdInvite, setCreateInvite] = useState<GroupInvite | null>(null);
|
||||||
|
const [{ loading }, handleCreateInviteLink] = useAsyncRequest(
|
||||||
|
async (inviteType: InviteCodeType) => {
|
||||||
|
const invite = await createGroupInviteCode(groupId, inviteType);
|
||||||
|
setCreateInvite(invite);
|
||||||
|
onInviteCreated?.();
|
||||||
|
},
|
||||||
|
[groupId, onInviteCreated]
|
||||||
|
);
|
||||||
|
|
||||||
|
const menu = (
|
||||||
|
<Menu>
|
||||||
|
<Menu.Item
|
||||||
|
onClick={() => handleCreateInviteLink(InviteCodeType.Permanent)}
|
||||||
|
>
|
||||||
|
{t('创建永久邀请码')}
|
||||||
|
</Menu.Item>
|
||||||
|
</Menu>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{createdInvite ? (
|
||||||
|
<div>
|
||||||
|
<Typography.Title
|
||||||
|
className="bg-white bg-opacity-30 dark:bg-black dark:bg-opacity-30 px-2 py-1 select-text text-lg rounded border border-black border-opacity-20"
|
||||||
|
level={4}
|
||||||
|
copyable={true}
|
||||||
|
>
|
||||||
|
{`${location.origin}/invite/${createdInvite.code}`}
|
||||||
|
</Typography.Title>
|
||||||
|
<p className="text-gray-500 text-sm">
|
||||||
|
<InviteCodeExpiredAt invite={createdInvite} />
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<Dropdown.Button
|
||||||
|
className={styles.createInviteBtn}
|
||||||
|
size="large"
|
||||||
|
type="primary"
|
||||||
|
loading={loading}
|
||||||
|
onClick={() => handleCreateInviteLink(InviteCodeType.Normal)}
|
||||||
|
overlay={menu}
|
||||||
|
trigger={['click']}
|
||||||
|
>
|
||||||
|
{t('创建链接')}
|
||||||
|
</Dropdown.Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
CreateInviteCode.displayName = 'CreateInviteCode';
|
||||||
@ -0,0 +1,60 @@
|
|||||||
|
import { Icon } from '@/components/Icon';
|
||||||
|
import React from 'react';
|
||||||
|
import { useGroupInfo, t } from 'tailchat-shared';
|
||||||
|
import { ModalWrapper } from '../../Modal';
|
||||||
|
import { CreateInviteCode } from './CreateInviteCode';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 群组邀请
|
||||||
|
*/
|
||||||
|
|
||||||
|
interface CreateGroupInviteProps {
|
||||||
|
groupId: string;
|
||||||
|
onInviteCreated?: () => void;
|
||||||
|
}
|
||||||
|
export const CreateGroupInvite: React.FC<CreateGroupInviteProps> = React.memo(
|
||||||
|
(props) => {
|
||||||
|
const groupId = props.groupId;
|
||||||
|
const groupInfo = useGroupInfo(groupId);
|
||||||
|
// const [searchName, setSearchName] = useState('');
|
||||||
|
|
||||||
|
// const handleSearch = useCallback(() => {
|
||||||
|
// console.log('searchName', searchName);
|
||||||
|
// }, []);
|
||||||
|
|
||||||
|
if (!groupInfo) {
|
||||||
|
return <div>{t('异常')}</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">
|
||||||
|
{t('创建链接并发送给外部好友')}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<CreateInviteCode
|
||||||
|
groupId={groupId}
|
||||||
|
onInviteCreated={props.onInviteCreated}
|
||||||
|
/>
|
||||||
|
</ModalWrapper>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
CreateGroupInvite.displayName = 'GroupInvite';
|
||||||
@ -1,92 +0,0 @@
|
|||||||
import { Icon } from '@/components/Icon';
|
|
||||||
import { Button, Typography } from 'antd';
|
|
||||||
import React, { useState } from 'react';
|
|
||||||
import {
|
|
||||||
createGroupInviteCode,
|
|
||||||
useAsyncRequest,
|
|
||||||
useGroupInfo,
|
|
||||||
isValidStr,
|
|
||||||
t,
|
|
||||||
} from 'tailchat-shared';
|
|
||||||
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>{t('异常')}</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">
|
|
||||||
{t('创建链接并发送给外部好友')}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
{isValidStr(inviteLink) ? (
|
|
||||||
<div>
|
|
||||||
<Typography.Title
|
|
||||||
className="bg-white bg-opacity-30 dark:bg-black dark: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>
|
|
||||||
{/* TODO: 显示过期天数 */}
|
|
||||||
<p className="text-gray-500 text-sm">
|
|
||||||
{t('该邀请链接将会于7天后过期')}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<Button
|
|
||||||
block={true}
|
|
||||||
size="large"
|
|
||||||
type="primary"
|
|
||||||
loading={loading}
|
|
||||||
onClick={handleCreateInviteLink}
|
|
||||||
>
|
|
||||||
{t('创建链接')}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</ModalWrapper>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
GroupInvite.displayName = 'GroupInvite';
|
|
||||||
Loading…
Reference in New Issue