git.iko.soy/bridge
on 4e06b3a help sign in
bridge/src/views/Invite/Url.js
105 lines 2.9 kB history raw
1import React, { useCallback, useState } from 'react';
2import { Grid, ErrorText } 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 }, [generateInvites]);
35 const renderGenerateButton = useCallback(() => {
36 if (error) {
37 return (
38 <Grid.Item full className="mt4 p3 bg-red3 white f5">
39 Error generating invite
40 </Grid.Item>
41 );
42 }
43 switch (txStatus) {
44 case STATUS.INPUT:
45 return (
46 <Grid.Item
47 solid
48 full
49 className="mt4"
50 as={ForwardButton}
51 onClick={() => generateInvite()}>
52 Generate Invite URL
53 </Grid.Item>
54 );
55 case STATUS.SENDING:
56 return (
57 <Grid.Item
58 full
59 as={ProgressButton}
60 className="mt4"
61 solid
62 disabled
63 success
64 progress={0.5}>
65 Generating Invite URL
66 </Grid.Item>
67 );
68 default:
69 return null;
70 }
71 }, [txStatus, error, generateInvite]);
73 const url = `https://bridge.urbit.org/#${get(invites, '[0].ticket', '')}`;
75 const [doCopy, didCopy] = useCopiable(url);
77 return (
78 <Grid.Item full as={Grid}>
79 {invites.length > 0 && (
80 <>
81 <Grid.Item full className="b-gray3 b1 mv4 p1 flex flex-center">
82 <div className="flex1 ml1">{url}</div>
83 <Grid.Item
84 className="pv3 ph4 bg-black white"
85 onClick={() => doCopy()}>
86 {didCopy ? 'Copied' : 'Copy'}
87 </Grid.Item>
88 </Grid.Item>
89 <Grid.Item full>
90 Your invite link expires after consumption.
91 </Grid.Item>
92 </>
93 )}
94 {invites.length === 0 && renderGenerateButton()}
95 {needFunds && <Grid.Item full as={NeedFundsNotice} {...needFunds} />}
96 {error && (
97 <Grid.Item as={ErrorText}>
98 {error[FORM_ERROR] || error[WARNING]}
99 </Grid.Item>
100 )}
101 </Grid.Item>
102 );
103};
105export default InviteUrl;