@@ -1,8 +1,9 @@
1−import React, { useCallback } from 'react';
1+import React from 'react';
22import * as need from 'lib/need';
3−import { Grid, H5, Text, Button } from 'indigo-react';
3+import { Grid, H5, Text } from 'indigo-react';
44
55import { usePointCursor } from 'store/pointCursor';
6+import { useHistory } from 'store/history';
67// import { usePointCache } from 'store/pointCache';
78
89import View from 'components/View';
@@ -11,12 +12,12 @@ import Crumbs from 'components/Crumbs';
1112import useInvites from 'lib/useInvites';
1213import useSyncPoint from 'lib/useSyncPoint';
1314import useCurrentPointName from 'lib/useCurrentPointName';
14−
15−import { useHistory } from 'store/history';
16−import { ForwardButton } from 'components/Buttons';
17−import FooterButton from 'components/FooterButton';
1815import useRouter from 'lib/useRouter';
19−import InvitesSend from './InvitesSend';
16+import loadingCharacter from 'lib/loadingCharacter';
17+
18+import InviteUrl from './Invite/InviteUrl';
19+import InviteEmail from './Invite/InviteEmail';
20+import Highlighted from 'components/Highlighted';
2021
2122const kInviteNames = {
2223 URL: 'URL',
@@ -25,49 +26,9 @@ const kInviteNames = {
2526
2627const kInviteViews = {
2728 URL: InviteUrl,
28− EMAIL: InvitesSend,
29+ EMAIL: InviteEmail,
2930};
3031
31−const valOrLoading = val =>
32− val.matchWith({
33− Nothing: () => '▓',
34− Just: p => p.value,
35− });
36−
37−function Highlighted(props) {
38− return <span className="red3" {...props} />;
39−}
40−
41−function InviteUrl({ names, push }) {
42− const pushEmail = useCallback(() => push(names.EMAIL), [push, names]);
43−
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− );
69−}
70−
7132export default function Invite() {
7233 const history = useHistory();
7334 const { Route, ...routeProps } = useRouter({
@@ -84,9 +45,9 @@ export default function Invite() {
8445
8546 // fetch the invites for the current cursor
8647 const { availableInvites, sentInvites, acceptedInvites } = useInvites(point);
87− const availableInvitesText = valOrLoading(availableInvites);
88− const sentInvitesText = valOrLoading(sentInvites);
89− const acceptedInvitesText = valOrLoading(acceptedInvites);
48+ const availableInvitesText = loadingCharacter(availableInvites);
49+ const sentInvitesText = loadingCharacter(sentInvites);
50+ const acceptedInvitesText = loadingCharacter(acceptedInvites);
9051
9152 return (
9253 <View>