f1ff0cf · bridge · git.iko.soy

git.iko.soy/bridge

feat: standardize input accessory and put input sigil into usePointInput

commitf1ff0cf1cab705644e883dd614e8b8a854ea8be3 authorMatt Condon (shrugs) <mattgcondon@gmail.com> dateWed 26 Jun 2019, 15:27 (7 years ago) parent5d56e24

7 files changed+76−77

compare with master

unifiedsplit

src/components/Inputs.js+20−31 src/indigo-react/components/AccessoryIcon.js+32 src/indigo-react/index.js+1 src/views/Invite/InviteEmail.js+6−17 src/views/Login/Ticket.js+5−5 src/views/Point.js+10−4 src/views/ViewPoint.js+2−20

src/components/Inputs.js+20−31

@@ -1,5 +1,4 @@

1−import React from 'react';

2−import { Input } from 'indigo-react';

1+import React, { useState } from 'react';

32import * as bip39 from 'bip39';

54import InputSigil from 'components/InputSigil';

@@ -85,34 +84,6 @@ export function useHdPathInput(props) {

8584// transformers: [prependSig],

8685// });

8786

88−export function PointInput(props) {

89− const input = usePointInput({

90− name: 'point',

91− label: 'Point Name',

92− autoFocus: true,

93− });

94− const { data: validPointName, pass, focused, error } = input;

95−

96− return (

97− <Input

98− {...props}

99− {...input}

100− accessory={

101− validPointName && (

102− <InputSigil

103− patp={validPointName}

104− size={68}

105− margin={8}

106− pass={pass}

107− focused={focused}

108− error={error}

109− />

110− )

111− }

112− />

113− );

114−}

115−

11687const kTicketValidators = [validateTicket, validateNotEmpty];

11788const kTicketTransformers = [prependSig];

11889//TODO needs to be fancier, displaying sig and dashes instead of •ing all

@@ -135,7 +106,8 @@ export function useTicketInput({ initialValue = '~', ...rest }) {

135106const kPointValidators = [validatePoint, validateNotEmpty];

136107const kPointTransformers = [prependSig];

137108export function usePointInput({ initialValue = '~', ...rest }) {

138− return firstOf(

109+ const [lastValidPoint, setLastValidPoint] = useState('');

110+ const input = firstOf(

139111 useForm([

140112 {

141113 type: 'text',

@@ -144,10 +116,27 @@ export function usePointInput({ initialValue = '~', ...rest }) {

144116 transformers: kPointTransformers,

145117 mono: true,

146118 initialValue,

119+ onValue: setLastValidPoint,

147120 ...rest,

148121 },

149122 ])

150123 );

124+

125+ const { pass, focused, error } = input;

126+

127+ return {

128+ ...input,

129+ accessory: lastValidPoint && (

130+ <InputSigil

131+ patp={lastValidPoint}

132+ size={68}

133+ margin={8}

134+ pass={pass}

135+ focused={focused}

136+ error={error}

137+ />

138+ ),

139+ };

151140}

152141

153142const kEmailValidators = [validateEmail, validateNotEmpty];

src/indigo-react/components/AccessoryIcon.jsnew file+32

@@ -0,0 +1,32 @@

1+import React from 'react';

3+import Flex from './Flex';

5+const kPendingAccessory = '⋯';

6+const kSuccessAccessory = '✔';

7+const kFailureAccessory = '×';

9+function AccessoryIcon({ ...props }) {

10+ return (

11+ <Flex

12+ justify="center"

13+ align="center"

14+ style={{ height: '100%', width: '100%' }}

15+ {...props}

16+ />

17+ );

18+}

19+

20+AccessoryIcon.Pending = () => (

21+ <AccessoryIcon>{kPendingAccessory}</AccessoryIcon>

22+);

23+

24+AccessoryIcon.Success = () => (

25+ <AccessoryIcon>{kSuccessAccessory}</AccessoryIcon>

26+);

27+

28+AccessoryIcon.Failure = () => (

29+ <AccessoryIcon>{kFailureAccessory}</AccessoryIcon>

30+);

31+

32+export default AccessoryIcon;

src/indigo-react/index.js+1

@@ -2,6 +2,7 @@ export { default as IndigoApp } from './components/IndigoApp';

22export { default as Grid } from './components/Grid';

33export { default as Flex } from './components/Flex';

44export { default as Input } from './components/Input';

5+export { default as AccessoryIcon } from './components/AccessoryIcon';

56export { default as Button } from './components/Button';

67export { default as IconButton } from './components/IconButton';

src/views/Invite/InviteEmail.js+6−17

@@ -10,6 +10,7 @@ import {

1010 HelpText,

1111 Text,

1212 ErrorText,

13+ AccessoryIcon,

1314} from 'indigo-react';

1415import { uniq } from 'lodash';

1516

@@ -42,7 +43,6 @@ import { useWallet } from 'store/wallet';

4243import useSetState from 'lib/useSetState';

4344import pluralize from 'lib/pluralize';

4445import useMailer from 'lib/useMailer';

45−import useRenderCount from 'lib/useRenderCount';

4646

4747const GAS_PRICE_GWEI = 20; // we pay the premium for faster ux

4848const GAS_LIMIT = 400000;

@@ -78,10 +78,6 @@ const buttonText = (status, count) => {

7878 }

7979};

8080

81−const kPendingAccessory = '⋯';

82−const kSuccessAccessory = '✔';

83−const kFailureAccessory = '×';

84−

8581// world's simplest uid

8682let id = 0;

8783const buildInputConfig = (extra = {}) =>

@@ -91,18 +87,11 @@ const buildInputConfig = (extra = {}) =>

9187 ...extra,

9288 });

9389

94−const buildAccessoryFor = (dones, errors) => name => (

95− <Flex

96− justify="center"

97− align="center"

98− style={{ height: '100%', width: '100%' }}>

99− {(() => {

100− if (dones[name]) return kSuccessAccessory;

101− if (errors[name]) return kFailureAccessory;

102− return kPendingAccessory;

103− })()}

104− </Flex>

105−);

90+const buildAccessoryFor = (dones, errors) => name => {

91+ if (dones[name]) return <AccessoryIcon.Success />;

92+ if (errors[name]) return <AccessoryIcon.Failure />;

93+ return <AccessoryIcon.Pending />;

94+};

10695

10796// TODO: test with tank, successful txs

10897export default function InviteEmail() {

src/views/Login/Ticket.js+5−5

@@ -2,7 +2,7 @@ import { Just, Nothing } from 'folktale/maybe';

22import React, { useCallback, useState, useEffect } from 'react';

33import * as azimuth from 'azimuth-js';

44import * as ob from 'urbit-ob';

5−import { Input } from 'indigo-react';

5+import { Input, AccessoryIcon } from 'indigo-react';

77import View from 'components/View';

88import {

@@ -112,13 +112,13 @@ export default function Ticket({ advanced, loginCompleted }) {

112112 Just: status => {

113113 switch (status.value) {

114114 case INPUT_STATUS.SPIN:

115− return <span>⋯</span>;

115+ return <AccessoryIcon.Pending />;

116116 case INPUT_STATUS.GOOD:

117− return <span>✓</span>;

117+ return <AccessoryIcon.Success />;

118118 case INPUT_STATUS.FAIL:

119− return <span>𐄂</span>;

119+ return <AccessoryIcon.Failure />;

120120 default:

121− throw new Error('weird input status ' + status.value);

121+ return null;

122122 }

123123 },

124124 });

src/views/Point.js+10−4

@@ -1,4 +1,5 @@

11import React, { useCallback } from 'react';

2+import Maybe from 'folktale/maybe';

23import * as need from 'lib/need';

34import { Grid } from 'indigo-react';

@@ -16,11 +17,12 @@ import { useSyncOwnedPoints } from 'lib/useSyncPoints';

1617import { ROUTE_NAMES } from 'lib/routeNames';

1718

1819import Actions from './Point/Actions';

20+import { useWallet } from 'store/wallet';

1921

2022export default function Point() {

2123 const history = useHistory();

2224 const { pointCursor } = usePointCursor();

23− // const { pointCache } = usePointCache();

25+ const { wallet } = useWallet();

2426

2527 const point = need.pointCursor(pointCursor);

2628

@@ -28,6 +30,8 @@ export default function Point() {

2830 const { availableInvites } = useInvites(point);

2931 const availableInvitesText = matchBlinky(availableInvites);

3032

33+ const showActions = Maybe.Just.hasInstance(wallet);

34+

3135 const goInvite = useCallback(() => history.push(ROUTE_NAMES.INVITE), [

3236 history,

3337 ]);

@@ -48,9 +52,11 @@ export default function Point() {

4852 Boot Arvo

4953 </ForwardButton>

5054 </Grid.Item>

51− <Grid.Item full>

52− <Actions />

53− </Grid.Item>

55+ {showActions && (

56+ <Grid.Item full>

57+ <Actions />

58+ </Grid.Item>

59+ )}

5460 </Grid>

5561

5662 <FooterButton onClick={goInvite}>

src/views/ViewPoint.js+2−20

@@ -13,19 +13,16 @@ import { ROUTE_NAMES } from 'lib/routeNames';

1313import View from 'components/View';

1414import { ForwardButton } from 'components/Buttons';

1515import { usePointInput } from 'components/Inputs';

16−import InputSigil from 'components/InputSigil';

1716

1817export default function ViewPoint() {

1918 const history = useHistory();

2019 const { setPointCursor } = usePointCursor();

21− const [lastValidPoint, setLastValidPoint] = useState('');

2220 const pointInput = usePointInput({

2321 name: 'point',

2422 label: 'Point Name',

2523 autoFocus: true,

26− onValue: setLastValidPoint,

2724 });

28− const { data: pointName, pass, error, focused } = pointInput;

25+ const { data: pointName, pass } = pointInput;

2926

3027 const disabled = !pass;

3128 const goForward = useCallback(() => {

@@ -40,22 +37,7 @@ export default function ViewPoint() {

4037

4138 <P>Enter a point name to view its public information.</P>

4239

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− />

40+ <Input {...pointInput} onEnter={goForward} />

5941

6042 <ForwardButton

6143 className="mt3"