From d709f53c47b7e3f86db854e167892462d1a279d5 Mon Sep 17 00:00:00 2001 From: Anik Ghosh Date: Wed, 16 Mar 2022 20:13:18 +0530 Subject: [PATCH] updates --- .../src/components/InviteMembersModal.tsx | 94 +++++++++++++------ dashboard/src/graphql/mutation/index.ts | 8 ++ dashboard/src/pages/Users.tsx | 5 +- 3 files changed, 78 insertions(+), 29 deletions(-) diff --git a/dashboard/src/components/InviteMembersModal.tsx b/dashboard/src/components/InviteMembersModal.tsx index ed5b98f..d267875 100644 --- a/dashboard/src/components/InviteMembersModal.tsx +++ b/dashboard/src/components/InviteMembersModal.tsx @@ -28,7 +28,7 @@ import { FaUserPlus, FaMinusCircle, FaPlus, FaUpload } from 'react-icons/fa'; import { useDropzone } from 'react-dropzone'; import { escape } from 'lodash'; import { validateEmail, validateURI } from '../utils'; -import { UpdateUser } from '../graphql/mutation'; +import { InviteMembers } from '../graphql/mutation'; import { ArrayInputOperations, csvDemoData } from '../constants'; import parseCSV from '../utils/parseCSV'; @@ -37,22 +37,33 @@ interface stateDataTypes { isInvalid: boolean; } -const InviteMembersModal = ({ disabled = true }: { disabled: boolean }) => { +interface requestParamTypes { + emails: string[]; + redirect_uri?: string; +} + +const initData: stateDataTypes = { + value: '', + isInvalid: false, +}; + +const InviteMembersModal = ({ + updateUserList, + disabled = true, +}: { + updateUserList: Function; + disabled: boolean; +}) => { const client = useClient(); const toast = useToast(); const { isOpen, onOpen, onClose } = useDisclosure(); const [tabIndex, setTabIndex] = useState(0); const [redirectURI, setRedirectURI] = useState({ - value: '', - isInvalid: false, + ...initData, }); - const [emails, setEmails] = useState([ - { - value: '', - isInvalid: false, - }, - ]); + const [emails, setEmails] = useState([{ ...initData }]); const [disableSendButton, setDisableSendButton] = useState(false); + const [loading, setLoading] = React.useState(false); useEffect(() => { if (redirectURI.isInvalid) { setDisableSendButton(true); @@ -64,31 +75,58 @@ const InviteMembersModal = ({ disabled = true }: { disabled: boolean }) => { }, [redirectURI, emails]); useEffect(() => { return () => { - setRedirectURI({ - value: '', - isInvalid: false, - }); - setEmails([ - { - value: '', - isInvalid: false, - }, - ]); + setRedirectURI({ ...initData }); + setEmails([{ ...initData }]); }; }, []); const sendInviteHandler = async () => { + setLoading(true); + try { + const emailList = emails + .filter((emailData) => !emailData.isInvalid) + .map((emailData) => emailData.value); + const params: requestParamTypes = { + emails: emailList, + }; + if (redirectURI.value !== '' && !redirectURI.isInvalid) { + params.redirect_uri = redirectURI.value; + } + if (emailList.length > 1) { + const res = await client + .mutation(InviteMembers, { + params, + }) + .toPromise(); + if (res.error) { + throw new Error('Internal server error'); + return; + } + toast({ + title: 'Invites sent successfully!', + isClosable: true, + status: 'success', + position: 'bottom-right', + }); + setLoading(false); + updateUserList(); + } else { + throw new Error('Please add emails'); + } + } catch (error: any) { + toast({ + title: error?.message || 'Error occurred, try again!', + isClosable: true, + status: 'error', + position: 'bottom-right', + }); + setLoading(false); + } closeModalHandler(); }; const updateEmailListHandler = (operation: string, index: number = 0) => { switch (operation) { case ArrayInputOperations.APPEND: - setEmails([ - ...emails, - { - value: '', - isInvalid: false, - }, - ]); + setEmails([...emails, { ...initData }]); break; case ArrayInputOperations.REMOVE: const updatedEmailList = [...emails]; @@ -318,7 +356,7 @@ const InviteMembersModal = ({ disabled = true }: { disabled: boolean }) => { colorScheme="blue" variant="solid" onClick={sendInviteHandler} - isDisabled={disableSendButton} + isDisabled={disableSendButton || loading} >
Send diff --git a/dashboard/src/graphql/mutation/index.ts b/dashboard/src/graphql/mutation/index.ts index 9736a01..df5db93 100644 --- a/dashboard/src/graphql/mutation/index.ts +++ b/dashboard/src/graphql/mutation/index.ts @@ -45,3 +45,11 @@ export const DeleteUser = ` } } `; + +export const InviteMembers = ` + mutation inviteMembers($params: InviteMemberInput!) { + _invite_members(params: $params) { + message + } + } +`; diff --git a/dashboard/src/pages/Users.tsx b/dashboard/src/pages/Users.tsx index 7e542d1..a9d1d05 100644 --- a/dashboard/src/pages/Users.tsx +++ b/dashboard/src/pages/Users.tsx @@ -190,7 +190,10 @@ export default function Users() { Users - + {!loading ? ( userList.length > 0 ? (