on master help sign in
hinder users from exiting while invite in progress
commit3bc084170251958faed093c677a8e7b4cc338fc8 authorLiam Fitzgerald <liam@urizen.co> dateThu 9 Jan 2020, 13:21 (7 years ago) parentc833a0a
4 files changed+44−10
src/lib/useBlockWindowClose.js+16 src/views/Invite/Email.js+5−1 src/views/Invite/Inviter.js+16−2 src/views/Invite/Url.js+7−7
src/lib/useBlockWindowClose.js+16
@@ -15,3 +15,19 @@ export default function useBlockWindowClose() {
1515 };
1616 });
1717}
18+
19+export function useConditionalBlockWindowClose(condition) {
20+ return useEffect(() => {
21+ if (condition) {
22+ window.addEventListener('beforeunload', onBeforeUnload);
23+ } else {
24+ window.removeEventListener('beforeunload', onBeforeUnload);
25+ }
26+
27+ return function cleanup() {
28+ if (condition) {
29+ window.removeEventListener('beforeunload', onBeforeUnload);
30+ }
31+ };
32+ });
33+}
src/views/Invite/Email.js+5−1
@@ -34,7 +34,7 @@ const STATUS = {
3434 FAILURE: 'FAILURE',
3535};
3636
37−const InviteMail = () => {
37+const InviteMail = ({ setSubmitting }) => {
3838 const { progress, txStatus, needFunds, generateInvites } = useInviter();
3939
4040 const { sendMail, getHasReceived } = useMailer();
@@ -75,17 +75,21 @@ const InviteMail = () => {
7575 const emailCount = values.emails.length;
7676 setCount(emailCount);
7777 setStatus(STATUS.SENDING);
78+ setSubmitting(true);
7879 const { errors, invites } = await generateInvites(emailCount);
7980 if (errors) {
8081 setStatus(STATUS.FAILED);
82+ setSubmitting(false);
8183 return errors;
8284 }
8385 const mailErrors = await sendInvites(values.emails, invites);
8486 if (mailErrors) {
8587 console.log(mailErrors);
8688 setStatus(STATUS.FAILED);
89+ setSubmitting(false);
8790 return mailErrors;
8891 }
92+ setSubmitting(false);
8993 setStatus(STATUS.SUCCESS);
9094 },
9195 [generateInvites, setCount, setStatus, sendInvites]
src/views/Invite/Inviter.js+16−2
@@ -1,6 +1,8 @@
1−import React, { useState } from 'react';
1+import React, { useState, useCallback } from 'react';
22import { Grid } from 'indigo-react';
33
4+import { useConditionalBlockWindowClose } from 'lib/useBlockWindowClose';
5+
46import Tabs from 'components/Tabs';
57
68import InviteMail from 'views/Invite/Email';
@@ -8,6 +10,17 @@ import InviteUrl from 'views/Invite/Url';
810
911const Inviter = () => {
1012 const [tab, setTab] = useState(NAMES.MAIL);
13+ const [submitting, setSubmitting] = useState(false);
14+
15+ useConditionalBlockWindowClose(submitting);
16+ const onTabChange = useCallback(
17+ newTab => {
18+ if (!submitting) {
19+ setTab(newTab);
20+ }
21+ },
22+ [submitting, setTab]
23+ );
1124 return (
1225 <Grid.Item
1326 full
@@ -17,7 +30,8 @@ const Inviter = () => {
1730 views={VIEWS}
1831 options={OPTIONS}
1932 currentTab={tab}
20− onTabChange={setTab}
33+ onTabChange={onTabChange}
34+ setSubmitting={setSubmitting}
2135 />
2236 );
2337};
src/views/Invite/Url.js+7−7
@@ -19,12 +19,13 @@ const STATUS = {
1919 FAILURE: 'FAILURE',
2020};
2121
22−const InviteUrl = () => {
22+const InviteUrl = ({ setSubmitting }) => {
2323 const { txStatus, needFunds, invites, generateInvites } = useInviter();
2424
2525 const [error, setError] = useState();
2626
2727 const generateInvite = useCallback(async () => {
28+ setSubmitting(true);
2829 const { errors } = await generateInvites(1);
2930 if (hasErrors(errors)) {
3031 setError(errors);
@@ -92,12 +93,11 @@ const InviteUrl = () => {
9293 )}
9394 {invites.length === 0 && renderGenerateButton()}
9495 {needFunds && <Grid.Item full as={NeedFundsNotice} {...needFunds} />}
95− {error[FORM_ERROR] ||
96− (error[WARNING] && (
97− <Grid.Item as={ErrorText}>
98− {error[FORM_ERROR] || error[WARNING]}
99− </Grid.Item>
100− ))}
96+ {error && (
97+ <Grid.Item as={ErrorText}>
98+ {error[FORM_ERROR] || error[WARNING]}
99+ </Grid.Item>
100+ )}
101101 </Grid.Item>
102102 );
103103};