git.iko.soy/bridge
on 04765bb help sign in
bridge/src/views/ViewPoint.js
69 lines 1.9 kB history raw
1import React, { useCallback, useState } from 'react';
2import Maybe from 'folktale/maybe';
3import * as ob from 'urbit-ob';
4import { Input } from 'indigo-react';
6import { H1, P } from '../components/old/Base';
8import { useHistory } from 'store/history';
9import { usePointCursor } from 'store/pointCursor';
11import { ROUTE_NAMES } from 'lib/routeNames';
13import View from 'components/View';
14import { ForwardButton } from 'components/Buttons';
15import { usePointInput } from 'components/Inputs';
16import InputSigil from 'components/InputSigil';
18export default function ViewPoint() {
19 const history = useHistory();
20 const { setPointCursor } = usePointCursor();
21 const [lastValidPoint, setLastValidPoint] = useState('');
22 const pointInput = usePointInput({
23 name: 'point',
24 label: 'Point Name',
25 autoFocus: true,
26 onValue: setLastValidPoint,
27 });
28 const { data: pointName, pass, error, focused } = pointInput;
30 const disabled = !pass;
31 const goForward = useCallback(() => {
32 setPointCursor(Maybe.Just(parseInt(ob.patp2dec(pointName), 10)));
33 // ^ pointCursor expects native number type, not string
34 history.popAndPush(ROUTE_NAMES.POINT);
35 }, [setPointCursor, history, pointName]);
37 return (
38 <View>
39 <H1>View a Point</H1>
41 <P>Enter a point name to view its public information.</P>
43 <Input
44 {...pointInput}
45 onEnter={goForward}
46 accessory={
47 lastValidPoint && (
48 <InputSigil
49 patp={lastValidPoint}
50 size={68}
51 margin={8}
52 pass={pass}
53 focused={focused}
54 error={error}
55 />
56 )
57 }
58 />
60 <ForwardButton
61 className="mt3"
62 disabled={disabled}
63 onClick={goForward}
64 solid>
65 Continue
66 </ForwardButton>
67 </View>
68 );