git.iko.soy/bridge
on 6542dce help sign in
bridge/src/views/Invite.js
123 lines 3.3 kB history raw
1import React, { useCallback } from 'react';
2import * as need from 'lib/need';
3import { Grid, H5, Text, Button } from 'indigo-react';
5import { usePointCursor } from 'store/pointCursor';
6// import { usePointCache } from 'store/pointCache';
8import View from 'components/View';
9import Crumbs from 'components/Crumbs';
11import useInvites from 'lib/useInvites';
12import useSyncPoint from 'lib/useSyncPoint';
13import useCurrentPointName from 'lib/useCurrentPointName';
15import { useHistory } from 'store/history';
16import { ForwardButton } from 'components/Buttons';
17import FooterButton from 'components/FooterButton';
18import useRouter from 'lib/useRouter';
19import InvitesSend from './InvitesSend';
21const kInviteNames = {
22 URL: 'URL',
23 EMAIL: 'EMAIL',
24};
26const kInviteViews = {
27 URL: InviteUrl,
28 EMAIL: InvitesSend,
29};
31const valOrLoading = val =>
32 val.matchWith({
33 Nothing: () => '▓',
34 Just: p => p.value,
35 });
37function Highlighted(props) {
38 return <span className="red3" {...props} />;
41function InviteUrl({ names, push }) {
42 const pushEmail = useCallback(() => push(names.EMAIL), [push, names]);
44 return (
45 <>
46 <Grid className="mt3">
47 <Grid.Divider />
48 <Grid.Item
49 as={Button}
50 detail="Generate a URL to send to one guest"
51 full
52 disabled>
53 Generate Invite
54 </Grid.Item>
55 <Grid.Divider />
56 <Grid.Item
57 as={ForwardButton}
58 onClick={pushEmail}
59 detail="Send invitation to your guest's email"
60 full>
61 Send Invite via Email
62 </Grid.Item>
63 </Grid>
64 <FooterButton detail="i.e. Ethereum Address, Text File" disabled>
65 Advanced
66 </FooterButton>
67 </>
68 );
71export default function Invite() {
72 const history = useHistory();
73 const { Route, ...routeProps } = useRouter({
74 names: kInviteNames,
75 views: kInviteViews,
76 initialRoutes: [{ key: kInviteNames.URL }],
77 });
78 const { pointCursor } = usePointCursor();
79 const point = need.pointCursor(pointCursor);
80 const name = useCurrentPointName();
82 // sync the current cursor
83 useSyncPoint(point);
85 // fetch the invites for the current cursor
86 const { availableInvites, sentInvites, acceptedInvites } = useInvites(point);
87 const availableInvitesText = valOrLoading(availableInvites);
88 const sentInvitesText = valOrLoading(sentInvites);
89 const acceptedInvitesText = valOrLoading(acceptedInvites);
91 return (
92 <View>
93 <Grid className="mb3">
94 <Grid.Item
95 as={Crumbs}
96 routes={[
97 {
98 text: name,
99 action: () => history.pop(),
100 },
101 {
102 text: 'Invite',
103 },
104 ]}
105 full
106 />
107 <Grid.Item as={H5} className="mv4" full>
108 Invite
109 </Grid.Item>
110 <Grid.Item as={Text} full>
111 You currently have{' '}
112 <Highlighted>{availableInvitesText} invitations</Highlighted> left.
113 <br />
114 Out of the <Highlighted>{sentInvitesText}</Highlighted> invites you
115 sent, <Highlighted>{acceptedInvitesText}</Highlighted> have been
116 accepted.
117 </Grid.Item>
118 </Grid>
119 {/* TODO(shrugs): use context isntead of this routeProps nonsense */}
120 <Route {...routeProps} />
121 </View>
122 );