@@ -8,6 +8,7 @@ import { usePointCursor } from 'store/pointCursor';
88import { usePointCache } from 'store/pointCache';
99
1010import View from 'components/View';
11+import Tabs from 'components/Tabs';
1112import BarGraph from 'components/BarGraph';
1213import MaybeSigil from 'components/MaybeSigil';
1314import { matchBlinky } from 'components/Blinky';
@@ -23,10 +24,34 @@ import Inviter from 'views/Invite/Inviter';
2324
2425import { ReactComponent as SearchIcon } from 'assets/search.svg';
2526
26−function CohortMember({ point, className }) {
27+function SearchInput({ className, value, onChange }) {
28+ return (
29+ <Flex align="center" full className={cn('b b-gray2 b1', className)}>
30+ <Flex.Item className="p2">
31+ <SearchIcon />
32+ </Flex.Item>
33+
34+ <Flex.Item
35+ flex={1}
36+ as={'input'}
37+ value={value}
38+ onChange={onChange}
39+ className="b-none h7"
40+ />
41+ </Flex>
42+ );
43+}
44+
45+function CohortMember({ point, pending = false, className }) {
2746 const { sentInvites } = useInvites(point);
2847 const patp = useMemo(() => ob.patp(point), [point]);
29− const colors = ['#000000', '#FFFFFF'];
48+ const colors = pending ? ['#ee892b', '#FFFFFF'] : ['#000000', '#FFFFFF'];
49+
50+ const DetailText = useCallback(
51+ () =>
52+ pending ? 'Pending' : <> {matchBlinky(sentInvites)} points invited </>,
53+ [sentInvites]
54+ );
3055
3156 return (
3257 <Flex justify="between" className={cn('b1 b-gray2', className)}>
@@ -41,19 +66,21 @@ function CohortMember({ point, className }) {
4166 col
4267 className="mono f6 ph4">
4368 <Flex.Item>{patp}</Flex.Item>
44− <Flex.Item>{matchBlinky(sentInvites)} points invited</Flex.Item>
69+ <Flex.Item className="gray4">
70+ <DetailText />
71+ </Flex.Item>
4572 </Flex.Item>
4673 </Flex>
4774 );
4875}
49−function CohortList({ points, className }) {
76+function CohortList({ acceptedPoints, pendingPoints, className, onlyPending }) {
5077 const { syncInvites } = usePointCache();
5178
5279 const [query, setQuery] = useState('');
5380
5481 useEffect(() => {
55− points.map(syncInvites);
56− }, [points, syncInvites]);
82+ acceptedPoints.map(syncInvites);
83+ }, [acceptedPoints, syncInvites]);
5784
5885 const handleChange = useCallback(
5986 e => {
@@ -63,40 +90,51 @@ function CohortList({ points, className }) {
6390 [setQuery]
6491 );
6592
66− const visiblePoints = useMemo(
67− () =>
93+ const filterPoints = useCallback(
94+ points =>
6895 points.filter(p => {
6996 const patp = ob.patp(p).slice(1);
7097 return patp.startsWith(query);
7198 }),
72− [query, points]
99+ [query]
73100 );
74101
75− return (
76− <Grid gap={3} className={cn('mt1', className)}>
77− <Grid.Item align="center" full as={Flex} className="b b-gray2 b1">
78− <Flex.Item className="p2">
79− <SearchIcon />
80− </Flex.Item>
102+ const _pendingPoints = filterPoints(pendingPoints);
103+ const _acceptedPoints = filterPoints(acceptedPoints);
81104
82− <Flex.Item
83− flex={1}
84− as={'input'}
85− value={query}
86− onChange={handleChange}
87− className="b-none h7"
88− />
89− </Grid.Item>
105+ const offset = onlyPending ? 0 : _acceptedPoints.length;
106+
107+ return (
108+ <Grid gap={3} className={cn('mt4', className)}>
109+ <Grid.Item full as={SearchInput} value={query} onChange={handleChange} />
90110 <>
91− {visiblePoints.map((p, idx) => (
92− <Grid.Item key={p} half={(idx % 2) + 1} as={CohortMember} point={p} />
111+ {!onlyPending &&
112+ _acceptedPoints.map((p, idx) => (
113+ <Grid.Item
114+ key={p}
115+ half={(idx % 2) + 1}
116+ as={CohortMember}
117+ point={p}
118+ />
119+ ))}
120+ {_pendingPoints.map((p, idx) => (
121+ <Grid.Item
122+ key={p}
123+ half={((offset + idx) % 2) + 1}
124+ as={CohortMember}
125+ point={p}
126+ pending
127+ />
93128 ))}
94129 </>
95− {visiblePoints.length === 0 && (
96− <Grid.Item full className="p4 t-center">
97− No invites accepted yet.
98− </Grid.Item>
99− )}
130+
131+ {_pendingPoints.length === 0 &&
132+ (_acceptedPoints.length === 0 || onlyPending) && (
133+ <Grid.Item full className="p4 t-center">
134+ {' '}
135+ No invites accepted yet.
136+ </Grid.Item>
137+ )}
100138 </Grid>
101139 );
102140}
@@ -116,6 +154,7 @@ export default function InviteCohort() {
116154 } = useInvites(point);
117155
118156 const [showInviteForm, setShowInviteForm] = useState(false);
157+ const [tab, setTab] = useState(NAMES.ALL);
119158
120159 const _acceptedPoints = acceptedPoints.getOrElse([]);
121160 const _pendingPoints = pendingPoints.getOrElse([]);
@@ -170,8 +209,33 @@ export default function InviteCohort() {
170209 )}
171210 {showInviteForm && <Inviter />}
172211
173− <Grid.Item full as={CohortList} points={_acceptedPoints} />
212+ <Grid.Item
213+ full
214+ center
215+ as={Tabs}
216+ views={VIEWS}
217+ options={OPTIONS}
218+ currentTab={tab}
219+ onTabChange={setTab}
220+ acceptedPoints={_acceptedPoints}
221+ pendingPoints={_pendingPoints}
222+ onlyPending={tab === NAMES.PENDING}
223+ />
174224 </Grid>
175225 </View>
176226 );
177227}
228+const NAMES = {
229+ ALL: 'ALL',
230+ PENDING: 'PENDING',
231+};
232+
233+const VIEWS = {
234+ [NAMES.PENDING]: CohortList,
235+ [NAMES.ALL]: CohortList,
236+};
237+
238+const OPTIONS = [
239+ { text: 'All', value: NAMES.ALL },
240+ { text: 'Pending', value: NAMES.PENDING },
241+];