@@ -1,6 +1,7 @@
1−import React, { useCallback } from 'react';
1+import React, { useCallback, useState } from 'react';
2+import cn from 'classnames';
2import { Just } from 'folktale/maybe';
3import { Just } from 'folktale/maybe';
3−import { Grid } from 'indigo-react';
4+import { Grid, Flex, Button } from 'indigo-react';
4import { azimuth } from 'azimuth-js';
5import { azimuth } from 'azimuth-js';
6import { usePointCursor } from 'store/pointCursor';
7import { usePointCursor } from 'store/pointCursor';
@@ -11,8 +12,11 @@ import Greeting from 'components/Greeting';
11import Passport from 'components/Passport';
12import Passport from 'components/Passport';
12import { ForwardButton, BootUrbitOSButton } from 'components/Buttons';
13import { ForwardButton, BootUrbitOSButton } from 'components/Buttons';
13import CopyButton from 'components/CopyButton';
14import CopyButton from 'components/CopyButton';
14−import { matchBlinky } from 'components/Blinky';
15+import Blinky, { matchBlinky } from 'components/Blinky';
15import DownloadSigilButton from 'components/DownloadSigilButton';
16import DownloadSigilButton from 'components/DownloadSigilButton';
17+import BarGraph from 'components/BarGraph';
18+import Chip from 'components/Chip';
19+import InviteSigilList from 'components/InviteSigilList';
17import * as need from 'lib/need';
21import * as need from 'lib/need';
18import useInvites from 'lib/useInvites';
22import useInvites from 'lib/useInvites';
@@ -21,6 +25,8 @@ import useCurrentPermissions from 'lib/useCurrentPermissions';
21import { useLocalRouter } from 'lib/LocalRouter';
25import { useLocalRouter } from 'lib/LocalRouter';
22import useKeyfileGenerator from 'lib/useKeyfileGenerator';
26import useKeyfileGenerator from 'lib/useKeyfileGenerator';
28+import Inviter from 'views/Invite/Inviter';
24export default function Point() {
30export default function Point() {
25 const { pop, push, names } = useLocalRouter();
31 const { pop, push, names } = useLocalRouter();
26 const { pointCursor } = usePointCursor();
32 const { pointCursor } = usePointCursor();
@@ -39,7 +45,28 @@ export default function Point() {
39 } = useCurrentPermissions();
45 } = useCurrentPermissions();
41 // fetch the invites for the current cursor
47 // fetch the invites for the current cursor
48+ const invites = useInvites(point);
42− const { availableInvites } = useInvites(point);
50+ availableInvites,
57+ const showInvites = !(
58+ acceptedInvites.getOrElse(0) === 0 && sentInvites.getOrElse(0) === 0
61+ const hasInvites = showInvites || availableInvites.getOrElse(0) !== 0;
63+ const _totalInvites =
64+ sentInvites.getOrElse(0) + availableInvites.getOrElse(0);
65+ const _pendingInvites = pendingPoints.getOrElse([]).length;
67+ const loadedInvites = Just.hasInstance(availableInvites);
69+ // availableInvites.getOrElse(0) === 0
44 const goAdmin = useCallback(() => push(names.ADMIN), [push, names]);
71 const goAdmin = useCallback(() => push(names.ADMIN), [push, names]);
@@ -47,6 +74,8 @@ export default function Point() {
48 const goInvite = useCallback(() => push(names.INVITE), [push, names]);
75 const goInvite = useCallback(() => push(names.INVITE), [push, names]);
77+ const goCohort = useCallback(() => push(names.INVITE_COHORT), [push, names]);
50 const goPartiesSetPoolSize = useCallback(
79 const goPartiesSetPoolSize = useCallback(
51 () => push(names.PARTY_SET_POOL_SIZE),
80 () => push(names.PARTY_SET_POOL_SIZE),
52 [push, names]
81 [push, names]
@@ -57,40 +86,27 @@ export default function Point() {
89+ const isPlanet = azimuth.getPointSize(point) === azimuth.PointSize.Planet;
91+ const [showInviteForm, setShowInviteForm] = useState(false);
60 const inviteButton = (() => {
93 const inviteButton = (() => {
61− switch (azimuth.getPointSize(point)) {
94+ if (azimuth.getPointSize(point) === azimuth.PointSize.Star) {
62− case azimuth.PointSize.Planet:
63− const availableInvitesText = matchBlinky(availableInvites);
69− disabled={!isActiveOwner}
71− Invite <sup>{availableInvitesText}</sup>
77− case azimuth.PointSize.Star:
80− <Grid.Item
97+ <Grid.Item
82− as={ForwardButton}
99+ as={ForwardButton}
83− disabled={!isActiveOwner}
100+ disabled={!isActiveOwner}
84− onClick={goPartiesSetPoolSize}>
101+ onClick={goPartiesSetPoolSize}>
85− Manage Invite Pools
102+ Manage Invite Pools
86− </Grid.Item>
103+ </Grid.Item>
87− <Grid.Divider />
104+ <Grid.Divider />
96 const senateButton = (() => {
112 const senateButton = (() => {
@@ -124,6 +140,81 @@ export default function Point() {
124 address={Just(address)}
140 address={Just(address)}
125 animationMode={'slide'}
141 animationMode={'slide'}
144+ {isPlanet && hasInvites && (
146+ <Grid.Item cols={[1, 11]}>
152+ className={cn('t-right underline pointer-hover', {
153+ gray4: sentInvites.getOrElse(0) === 0,
160+ <Flex align="center">
162+ {acceptedInvites.getOrElse(0)} / {_totalInvites}
164+ {_pendingInvites > 0 && (
165+ <Flex.Item as={Chip} className="bg-yellow1 yellow4">
166+ {_pendingInvites} pending
177+ available={availableInvites}
179+ accepted={acceptedInvites}
183+ as={InviteSigilList}
184+ pendingPoints={pendingPoints}
185+ acceptedPoints={acceptedPoints}
191+ <Grid.Item full className="b-gray4 b-dotted b1 self-center">
192+ <div className="p4 pv8 t-center gray4">
193+ Start your invite group by adding members
198+ {!showInviteForm && availableInvites.getOrElse(0) > 0 && (
204+ onClick={() => setShowInviteForm(true)}>
208+ {showInviteForm && <Inviter />}
209+ <Grid.Item full className="mb2" />
212+ {!loadedInvites && isPlanet && (
213+ <Grid.Item className="mv2" full>
214+ Invite Group <Blinky />
127 <Grid className="pt2">
218 <Grid className="pt2">
128 {inviteButton}
219 {inviteButton}
129 <Grid.Item
220 <Grid.Item