git.iko.soy/bridge
on 63a4aea help sign in
bridge/src/views/ViewPoint.js
68 lines 1.8 kB history raw
1import React, { useCallback, useState } from 'react';
2import Maybe from 'folktale/maybe';
3import * as ob from 'urbit-ob';
5import { H1, P } from '../components/old/Base';
7import { useHistory } from 'store/history';
8import { usePointCursor } from 'store/pointCursor';
10import { ROUTE_NAMES } from 'lib/routeNames';
12import View from 'components/View';
13import { ForwardButton } from 'components/Buttons';
14import { PointInput } from 'components/Inputs';
15import InputSigil from 'components/InputSigil';
17export default function ViewPoint() {
18 const history = useHistory();
19 const { setPointCursor } = usePointCursor();
20 const [pointName, setPointName] = useState('');
21 const [pass, setPass] = useState(false);
22 const [error, setError] = useState();
23 const [focused, setFocused] = useState(true);
25 const disabled = !pass;
26 const goForward = useCallback(() => {
27 setPointCursor(Maybe.Just(parseInt(ob.patp2dec(pointName), 10)));
28 // ^ pointCursor expects native number type, not string
29 history.popAndPush(ROUTE_NAMES.POINT);
30 }, [setPointCursor, history, pointName]);
32 return (
33 <View>
34 <H1>View a Point</H1>
36 <P>Enter a point name to view its public information.</P>
38 <PointInput
39 name="point"
40 label="Point Name"
41 onValue={setPointName}
42 onPass={setPass}
43 onError={setError}
44 onFocus={setFocused}
45 onEnter={goForward}
46 accessory={
47 <InputSigil
48 patp={pointName}
49 size={68}
50 margin={8}
51 pass={pass}
52 focused={focused}
53 error={error}
54 />
55 }
56 autoFocus
57 />
59 <ForwardButton
60 className="mt3"
61 disabled={disabled}
62 onClick={goForward}
63 solid>
64 Continue
65 </ForwardButton>
66 </View>
67 );