git.iko.soy/bridge
on c262e73 help sign in
bridge/src/views/Invite.js
87 lines 2.5 kB history raw
1import React from 'react';
2import * as need from 'lib/need';
3import { Grid, H5, Text } from 'indigo-react';
5import { usePointCursor } from 'store/pointCursor';
6import { useHistory } from 'store/history';
8import View from 'components/View';
9import Crumbs from 'components/Crumbs';
10import Highlighted from 'components/Highlighted';
11import { matchBlinky } from 'components/Blinky';
13import useInvites from 'lib/useInvites';
14import { useSyncOwnedPoints } from 'lib/useSyncPoints';
15import useCurrentPointName from 'lib/useCurrentPointName';
16import useRouter from 'lib/useRouter';
17import { LocalRouterProvider } from 'lib/LocalRouter';
19import InviteUrl from './Invite/InviteUrl';
20import InviteEmail from './Invite/InviteEmail';
22const NAMES = {
23 URL: 'URL',
24 EMAIL: 'EMAIL',
25};
27const VIEWS = {
28 URL: InviteUrl,
29 EMAIL: InviteEmail,
30};
32export default function Invite() {
33 const history = useHistory();
34 const { Route, ...router } = useRouter({
35 names: NAMES,
36 views: VIEWS,
37 initialRoutes: [{ key: NAMES.URL }],
38 });
39 const { pointCursor } = usePointCursor();
40 const point = need.point(pointCursor);
41 const name = useCurrentPointName();
43 // sync the current point
44 useSyncOwnedPoints([point]);
46 // get the invites for the current point
47 const { availableInvites, sentInvites, acceptedInvites } = useInvites(point);
49 // number or loading character
50 const availableInvitesText = matchBlinky(availableInvites);
51 const sentInvitesText = matchBlinky(sentInvites);
52 const acceptedInvitesText = matchBlinky(acceptedInvites);
54 return (
55 <LocalRouterProvider value={router}>
56 <View>
57 <Grid className="mb4">
58 <Grid.Item
59 as={Crumbs}
60 routes={[
61 {
62 text: name,
63 action: () => history.pop(),
64 },
65 {
66 text: 'Invite',
67 },
68 ]}
69 full
70 />
71 <Grid.Item as={H5} className="mv4" full>
72 Invite
73 </Grid.Item>
74 <Grid.Item as={Text} className="f5" full>
75 You currently have{' '}
76 <Highlighted>{availableInvitesText} invitations</Highlighted> left.
77 <br />
78 Out of the <Highlighted>{sentInvitesText}</Highlighted> invites you
79 sent, <Highlighted>{acceptedInvitesText}</Highlighted> have been
80 accepted.
81 </Grid.Item>
82 </Grid>
83 <Route />
84 </View>
85 </LocalRouterProvider>
86 );