@@ -25,6 +25,91 @@ import { useLocalRouter } from 'lib/LocalRouter';
2525import Inviter from 'views/Invite/Inviter';
2626import { usePointCache } from 'store/pointCache';
2727
28+function InviteForm({
29+ showInviteForm,
30+ setShowInviteForm,
31+ acceptedInvites,
32+ acceptedPoints,
33+ availableInvites,
34+ goCohort,
35+ pendingPoints,
36+ sentInvites,
37+ showInvites,
38+}) {
39+ const _totalInvites =
40+ sentInvites.getOrElse(0) + availableInvites.getOrElse(0);
41+ const _pendingInvites = pendingPoints.getOrElse([]).length;
42+
43+ return (
44+ <>
45+ <Grid.Item cols={[1, 11]}>
46+ Invite Group
47+ <br />
48+ </Grid.Item>
49+
50+ <Grid.Item
51+ className={cn('t-right underline pointer-hover', {
52+ gray4: sentInvites.getOrElse(0) === 0,
53+ })}
54+ onClick={goCohort}
55+ cols={[11, 13]}>
56+ View
57+ </Grid.Item>
58+ <Grid.Item full>
59+ <Flex align="center">
60+ <Flex.Item>
61+ {acceptedInvites.getOrElse(0)} / {_totalInvites}
62+ </Flex.Item>
63+ {_pendingInvites > 0 && (
64+ <Flex.Item as={Chip} className="bg-yellow1 yellow4">
65+ {_pendingInvites} pending
66+ </Flex.Item>
67+ )}
68+ </Flex>
69+ </Grid.Item>
70+
71+ {showInvites && (
72+ <>
73+ <Grid.Item
74+ full
75+ as={BarGraph}
76+ available={availableInvites}
77+ sent={sentInvites}
78+ accepted={acceptedInvites}
79+ />
80+ <Grid.Item
81+ full
82+ as={InviteSigilList}
83+ pendingPoints={pendingPoints}
84+ acceptedPoints={acceptedPoints}
85+ />
86+ </>
87+ )}
88+ {!showInvites && (
89+ <>
90+ <Grid.Item full className="b-gray4 b-dotted b1 self-center">
91+ <div className="p4 pv8 t-center gray4">
92+ Start your invite group by adding members
93+ </div>
94+ </Grid.Item>
95+ </>
96+ )}
97+ {!showInviteForm && availableInvites.getOrElse(0) > 0 && (
98+ <Grid.Item
99+ full
100+ solid
101+ as={Button}
102+ center
103+ onClick={() => setShowInviteForm(true)}>
104+ Add Members
105+ </Grid.Item>
106+ )}
107+ {showInviteForm && <Inviter />}
108+ <Grid.Item full className="mb2" />
109+ </>
110+ );
111+}
112+
28113export default function Point() {
29114 const { pop, push, names } = useLocalRouter();
30115 const { pointCursor } = usePointCursor();
@@ -61,10 +146,6 @@ export default function Point() {
61146
62147 const hasInvites = showInvites || availableInvites.getOrElse(0) !== 0;
63148
64− const _totalInvites =
65− sentInvites.getOrElse(0) + availableInvites.getOrElse(0);
66− const _pendingInvites = pendingPoints.getOrElse([]).length;
67−
68149 const loadedInvites = Just.hasInstance(availableInvites);
69150 //
70151 // availableInvites.getOrElse(0) === 0
@@ -135,89 +216,6 @@ export default function Point() {
135216
136217 const address = need.addressFromWallet(wallet);
137218
138− const InviteForm = useCallback(() => {
139− return (
140− <>
141− <Grid.Item cols={[1, 11]}>
142− Invite Group
143− <br />
144− </Grid.Item>
145−
146− <Grid.Item
147− className={cn('t-right underline pointer-hover', {
148− gray4: sentInvites.getOrElse(0) === 0,
149− })}
150− onClick={goCohort}
151− cols={[11, 13]}>
152− View
153− </Grid.Item>
154− <Grid.Item full>
155− <Flex align="center">
156− <Flex.Item>
157− {acceptedInvites.getOrElse(0)} / {_totalInvites}
158− </Flex.Item>
159− {_pendingInvites > 0 && (
160− <Flex.Item as={Chip} className="bg-yellow1 yellow4">
161− {_pendingInvites} pending
162− </Flex.Item>
163− )}
164− </Flex>
165− </Grid.Item>
166−
167− {showInvites && (
168− <>
169− <Grid.Item
170− full
171− as={BarGraph}
172− available={availableInvites}
173− sent={sentInvites}
174− accepted={acceptedInvites}
175− />
176− <Grid.Item
177− full
178− as={InviteSigilList}
179− pendingPoints={pendingPoints}
180− acceptedPoints={acceptedPoints}
181− />
182− </>
183− )}
184− {!showInvites && (
185− <>
186− <Grid.Item full className="b-gray4 b-dotted b1 self-center">
187− <div className="p4 pv8 t-center gray4">
188− Start your invite group by adding members
189− </div>
190− </Grid.Item>
191− </>
192− )}
193− {!showInviteForm && availableInvites.getOrElse(0) > 0 && (
194− <Grid.Item
195− full
196− solid
197− as={Button}
198− center
199− onClick={() => setShowInviteForm(true)}>
200− Add Members
201− </Grid.Item>
202− )}
203− {showInviteForm && <Inviter />}
204− <Grid.Item full className="mb2" />
205− </>
206− );
207− }, [
208− showInviteForm,
209− setShowInviteForm,
210− _pendingInvites,
211− _totalInvites,
212− acceptedInvites,
213− acceptedPoints,
214− availableInvites,
215− goCohort,
216− pendingPoints,
217− sentInvites,
218− showInvites,
219− ]);
220−
221219 const _requestCount = requestCount.getOrElse(0);
222220
223221 return (
@@ -247,7 +245,19 @@ export default function Point() {
247245 )}
248246 </Grid.Item>
249247 )}
250− {isPlanet && hasInvites && <InviteForm />}
248+ {isPlanet && hasInvites && (
249+ <InviteForm
250+ showInviteForm={showInviteForm}
251+ setShowInviteForm={setShowInviteForm}
252+ acceptedInvites={acceptedInvites}
253+ acceptedPoints={acceptedPoints}
254+ availableInvites={availableInvites}
255+ goCohort={goCohort}
256+ pendingPoints={pendingPoints}
257+ sentInvites={sentInvites}
258+ showInvites={showInvites}
259+ />
260+ )}
251261 {!loadedInvites && isPlanet && (
252262 <Grid.Item className="mv2" full>
253263 Invite Group <Blinky />