git.iko.soy/bridge
on 4b0ca21 help sign in
bridge/src/views/Invite/Url.js
108 lines 3.0 kB history raw
1import React, { useCallback, useState } from 'react';
2import { Grid, ErrorText, Flex } from 'indigo-react';
3import { get } from 'lodash';
4import { FORM_ERROR } from 'final-form';
6import useCopiable from 'lib/useCopiable';
7import useInviter from 'lib/useInviter';
9import ProgressButton from 'components/ProgressButton';
10import { ForwardButton } from 'components/Buttons';
11import NeedFundsNotice from 'components/NeedFundsNotice';
13import { hasErrors } from 'form/validators';
14import { WARNING } from 'form/helpers';
15const STATUS = {
16 INPUT: 'INPUT',
17 SENDING: 'SENDING',
18 SUCCESS: 'SUCCESS',
19 FAILURE: 'FAILURE',
20};
22const InviteUrl = ({ setSubmitting }) => {
23 const { txStatus, needFunds, invites, generateInvites } = useInviter();
25 const [error, setError] = useState();
27 const generateInvite = useCallback(async () => {
28 setSubmitting(true);
29 const { errors } = await generateInvites(1);
30 if (hasErrors(errors)) {
31 setError(errors);
32 }
33 setSubmitting(false);
34 }, [generateInvites, setSubmitting]);
36 const renderGenerateButton = useCallback(() => {
37 if (error) {
38 return (
39 <Grid.Item full className="mt4 p3 bg-red3 white f5">
40 Error generating invite
41 </Grid.Item>
42 );
43 }
44 switch (txStatus) {
45 case STATUS.INPUT:
46 return (
47 <Grid.Item
48 solid
49 full
50 className="mt4"
51 as={ForwardButton}
52 onClick={() => generateInvite()}>
53 Generate Invite URL
54 </Grid.Item>
55 );
56 case STATUS.SENDING:
57 return (
58 <Grid.Item
59 full
60 as={ProgressButton}
61 className="mt4"
62 solid
63 disabled
64 success
65 progress={0.5}>
66 Generating Invite URL
67 </Grid.Item>
68 );
69 default:
70 return null;
71 }
72 }, [txStatus, error, generateInvite]);
74 const url = `https://bridge.urbit.org/#${get(invites, '[0].ticket', '').slice(
75 1
76 )}`;
78 const [doCopy, didCopy] = useCopiable(url);
80 return (
81 <Grid.Item full as={Grid} gap={3}>
82 {invites.length > 0 && (
83 <Grid.Item as={Flex} full col>
84 <Flex.Item full className="b-gray3 b1 mt4 mb1 p1 flex flex-center">
85 <div className="flex1 ml1 f6">{url}</div>
86 <Flex.Item
87 className="p2 bg-black white pointer-hover f6"
88 onClick={() => doCopy()}>
89 {didCopy ? 'Copied' : 'Copy'}
90 </Flex.Item>
91 </Flex.Item>
92 <Flex.Item full className="f6 mb4 gray5">
93 Your invite link expires after consumption.
94 </Flex.Item>
95 </Grid.Item>
96 )}
97 {invites.length === 0 && renderGenerateButton()}
98 {needFunds && <Grid.Item full as={NeedFundsNotice} {...needFunds} />}
99 {error && (
100 <Grid.Item as={ErrorText}>
101 {error[FORM_ERROR] || error[WARNING]}
102 </Grid.Item>
103 )}
104 </Grid.Item>
105 );
106};
108export default InviteUrl;