@@ -1,143 +1,62 @@
1−import { Just, Nothing } from 'folktale/maybe';
2−import React from 'react';
3−import { pour } from 'sigil-js';
4−import * as ob from 'urbit-ob';
5−import * as azimuth from 'azimuth-js';
6−import * as need from '../lib/need';
1+import React, { useCallback } from 'react';
2+import * as need from 'lib/need';
73
8−import PointList from '../components/old/PointList';
9−import ReactSVGComponents from '../components/ReactSVGComponents';
10−import KeysAndMetadata from './Point/KeysAndMetadata';
11−import Actions from './Point/Actions';
12−import { H1, H3 } from '../components/old/Base';
13−import { withHistory } from '../store/history';
14−import { withNetwork } from '../store/network';
15−import { compose } from '../lib/lib';
16−import { withWallet } from '../store/wallet';
17−import { withPointCursor } from '../store/pointCursor';
18−import { withPointCache } from '../store/pointCache';
19−import View from 'components/View';
20−
21−class Point extends React.Component {
22− constructor(props) {
23− super(props);
24−
25− this.state = {
26− spawned: [],
27− invites: Nothing(),
28− };
29− }
30−
31− componentDidMount() {
32− this.cachePoints();
33− }
34−
35− componentDidUpdate(prevProps) {
36− //
37− // NB (jtobin)
38− //
39− // When a link in the 'issued points' component is clicked, we don't
40− // actually leave the Point component, and componentDidMount will not fire
41− // again. But, we can force a call to cachePoints here.
42− //
43− const oldCursor = prevProps.pointCursor.getOrElse(true);
44− const newCursor = this.props.pointCursor.getOrElse(true);
45−
46− if (oldCursor !== newCursor) {
47− this.cachePoints();
48− }
49− }
50−
51− cachePoints() {
52− const { web3, contracts, pointCursor, addToPointCache } = this.props;
53−
54− web3.chain(_ =>
55− contracts.chain(ctrcs =>
56− pointCursor.chain(point => {
57− azimuth.azimuth
58− .getPoint(ctrcs, point)
59− .then(details => addToPointCache({ [point]: details }));
60− azimuth.delegatedSending
61− .getTotalUsableInvites(ctrcs, point)
62− .then(count => this.setState({ invites: Just(count) }));
63− this.updateSpawned(ctrcs, point);
64− })
65− )
66− );
67− }
68−
69− updateSpawned = contracts => {
70− const { pointCursor } = this.props;
71−
72− pointCursor.matchWith({
73− Nothing: _ => {},
74− Just: point => {
75− azimuth.azimuth
76− .getSpawned(contracts, point.value)
77− .then(spawned => this.setState({ spawned }));
78− },
79− });
80− };
81−
82− render() {
83− const { web3, history, wallet, pointCache } = this.props;
84−
85− const { spawned } = this.state;
4+import { usePointCursor } from 'store/pointCursor';
5+// import { usePointCache } from 'store/pointCache';
866
87− const point = need.pointCursor(this.props.pointCursor);
88−
89− const pointDetails =
90− point in pointCache ? Just(pointCache[point]) : Nothing();
91−
92− const name = ob.patp(point);
93−
94− const sigil = pour({
95− patp: name,
96− renderer: ReactSVGComponents,
97− size: 256,
98− });
99−
100− const online = Just.hasInstance(web3);
101−
102− const authenticated = Just.hasInstance(wallet);
103−
104− const issuedPointList =
105− spawned.length === 0 ? (
106− <div />
107− ) : (
108− <div>
109− <H3>{'Issued Points'}</H3>
110−
111− <PointList routeHandler={history.popAndPush} points={spawned} />
112− </div>
113− );
114−
115− return (
116− <View>
117− <div className={'mt-12 pt-6'}>{sigil}</div>
118− <H1>
119− <code>{name}</code>
120− </H1>
121− {authenticated ? (
122− <Actions
123− online={online}
124− point={point}
125− pointDetails={pointDetails}
126− invites={this.state.invites}
127− />
128− ) : null}
129−
130− {online ? <KeysAndMetadata pointDetails={pointDetails} /> : <div />}
131− {issuedPointList}
132− </View>
133− );
134− }
7+import View from 'components/View';
8+import useInvites from 'lib/useInvites';
9+import useSyncPoint from 'lib/useSyncPoint';
10+import Passport from 'components/Passport';
11+import { Grid } from 'indigo-react';
12+import { ForwardButton } from 'components/Buttons';
13+import { useHistory } from 'store/history';
14+import { ROUTE_NAMES } from 'lib/routeNames';
15+import Footer from 'components/Footer';
16+
17+export default function Point() {
18+ const history = useHistory();
19+ const { pointCursor } = usePointCursor();
20+ // const { pointCache } = usePointCache();
21+
22+ const point = need.pointCursor(pointCursor);
23+
24+ // fetch the invites for the current cursor
25+ const { invites } = useInvites(point);
26+
27+ const goAdmin = useCallback(() => {}, []);
28+ // ^ TODO: push .ADMIN
29+ const goInvite = useCallback(() => history.push(ROUTE_NAMES.INVITES_MANAGE), [
30+ history,
31+ ]);
32+
33+ // sync the current cursor
34+ useSyncPoint(point);
35+
36+ // const pointDetails = need.fromPointCache(pointCache, point);
37+
38+ return (
39+ <View>
40+ <Passport point={point} />
41+ <Grid className="pt2">
42+ <Grid.Item full>
43+ <ForwardButton onClick={goAdmin}>Admin</ForwardButton>
44+ </Grid.Item>
45+ <Grid.Divider />
46+ <Grid.Item full>
47+ <ForwardButton detail="Boot your computer" disabled>
48+ Boot Arvo
49+ </ForwardButton>
50+ </Grid.Item>
51+ </Grid>
52+ <Footer>
53+ <Grid className="pt2">
54+ <Grid.Divider />
55+ <Grid.Item full>
56+ <ForwardButton onClick={goInvite}>Invite</ForwardButton>
57+ </Grid.Item>
58+ </Grid>
59+ </Footer>
60+ </View>
61+ );
13562}
136−
137−export default compose(
138− withNetwork,
139− withHistory,
140− withWallet,
141− withPointCursor,
142− withPointCache
143−)(Point);