diff --git a/web/app/components/header/account-setting/members-page/invite-modal/index.tsx b/web/app/components/header/account-setting/members-page/invite-modal/index.tsx index 264665805d..a432b8a4f0 100644 --- a/web/app/components/header/account-setting/members-page/invite-modal/index.tsx +++ b/web/app/components/header/account-setting/members-page/invite-modal/index.tsx @@ -17,8 +17,9 @@ import type { InvitationResult } from '@/models/common' import I18n from '@/context/i18n' import 'react-multi-email/dist/style.css' import { noop } from 'lodash-es' - import { useProviderContextSelector } from '@/context/provider-context' +import { useBoolean } from 'ahooks' + type IInviteModalProps = { isEmailSetup: boolean onCancel: () => void @@ -49,9 +50,15 @@ const InviteModal = ({ const { locale } = useContext(I18n) const [role, setRole] = useState('normal') + const [isSubmitting, { + setTrue: setIsSubmitting, + setFalse: setIsSubmitted, + }] = useBoolean(false) + const handleSend = useCallback(async () => { - if (isLimitExceeded) + if (isLimitExceeded || isSubmitting) return + setIsSubmitting() if (emails.map((email: string) => emailRegex.test(email)).every(Boolean)) { try { const { result, invitation_results } = await inviteMember({ @@ -70,7 +77,8 @@ const InviteModal = ({ else { notify({ type: 'error', message: t('common.members.emailInvalid') }) } - }, [isLimitExceeded, emails, role, locale, onCancel, onSend, notify, t]) + setIsSubmitted() + }, [isLimitExceeded, emails, role, locale, onCancel, onSend, notify, t, isSubmitting]) return (
@@ -133,7 +141,7 @@ const InviteModal = ({ tabIndex={0} className='w-full' onClick={handleSend} - disabled={!emails.length || isLimitExceeded} + disabled={!emails.length || isLimitExceeded || isSubmitting} variant='primary' > {t('common.members.sendInvite')}