on master help sign in
Merge pull request #161 from urbit/feat/extract-point-cursor

Extract point cursor & point cache

commit394090a9f28be49700045fbf39f173a7dbe147d8 authorMatt Condon <mattgcondon@gmail.com> dateMon 17 Jun 2019, 14:17 (7 years ago) parent2bfe551134dfc0
19 files changed+156−61
src/bridge/Bridge.js+8−35 src/bridge/components/Header.js+6−4 src/bridge/components/PointList.js+5−2 src/bridge/lib/router.js+1−1 src/bridge/store/pointCache.js+38 src/bridge/store/pointCursor.js+36 src/bridge/views/AcceptTransfer.js+3−1 src/bridge/views/CancelTransfer.js+7−1 src/bridge/views/GenKeyfile.js+7−1 src/bridge/views/InvitesManage.js+5−1 src/bridge/views/InvitesSend.js+3−1 src/bridge/views/IssueChild.js+5−1 src/bridge/views/Point.js+7−7 src/bridge/views/Points.js+3−1 src/bridge/views/SentTransaction.js+2−1 src/bridge/views/SetKeys.js+5−1 src/bridge/views/SetProxy.js+5−1 src/bridge/views/Transfer.js+5−1 src/bridge/views/ViewPoint.js+5−1
src/bridge/Bridge.js+8−35
@@ -17,6 +17,8 @@ import { TxnConfirmationsProvider } from './store/txnConfirmations';
1717import { OnlineProvider } from './store/online';
1818import { NetworkProvider } from './store/network';
1919import { WalletProvider } from './store/wallet';
20+import { PointCursorProvider } from './store/pointCursor';
21+import { PointCacheProvider } from './store/pointCache';
2022
2123const kInitialNetworkType = isDevelopment
2224 ? NETWORK_TYPES.LOCAL
@@ -45,6 +47,7 @@ const kInitialWallet = kIsStubbed
4547const kInitialMnemonic = kIsStubbed
4648 ? process.env.REACT_APP_DEV_MNEMONIC
4749 : Nothing();
50+const kInitialPointCursor = kIsStubbed ? Just(0) : Nothing();
4851
4952// the router itself is just a component that renders a specific view
5053// depending on the history
@@ -83,6 +86,8 @@ const AllProviders = nest([
8386 OnlineProvider,
8487 NetworkProvider,
8588 WalletProvider,
89+ PointCursorProvider,
90+ PointCacheProvider,
8691]);
8792
8893class Bridge extends React.Component {
@@ -91,30 +96,13 @@ class Bridge extends React.Component {
9196
9297 this.state = {
9398 networkSeedCache: null,
94− // point
95− pointCursor: Nothing(),
96− pointCache: {},
9799 // txn
98100 txnHashCursor: Nothing(),
99101 txnConfirmations: {},
100102 };
101103
102− this.setPointCursor = this.setPointCursor.bind(this);
103104 this.setTxnHashCursor = this.setTxnHashCursor.bind(this);
104105 this.setNetworkSeedCache = this.setNetworkSeedCache.bind(this);
105− this.addToPointCache = this.addToPointCache.bind(this);
106− }
107−
108− componentDidMount() {
109− // NB (jtobin, shrugs):
110− //
111− // If running in development, the following can be tweaked to get you set
112− // up with a desirable initial state.
113− if (kIsStubbed) {
114− this.setState({
115− pointCursor: Just(0),
116− });
117− }
118106 }
119107
120108 setNetworkSeedCache(networkSeed, revision) {
@@ -124,16 +112,6 @@ class Bridge extends React.Component {
124112 });
125113 }
126114
127− setPointCursor(pointCursor) {
128− this.setState({ pointCursor });
129− }
130−
131− addToPointCache(entry) {
132− this.setState((state, _) => ({
133− pointCache: Object.assign(state.pointCache, entry),
134− }));
135− }
136−
137115 setTxnHashCursor(txnHashCursor) {
138116 this.setState({ txnHashCursor });
139117 }
@@ -142,8 +120,6 @@ class Bridge extends React.Component {
142120 const {
143121 networkSeedCache,
144122 networkRevisionCache,
145− pointCursor,
146− pointCache,
147123 txnHashCursor,
148124 } = this.state;
149125
@@ -152,18 +128,15 @@ class Bridge extends React.Component {
152128 initialRoutes={kInitialRoutes}
153129 initialNetworkType={kInitialNetworkType}
154130 initialWallet={kInitialWallet}
155− initialMnemonic={kInitialMnemonic}>
131+ initialMnemonic={kInitialMnemonic}
132+ initialPointCursor={kInitialPointCursor}>
156133 <Container>
157134 <Row>
158135 <VariableWidthColumn>
159− <Header pointCursor={pointCursor} />
136+ <Header />
160137
161138 <Row className={'row wrapper'}>
162139 <Router
163− setPointCursor={this.setPointCursor}
164− addToPointCache={this.addToPointCache}
165− pointCursor={pointCursor}
166− pointCache={pointCache}
167140 networkSeedCache={networkSeedCache}
168141 networkRevisionCache={networkRevisionCache}
169142 setNetworkSeedCache={this.setNetworkSeedCache}
src/bridge/components/Header.js+6−4
@@ -7,19 +7,21 @@ import { useHistory } from '../store/history';
77import { isLast } from '../lib/lib';
88import { useNetwork } from '../store/network';
99import { useWallet } from '../store/wallet';
10+import { usePointCursor } from '../store/pointCursor';
1011
1112// hook to create a breadcrumb builder function based on the current
1213// global states
13−function useRouteBreadcrumbBuilder(props) {
14+function useRouteBreadcrumbBuilder() {
1415 const { networkType } = useNetwork();
1516 const { wallet } = useWallet();
17+ const { pointCursor } = usePointCursor();
1618
17− return getRouteBreadcrumb({ ...props, networkType, wallet });
19+ return getRouteBreadcrumb({ pointCursor, networkType, wallet });
1820}
1921
2022function Crumbs(props) {
2123 const history = useHistory();
22− const breadcrumbBuilder = useRouteBreadcrumbBuilder(props);
24+ const breadcrumbBuilder = useRouteBreadcrumbBuilder();
2325
2426 return (
2527 <>
@@ -53,7 +55,7 @@ function Header(props) {
5355 if (showCrumbs) {
5456 return (
5557 <div className={'flex items-center h-10'}>
56− <Crumbs pointCursor={props.pointCursor} />
58+ <Crumbs />
5759 </div>
5860 );
5961 }
src/bridge/components/PointList.js+5−2
@@ -1,11 +1,14 @@
11import React from 'react';
22import { chunk } from 'lodash';
33
4+import { usePointCursor } from '../store/pointCursor';
5+
46import { Row } from './Base';
57import RenderedPoint from './RenderedPoint';
68
7−const PointList = props => {
8− const { setPointCursor, routeHandler, points, loading } = props;
9+const PointList = function(props) {
10+ const { setPointCursor } = usePointCursor();
11+ const { routeHandler, points, loading } = props;
912 const chunks = chunk(points, 3);
1013
1114 return points.length === 0 ? (
src/bridge/lib/router.js+1−1
@@ -68,9 +68,9 @@ const ROUTES = {
6868};
6969
7070export const getRouteBreadcrumb = ({
71+ pointCursor,
7172 networkType,
7273 wallet,
73− pointCursor,
7474}) => route => {
7575 switch (route.name) {
7676 case ROUTE_NAMES.INVITE_TICKET:
src/bridge/store/pointCache.jsnew file+38
@@ -0,0 +1,38 @@
1+import React, { createContext, forwardRef, useContext, useState } from 'react';
2+
3+export const PointCacheContext = createContext(null);
4+
5+function _usePointCache() {
6+ const [pointCache, _setPointCache] = useState({});
7+
8+ const addToPointCache = entry =>
9+ _setPointCache(cache => ({ ...cache, ...entry }));
10+
11+ return {
12+ pointCache,
13+ addToPointCache,
14+ };
15+}
16+
17+export function PointCacheProvider({ children }) {
18+ const pointCache = _usePointCache();
19+
20+ return (
21+ <PointCacheContext.Provider value={pointCache}>
22+ {children}
23+ </PointCacheContext.Provider>
24+ );
25+}
26+
27+// Hook version
28+export function usePointCache() {
29+ return useContext(PointCacheContext);
30+}
31+
32+// HOC version
33+export const withPointCache = Component =>
34+ forwardRef((props, ref) => (
35+ <PointCacheContext.Consumer>
36+ {pointCache => <Component ref={ref} {...pointCache} {...props} />}
37+ </PointCacheContext.Consumer>
38+ ));
src/bridge/store/pointCursor.jsnew file+36
@@ -0,0 +1,36 @@
1+import React, { createContext, forwardRef, useContext, useState } from 'react';
2+import Maybe from 'folktale/maybe';
3+
4+export const PointCursorContext = createContext(null);
5+
6+function _usePointCursor(initialPointCursor = Maybe.Nothing()) {
7+ const [pointCursor, setPointCursor] = useState(initialPointCursor);
8+
9+ return {
10+ pointCursor,
11+ setPointCursor,
12+ };
13+}
14+
15+export function PointCursorProvider({ initialPointCursor, children }) {
16+ const pointCursor = _usePointCursor(initialPointCursor);
17+
18+ return (
19+ <PointCursorContext.Provider value={pointCursor}>
20+ {children}
21+ </PointCursorContext.Provider>
22+ );
23+}
24+
25+// Hook version
26+export function usePointCursor() {
27+ return useContext(PointCursorContext);
28+}
29+
30+// HOC version
31+export const withPointCursor = Component =>
32+ forwardRef((props, ref) => (
33+ <PointCursorContext.Consumer>
34+ {pointCursor => <Component ref={ref} {...pointCursor} {...props} />}
35+ </PointCursorContext.Consumer>
36+ ));
src/bridge/views/AcceptTransfer.js+3−1
@@ -17,6 +17,7 @@ import { isValidAddress } from '../lib/wallet';
1717import { withNetwork } from '../store/network';
1818import { compose } from '../lib/lib';
1919import { withWallet } from '../store/wallet';
20+import { withPointCursor } from '../store/pointCursor';
2021
2122class AcceptTransfer extends React.Component {
2223 constructor(props) {
@@ -122,5 +123,6 @@ class AcceptTransfer extends React.Component {
122123
123124export default compose(
124125 withNetwork,
125− withWallet
126+ withWallet,
127+ withPointCursor
126128)(AcceptTransfer);
src/bridge/views/CancelTransfer.js+7−1
@@ -9,6 +9,8 @@ import StatelessTransaction from '../components/StatelessTransaction';
99import { ETH_ZERO_ADDR } from '../lib/wallet';
1010import { withNetwork } from '../store/network';
1111import { compose } from '../lib/lib';
12+import { withPointCursor } from '../store/pointCursor';
13+import { withPointCache } from '../store/pointCache';
1214
1315class CancelTransfer extends React.Component {
1416 constructor(props) {
@@ -75,4 +77,8 @@ class CancelTransfer extends React.Component {
7577 }
7678}
7779
78−export default compose(withNetwork)(CancelTransfer);
80+export default compose(
81+ withNetwork,
82+ withPointCursor,
83+ withPointCache
84+)(CancelTransfer);
src/bridge/views/GenKeyfile.js+7−1
@@ -13,6 +13,8 @@ import { attemptSeedDerivation, genKey } from '../lib/keys';
1313import { addHexPrefix } from '../lib/wallet';
1414import { compose } from '../lib/lib';
1515import { withWallet } from '../store/wallet';
16+import { withPointCursor } from '../store/pointCursor';
17+import { withPointCache } from '../store/pointCache';
1618
1719class GenKeyfile extends React.Component {
1820 constructor(props) {
@@ -134,4 +136,8 @@ class GenKeyfile extends React.Component {
134136 }
135137}
136138
137−export default compose(withWallet)(GenKeyfile);
139+export default compose(
140+ withWallet,
141+ withPointCursor,
142+ withPointCache
143+)(GenKeyfile);
src/bridge/views/InvitesManage.js+5−1
@@ -16,6 +16,7 @@ import {
1616import StatelessTransaction from '../components/StatelessTransaction';
1717import { withNetwork } from '../store/network';
1818import { compose } from '../lib/lib';
19+import { withPointCursor } from '../store/pointCursor';
1920
2021class InvitesManage extends React.Component {
2122 constructor(props) {
@@ -184,4 +185,7 @@ class InvitesManage extends React.Component {
184185 }
185186}
186187
187−export default compose(withNetwork)(InvitesManage);
188+export default compose(
189+ withNetwork,
190+ withPointCursor
191+)(InvitesManage);
src/bridge/views/InvitesSend.js+3−1
@@ -22,6 +22,7 @@ import * as tank from '../lib/tank';
2222import { withNetwork } from '../store/network';
2323import { compose } from '../lib/lib';
2424import { withWallet } from '../store/wallet';
25+import { withPointCursor } from '../store/pointCursor';
2526
2627const GAS_PRICE_GWEI = 20; // we pay the premium for faster ux
2728const GAS_LIMIT = 350000;
@@ -496,5 +497,6 @@ class InvitesSend extends React.Component {
496497
497498export default compose(
498499 withNetwork,
499− withWallet
500+ withWallet,
501+ withPointCursor
500502)(InvitesSend);
src/bridge/views/IssueChild.js+5−1
@@ -26,6 +26,7 @@ import { canDecodePatp } from '../lib/txn';
2626import { isValidAddress } from '../lib/wallet';
2727import { withNetwork } from '../store/network';
2828import { compose } from '../lib/lib';
29+import { withPointCursor } from '../store/pointCursor';
2930
3031const setFind = (set, pred) => {
3132 for (const e of set) {
@@ -255,4 +256,7 @@ class IssueChild extends React.Component {
255256 }
256257}
257258
258−export default compose(withNetwork)(IssueChild);
259+export default compose(
260+ withNetwork,
261+ withPointCursor
262+)(IssueChild);
src/bridge/views/Point.js+7−7
@@ -14,6 +14,8 @@ import { withHistory } from '../store/history';
1414import { withNetwork } from '../store/network';
1515import { compose } from '../lib/lib';
1616import { withWallet } from '../store/wallet';
17+import { withPointCursor } from '../store/pointCursor';
18+import { withPointCache } from '../store/pointCache';
1719
1820class Point extends React.Component {
1921 constructor(props) {
@@ -77,7 +79,7 @@ class Point extends React.Component {
7779 };
7880
7981 render() {
80− const { web3, history, wallet, setPointCursor, pointCache } = this.props;
82+ const { web3, history, wallet, pointCache } = this.props;
8183
8284 const { spawned } = this.state;
8385
@@ -105,11 +107,7 @@ class Point extends React.Component {
105107 <div>
106108 <H3>{'Issued Points'}</H3>
107109
108− <PointList
109− setPointCursor={setPointCursor}
110− routeHandler={history.popAndPush}
111− points={spawned}
112− />
110+ <PointList routeHandler={history.popAndPush} points={spawned} />
113111 </div>
114112 );
115113
@@ -140,5 +138,7 @@ class Point extends React.Component {
140138export default compose(
141139 withNetwork,
142140 withHistory,
143− withWallet
141+ withWallet,
142+ withPointCursor,
143+ withPointCache
144144)(Point);
src/bridge/views/Points.js+3−1
@@ -11,6 +11,7 @@ import { ETH_ZERO_ADDR, eqAddr } from '../lib/wallet';
1111import { withNetwork } from '../store/network';
1212import { compose } from '../lib/lib';
1313import { withWallet } from '../store/wallet';
14+import { withPointCache } from '../store/pointCache';
1415
1516const hasTransferProxy = (cache, point) =>
1617 point in cache ? !eqAddr(cache[point].transferProxy, ETH_ZERO_ADDR) : false;
@@ -260,5 +261,6 @@ class Points extends React.Component {
260261export default compose(
261262 withNetwork,
262263 withHistory,
263− withWallet
264+ withWallet,
265+ withPointCache
264266)(Points);
src/bridge/views/SentTransaction.js+2−1
@@ -10,6 +10,7 @@ import { BRIDGE_ERROR, renderTxnError } from '../lib/error';
1010import { NETWORK_TYPES } from '../lib/network';
1111import { useTxnConfirmations } from '../store/txnConfirmations';
1212import { useNetwork } from '../store/network';
13+import { usePointCursor } from '../store/pointCursor';
1314
1415class Success extends React.Component {
1516 constructor(props) {
@@ -113,10 +114,10 @@ const Failure = props => (
113114function SentTransaction(props) {
114115 const history = useHistory();
115116 const { txnConfirmations } = useTxnConfirmations();
117+ const { setPointCursor, pointCursor } = usePointCursor();
116118 const { web3 } = useNetwork();
117119
118120 const { txnHashCursor, networkType } = props;
119− const { setPointCursor, pointCursor } = props;
120121
121122 const promptKeyfile = history.data && history.data.promptKeyfile;
122123
src/bridge/views/SetKeys.js+5−1
@@ -14,6 +14,8 @@ import { compose } from '../lib/lib';
1414
1515import { withNetwork } from '../store/network';
1616import { withWallet } from '../store/wallet';
17+import { withPointCursor } from '../store/pointCursor';
18+import { withPointCache } from '../store/pointCache';
1719
1820class SetKeys extends React.Component {
1921 constructor(props) {
@@ -201,5 +203,7 @@ class SetKeys extends React.Component {
201203
202204export default compose(
203205 withNetwork,
204− withWallet
206+ withWallet,
207+ withPointCursor,
208+ withPointCache
205209)(SetKeys);
src/bridge/views/SetProxy.js+5−1
@@ -24,6 +24,7 @@ import StatelessTransaction from '../components/StatelessTransaction';
2424import { isValidAddress } from '../lib/wallet';
2525import { withNetwork } from '../store/network';
2626import { compose } from '../lib/lib';
27+import { withPointCursor } from '../store/pointCursor';
2728
2829class _SetProxy extends React.Component {
2930 constructor(props) {
@@ -169,7 +170,10 @@ class _SetProxy extends React.Component {
169170 }
170171}
171172
172−const SetProxy = compose(withNetwork)(_SetProxy);
173+const SetProxy = compose(
174+ withNetwork,
175+ withPointCursor
176+)(_SetProxy);
173177
174178export const SetManagementProxy = props => (
175179 <SetProxy {...props} proxyType={PROXY_TYPE.MANAGEMENT_PROXY} />
src/bridge/views/Transfer.js+5−1
@@ -21,6 +21,7 @@ import { NETWORK_TYPES } from '../lib/network';
2121import { isValidAddress } from '../lib/wallet';
2222import { withNetwork } from '../store/network';
2323import { compose } from '../lib/lib';
24+import { withPointCursor } from '../store/pointCursor';
2425
2526class Transfer extends React.Component {
2627 constructor(props) {
@@ -132,4 +133,7 @@ class Transfer extends React.Component {
132133 }
133134}
134135
135−export default compose(withNetwork)(Transfer);
136+export default compose(
137+ withNetwork,
138+ withPointCursor
139+)(Transfer);
src/bridge/views/ViewPoint.js+5−1
@@ -9,6 +9,7 @@ import { InnerLabel, PointInput, ValidatedSigil } from '../components/Base';
99import { ROUTE_NAMES } from '../lib/routeNames';
1010import { withHistory } from '../store/history';
1111import { compose } from '../lib/lib';
12+import { withPointCursor } from '../store/pointCursor';
1213
1314class ViewPoint extends React.Component {
1415 constructor(props) {
@@ -81,4 +82,7 @@ class ViewPoint extends React.Component {
8182 }
8283}
8384
84−export default compose(withHistory)(ViewPoint);
85+export default compose(
86+ withHistory,
87+ withPointCursor
88+)(ViewPoint);