@@ -1,5 +1,5 @@
1import React, { useMemo, useEffect, useCallback, useState } from 'react';
1import React, { useMemo, useEffect, useCallback, useState } from 'react';
2−import { Grid, Flex } from 'indigo-react';
2+import { Grid, Flex, Button } from 'indigo-react';
3import * as ob from 'urbit-ob';
3import * as ob from 'urbit-ob';
4import { Just } from 'folktale/maybe';
4import { Just } from 'folktale/maybe';
5import cn from 'classnames';
5import cn from 'classnames';
@@ -8,10 +8,11 @@ import { usePointCursor } from 'store/pointCursor';
8import { usePointCache } from 'store/pointCache';
8import { usePointCache } from 'store/pointCache';
10import View from 'components/View';
10import View from 'components/View';
11+import Tabs from 'components/Tabs';
11import BarGraph from 'components/BarGraph';
12import BarGraph from 'components/BarGraph';
12−import InviteSigilList from 'components/InviteSigilList';
13import MaybeSigil from 'components/MaybeSigil';
13import MaybeSigil from 'components/MaybeSigil';
14import { matchBlinky } from 'components/Blinky';
14import { matchBlinky } from 'components/Blinky';
15+import { ForwardButton } from 'components/Buttons';
15import Chip from 'components/Chip';
16import Chip from 'components/Chip';
16import Crumbs from 'components/Crumbs';
17import Crumbs from 'components/Crumbs';
@@ -19,12 +20,38 @@ import { useLocalRouter } from 'lib/LocalRouter';
19import useInvites from 'lib/useInvites';
20import useInvites from 'lib/useInvites';
20import * as need from 'lib/need';
21import * as need from 'lib/need';
23+import Inviter from 'views/Invite/Inviter';
22import { ReactComponent as SearchIcon } from 'assets/search.svg';
25import { ReactComponent as SearchIcon } from 'assets/search.svg';
27+function SearchInput({ className, value, onChange }) {
29+ <Flex align="center" full className={cn('b b-gray2 b1', className)}>
30+ <Flex.Item className="p2">
39+ className="b-none h7"
24−function CohortMember({ point, className }) {
45+function CohortMember({ point, pending = false, className }) {
25 const { sentInvites } = useInvites(point);
46 const { sentInvites } = useInvites(point);
26 const patp = useMemo(() => ob.patp(point), [point]);
47 const patp = useMemo(() => ob.patp(point), [point]);
27− const colors = ['#000000', '#FFFFFF'];
48+ const colors = pending ? ['#ee892b', '#FFFFFF'] : ['#000000', '#FFFFFF'];
50+ const DetailText = useCallback(
52+ pending ? 'Pending' : <> {matchBlinky(sentInvites)} points invited </>,
30 <Flex justify="between" className={cn('b1 b-gray2', className)}>
57 <Flex justify="between" className={cn('b1 b-gray2', className)}>
@@ -39,19 +66,21 @@ function CohortMember({ point, className }) {
40 className="mono f6 ph4">
67 className="mono f6 ph4">
41 <Flex.Item>{patp}</Flex.Item>
68 <Flex.Item>{patp}</Flex.Item>
42− <Flex.Item>{matchBlinky(sentInvites)} points invited</Flex.Item>
69+ <Flex.Item className="gray4">
43 </Flex.Item>
72 </Flex.Item>
47−function CohortList({ points, className }) {
76+function CohortList({ acceptedPoints, pendingPoints, className, onlyPending }) {
48 const { syncInvites } = usePointCache();
77 const { syncInvites } = usePointCache();
50 const [query, setQuery] = useState('');
79 const [query, setQuery] = useState('');
52 useEffect(() => {
81 useEffect(() => {
53− points.map(syncInvites);
82+ acceptedPoints.map(syncInvites);
54− }, [points, syncInvites]);
83+ }, [acceptedPoints, syncInvites]);
56 const handleChange = useCallback(
85 const handleChange = useCallback(
@@ -61,40 +90,51 @@ function CohortList({ points, className }) {
61 [setQuery]
90 [setQuery]
64− const visiblePoints = useMemo(
93+ const filterPoints = useCallback(
66 points.filter(p => {
95 points.filter(p => {
67 const patp = ob.patp(p).slice(1);
96 const patp = ob.patp(p).slice(1);
68 return patp.startsWith(query);
97 return patp.startsWith(query);
70− [query, points]
99+ [query]
73− return (
102+ const _pendingPoints = filterPoints(pendingPoints);
74− <Grid gap={3} className={cn('mt1', className)}>
103+ const _acceptedPoints = filterPoints(acceptedPoints);
75− <Grid.Item align="center" full as={Flex} className="b b-gray2 b1">
77− <SearchIcon className="p2" />
80− <Flex.Item
105+ const offset = onlyPending ? 0 : _acceptedPoints.length;
82− as={'input'}
107+ return (
83− value={query}
108+ <Grid gap={3} className={cn('mt4', className)}>
84− onChange={handleChange}
109+ <Grid.Item full as={SearchInput} value={query} onChange={handleChange} />
89− {visiblePoints.map((p, idx) => (
111+ {!onlyPending &&
112+ _acceptedPoints.map((p, idx) => (
115+ half={(idx % 2) + 1}
90− <Grid.Item key={p} half={(idx % 2) + 1} as={CohortMember} point={p} />
116+ as={CohortMember}
120+ {_pendingPoints.map((p, idx) => (
123+ half={((offset + idx) % 2) + 1}
93− {visiblePoints.length === 0 && (
130+
131+ {_pendingPoints.length === 0 &&
132+ (_acceptedPoints.length === 0 || onlyPending) && (
94− <Grid.Item full className="p4 t-center">
133+ <Grid.Item full className="p4 t-center">
95− No invites accepted yet.
135+ No invites accepted yet.
96− </Grid.Item>
136+ </Grid.Item>
@@ -113,6 +153,9 @@ export default function InviteCohort() {
113 sentInvites,
153 sentInvites,
114 } = useInvites(point);
154 } = useInvites(point);
156+ const [showInviteForm, setShowInviteForm] = useState(false);
157+ const [tab, setTab] = useState(NAMES.ALL);
116 const _acceptedPoints = acceptedPoints.getOrElse([]);
159 const _acceptedPoints = acceptedPoints.getOrElse([]);
117 const _pendingPoints = pendingPoints.getOrElse([]);
160 const _pendingPoints = pendingPoints.getOrElse([]);
118 const _pendingInvites = _pendingPoints.length;
161 const _pendingInvites = _pendingPoints.length;
@@ -138,10 +181,10 @@ export default function InviteCohort() {
138 <Grid.Item full>
181 <Grid.Item full>
139 <Flex align="center">
182 <Flex align="center">
140 <Flex.Item>
183 <Flex.Item>
141− {_acceptedInvites + _pendingInvites} / {_totalInvites}
184+ {_acceptedInvites} / {_totalInvites}
142 </Flex.Item>
185 </Flex.Item>
143− {_pendingInvites && (
186+ {_pendingInvites !== 0 && (
144− <Flex.Item as={Chip} color="yellow">
187+ <Flex.Item as={Chip} className="bg-yellow4 white">
145 {_pendingInvites} pending
188 {_pendingInvites} pending
146 </Flex.Item>
189 </Flex.Item>
@@ -154,14 +197,45 @@ export default function InviteCohort() {
154 sent={sentInvites}
197 sent={sentInvites}
155 accepted={acceptedInvites}
198 accepted={acceptedInvites}
200+ {availableInvites.getOrElse(0) !== 0 && !showInviteForm && (
206+ onClick={() => setShowInviteForm(true)}>
210+ {showInviteForm && <Inviter />}
157 <Grid.Item
212 <Grid.Item
159− as={InviteSigilList}
214+ center
160− pendingPoints={pendingPoints}
215+ as={Tabs}
219+ onTabChange={setTab}
161− acceptedPoints={acceptedPoints}
220+ acceptedPoints={_acceptedPoints}
221+ pendingPoints={_pendingPoints}
222+ onlyPending={tab === NAMES.PENDING}
163− <Grid.Item full as={CohortList} points={_acceptedPoints} />
234+ [NAMES.PENDING]: CohortList,
235+ [NAMES.ALL]: CohortList,
239+ { text: 'All', value: NAMES.ALL },
240+ { text: 'Pending', value: NAMES.PENDING },