git.iko.soy/bridge
on e366ef3 help sign in
bridge/src/views/Point.js
144 lines 3.7 kB history raw
1import { Just, Nothing } from 'folktale/maybe';
2import React from 'react';
3import { pour } from 'sigil-js';
4import * as ob from 'urbit-ob';
5import * as azimuth from 'azimuth-js';
6import * as need from '../lib/need';
8import PointList from '../components/old/PointList';
9import ReactSVGComponents from '../components/old/ReactSVGComponents';
10import KeysAndMetadata from './Point/KeysAndMetadata';
11import Actions from './Point/Actions';
12import { Row, Col, H1, H3 } from '../components/old/Base';
13import { withHistory } from '../store/history';
14import { withNetwork } from '../store/network';
15import { compose } from '../lib/lib';
16import { withWallet } from '../store/wallet';
17import { withPointCursor } from '../store/pointCursor';
18import { withPointCache } from '../store/pointCache';
20class Point extends React.Component {
21 constructor(props) {
22 super(props);
24 this.state = {
25 spawned: [],
26 invites: Nothing(),
27 };
28 }
30 componentDidMount() {
31 this.cachePoints();
32 }
34 componentDidUpdate(prevProps) {
35 //
36 // NB (jtobin)
37 //
38 // When a link in the 'issued points' component is clicked, we don't
39 // actually leave the Point component, and componentDidMount will not fire
40 // again. But, we can force a call to cachePoints here.
41 //
42 const oldCursor = prevProps.pointCursor.getOrElse(true);
43 const newCursor = this.props.pointCursor.getOrElse(true);
45 if (oldCursor !== newCursor) {
46 this.cachePoints();
47 }
48 }
50 cachePoints() {
51 const { web3, contracts, pointCursor, addToPointCache } = this.props;
53 web3.chain(_ =>
54 contracts.chain(ctrcs =>
55 pointCursor.chain(point => {
56 azimuth.azimuth
57 .getPoint(ctrcs, point)
58 .then(details => addToPointCache({ [point]: details }));
59 azimuth.delegatedSending
60 .getTotalUsableInvites(ctrcs, point)
61 .then(count => this.setState({ invites: Just(count) }));
62 this.updateSpawned(ctrcs, point);
63 })
64 )
65 );
66 }
68 updateSpawned = contracts => {
69 const { pointCursor } = this.props;
71 pointCursor.matchWith({
72 Nothing: _ => {},
73 Just: point => {
74 azimuth.azimuth
75 .getSpawned(contracts, point.value)
76 .then(spawned => this.setState({ spawned }));
77 },
78 });
79 };
81 render() {
82 const { web3, history, wallet, pointCache } = this.props;
84 const { spawned } = this.state;
86 const point = need.pointCursor(this.props);
88 const pointDetails =
89 point in pointCache ? Just(pointCache[point]) : Nothing();
91 const name = ob.patp(point);
93 const sigil = pour({
94 patp: name,
95 renderer: ReactSVGComponents,
96 size: 256,
97 });
99 const online = Just.hasInstance(web3);
101 const authenticated = Just.hasInstance(wallet);
103 const issuedPointList =
104 spawned.length === 0 ? (
105 <div />
106 ) : (
107 <div>
108 <H3>{'Issued Points'}</H3>
110 <PointList routeHandler={history.popAndPush} points={spawned} />
111 </div>
112 );
114 return (
115 <Row>
116 <Col>
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}
130 {online ? <KeysAndMetadata pointDetails={pointDetails} /> : <div />}
131 {issuedPointList}
132 </Col>
133 </Row>
134 );
135 }
138export default compose(
139 withNetwork,
140 withHistory,
141 withWallet,
142 withPointCursor,
143 withPointCache
144)(Point);