git.iko.soy/bridge
on 2b975ce help sign in
bridge/src/views/Point.js
320 lines 8.5 kB history raw
1import React, { useCallback, useState } from 'react';
2import cn from 'classnames';
3import { Just } from 'folktale/maybe';
4import { Grid, Flex, Button } from 'indigo-react';
5import { azimuth } from 'azimuth-js';
7import { usePointCursor } from 'store/pointCursor';
8import { useWallet } from 'store/wallet';
10import View from 'components/View';
11import Greeting from 'components/Greeting';
12import Passport from 'components/Passport';
13import Blinky, { matchBlinky } from 'components/Blinky';
14import BarGraph from 'components/BarGraph';
15import Chip from 'components/Chip';
16import InviteSigilList from 'components/InviteSigilList';
17import { ForwardButton } from 'components/Buttons';
19import * as need from 'lib/need';
20import useInvites from 'lib/useInvites';
21import { useSyncExtras } from 'lib/useSyncPoints';
22import useCurrentPermissions from 'lib/useCurrentPermissions';
23import { useLocalRouter } from 'lib/LocalRouter';
25import Inviter from 'views/Invite/Inviter';
26import { usePointCache } from 'store/pointCache';
28function 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;
43 return (
44 <>
45 <Grid.Item cols={[1, 11]}>
46 Invite Group
47 <br />
48 </Grid.Item>
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>
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 );
113export default function Point() {
114 const { pop, push, names } = useLocalRouter();
115 const { pointCursor } = usePointCursor();
117 const { wallet, urbitWallet } = useWallet();
118 const point = need.point(pointCursor);
120 const { getResidents } = usePointCache();
122 const { residentCount, requestCount } = getResidents(point);
124 const {
125 isParent,
126 isActiveOwner,
127 canManage,
128 canSpawn,
129 canVote,
130 isOwner,
131 } = useCurrentPermissions();
133 const canBitcoin = Just.hasInstance(urbitWallet);
135 // fetch the invites for the current cursor
136 const invites = useInvites(point);
137 const {
138 availableInvites,
139 sentInvites,
140 acceptedInvites,
141 pendingPoints,
142 acceptedPoints,
143 } = invites;
145 const showInvites = !(
146 acceptedInvites.getOrElse(0) === 0 && sentInvites.getOrElse(0) === 0
147 );
149 const hasInvites = showInvites || availableInvites.getOrElse(0) !== 0;
151 const loadedInvites = Just.hasInstance(availableInvites);
152 //
153 // availableInvites.getOrElse(0) === 0
155 const goSenate = useCallback(() => push(names.SENATE), [push, names]);
157 const goCohort = useCallback(() => push(names.INVITE_COHORT), [push, names]);
159 const goUrbitOS = useCallback(() => push(names.URBIT_OS), [push, names]);
161 const goBitcoin = useCallback(() => push(names.BITCOIN), [push, names]);
163 const goUrbitID = useCallback(() => push(names.URBIT_ID), [push, names]);
165 const goResidents = useCallback(() => push(names.RESIDENTS), [push, names]);
167 const goPartiesSetPoolSize = useCallback(
168 () => push(names.PARTY_SET_POOL_SIZE),
169 [push, names]
170 );
172 const goIssuePoint = useCallback(() => push(names.ISSUE_CHILD), [
173 names.ISSUE_CHILD,
174 push,
175 ]);
177 const isPlanet = azimuth.getPointSize(point) === azimuth.PointSize.Planet;
179 const [showInviteForm, setShowInviteForm] = useState(false);
181 const inviteButton = (() => {
182 if (azimuth.getPointSize(point) === azimuth.PointSize.Star) {
183 return (
184 <>
185 <Grid.Item
186 full
187 as={ForwardButton}
188 disabled={!isActiveOwner}
189 onClick={goPartiesSetPoolSize}>
190 Manage Invite Pools
191 </Grid.Item>
192 <Grid.Divider />
193 </>
194 );
195 }
197 return null;
198 })();
200 const senateButton = (() => {
201 if (azimuth.getPointSize(point) !== azimuth.PointSize.Galaxy) {
202 return null;
203 }
204 return (
205 <>
206 <Grid.Item
207 full
208 as={ForwardButton}
209 disabled={!canVote}
210 onClick={goSenate}>
211 Senate
212 </Grid.Item>
213 <Grid.Divider />
214 </>
215 );
216 })();
218 // sync the current cursor
219 useSyncExtras([point]);
221 const address = need.addressFromWallet(wallet);
223 const _requestCount = requestCount.getOrElse(0);
225 return (
226 <View pop={pop} inset>
227 <Greeting point={point} />
228 <Passport
229 point={Just(point)}
230 address={Just(address)}
231 animationMode={'slide'}
232 />
233 <Grid gap={3}>
234 {isParent && (
235 <Grid.Item
236 full
237 as={Flex}
238 justify="between"
239 onClick={goResidents}
240 className="mv1 pointer">
241 <Flex.Item>
242 Residents{' '}
243 <span className="gray3">{matchBlinky(residentCount)}</span>
244 </Flex.Item>
245 {_requestCount !== 0 && (
246 <Flex.Item className="f7 bg-gray2 h3 pv1 ph2 br-full r-full text-center">
247 {_requestCount} PENDING
248 </Flex.Item>
249 )}
250 </Grid.Item>
251 )}
252 {isPlanet && hasInvites && (
253 <InviteForm
254 showInviteForm={showInviteForm}
255 setShowInviteForm={setShowInviteForm}
256 acceptedInvites={acceptedInvites}
257 acceptedPoints={acceptedPoints}
258 availableInvites={availableInvites}
259 goCohort={goCohort}
260 pendingPoints={pendingPoints}
261 sentInvites={sentInvites}
262 showInvites={showInvites}
263 />
264 )}
265 {!loadedInvites && isPlanet && (
266 <Grid.Item className="mv2" full>
267 Invite Group <Blinky />
268 </Grid.Item>
269 )}
270 </Grid>
271 <Grid className="pt2">
272 <Grid.Divider />
273 {inviteButton}
274 <Grid.Item
275 full
276 as={ForwardButton}
277 disabled={!canManage}
278 onClick={goUrbitID}
279 className="mt1"
280 detail="Identity and security settings">
281 ID
282 </Grid.Item>
283 <Grid.Divider />
284 <Grid.Item
285 full
286 as={ForwardButton}
287 disabled={!canManage}
288 className="mt1"
289 detail="Urbit OS Settings"
290 onClick={goUrbitOS}>
291 OS
292 </Grid.Item>
293 <Grid.Divider />
294 <Grid.Item
295 full
296 as={ForwardButton}
297 disabled={!canBitcoin}
298 className="mt1"
299 detail="Bitcoin management"
300 onClick={goBitcoin}>
301 Bitcoin
302 </Grid.Item>
303 <Grid.Divider />
304 {isParent && (
305 <>
306 <Grid.Item
307 full
308 as={ForwardButton}
309 disabled={!canSpawn}
310 onClick={goIssuePoint}>
311 Issue Point
312 </Grid.Item>
313 <Grid.Divider />
314 </>
315 )}
316 {senateButton}
317 </Grid>
318 </View>
319 );