f899a56 · bridge · git.iko.soy

git.iko.soy/bridge

on master help sign in

dx: extract Hosting from Bridge.js to component

f899a56tomholford5 years ago

src/views/UrbitOS/Home.js+3−195

compare with master

unifiedsplit

@@ -1,28 +1,17 @@

1−import React, { useCallback, useState, useEffect, useMemo } from 'react';

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

2−import cn from 'classnames';

3−import { Grid, Button, SelectInput, Flex } from 'indigo-react';

2+import { Grid } from 'indigo-react';

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

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

5import { azimuth } from 'azimuth-js';

4import { azimuth } from 'azimuth-js';

7import { usePointCursor } from 'store/pointCursor';

6import { usePointCursor } from 'store/pointCursor';

8import { usePointCache } from 'store/pointCache';

7import { usePointCache } from 'store/pointCache';

10−import useCurrentPointName from 'lib/useCurrentPointName';

11−import useKeyfileGenerator from 'lib/useKeyfileGenerator';

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

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

14−import { OutButton, ForwardButton } from 'components/Buttons';

11+import { ForwardButton } from 'components/Buttons';

15−import { CopyButtonWide } from 'components/CopyButton';

16import NetworkingKeys from 'components/NetworkingKeys';

12import NetworkingKeys from 'components/NetworkingKeys';

17−import ProgressButton from 'components/ProgressButton';

18−import LoginButton from 'components/LoginButton';

20−import BridgeForm from 'form/BridgeForm';

21import { useLocalRouter } from 'lib/LocalRouter';

14import { useLocalRouter } from 'lib/LocalRouter';

22−import { useHosting } from 'store/hosting';

23−import DownloadKeyfileButton from 'components/DownloadKeyfileButton';

24−import useLifecycle from 'lib/useLifecycle';

25−import useLocalHosting from 'lib/useLocalHosting';

27export default function UrbitOSHome({ manualNetworkSeed }) {

16export default function UrbitOSHome({ manualNetworkSeed }) {

28 const { pointCursor } = usePointCursor();

17 const { pointCursor } = usePointCursor();

@@ -51,8 +40,6 @@ export default function UrbitOSHome({ manualNetworkSeed }) {

51 ]);

40 ]);

52 return (

41 return (

53 <>

42 <>

54− <Hosting manualNetworkSeed={manualNetworkSeed} />

55−

56 <Grid>

43 <Grid>

57 <Grid.Item full className="mv7 f5">

44 <Grid.Item full className="mv7 f5">

58 Network

45 Network

@@ -89,182 +76,3 @@ export default function UrbitOSHome({ manualNetworkSeed }) {

89 </>

76 </>

90 );

77 );

91}

78}

92−

93−// eslint-disable-next-line

94−function Hosting({ manualNetworkSeed }) {

95− const bind = useKeyfileGenerator(manualNetworkSeed);

96− const { keyfile, code } = bind;

97− const ship = useHosting();

98−

99− const {

100− syncStatus,

101− url,

102− unknown,

103− bootProgress,

104− bootMessage,

105− disabled,

106− } = ship;

107−

108− const { running: localRunning, url: localUrl } = useLocalHosting();

109−

110− let running = useMemo(() => localRunning || ship.running, [

111− ship,

112− localRunning,

113− ]);

114−

115− useLifecycle(() => {

116− syncStatus();

117− });

118−

119− const createShip = useCallback(() => ship.create(keyfile), [keyfile, ship]);

120−

121− const name = useCurrentPointName();

122− const options = [{ text: 'Tlon', value: 'tlon' }];

123−

124− const renderMain = useCallback(() => {

125− if (localRunning) {

126− return (

127− <Grid.Item

128− full

129− as={LoginButton}

130− solid

131− success

132− url={localUrl}

133− code={code}>

134− Open OS

135− </Grid.Item>

136− );

137− }

138− if (ship.running) {

139− return (

140− <>

141− <Grid.Item

142− cols={[1, 9]}

143− as={LoginButton}

144− solid

145− success

146− url={url}

147− code={code}>

148− Open OS

149− </Grid.Item>

150− {/* Unsupported for now */}

151− {/* <Grid.Item cols={[9, 13]} as={Button} className="b-black b1" center> */}

152− {/* Disconnect */}

153− {/* </Grid.Item> */}

154− </>

155− );

156− }

157− if (ship.missing) {

158− return (

159− <Grid.Item

160− full

161− as={ForwardButton}

162− solid

163− disabled={!keyfile}

164− onClick={createShip}>

165− Connect

166− </Grid.Item>

167− );

168− }

169− if (ship.pending) {

170− return (

171− <Grid.Item

172− full

173− as={ProgressButton}

174− success

175− disabled

176− progress={bootProgress}>

177− {bootMessage || 'Connecting'}

178− </Grid.Item>

179− );

180− }

181− }, [

182− localRunning,

183− ship.running,

184− ship.missing,

185− ship.pending,

186− localUrl,

187− code,

188− url,

189− keyfile,

190− createShip,

191− bootProgress,

192− bootMessage,

193− ]);

194−

195− const renderDetails = useCallback(() => {

196− if (ship.running) {

197− return (

198− <>

199− <Grid.Item cols={[1, 9]} className="gray4">

200− <span className="mono">{name}</span> is connected to Tlon

201− </Grid.Item>

202− </>

203− );

204− }

205− if (!keyfile && ship.missing) {

206− return (

207− <Grid.Item full className="gray4">

208− Please reset your networking keys in order to use hosting

209− </Grid.Item>

210− );

211− }

212− }, [name, ship, keyfile]);

213−

214− return (

215− <>

216− {disabled && (

217− <Grid gap={4}>

218− <Grid.Item full className="f5">

219− Urbit OS

220− </Grid.Item>

221− <Grid.Divider />

222− </Grid>

223− )}

224− {!disabled && (

225− <Grid gap={4}>

226− <Grid.Item full className="f5" as={Flex}>

227− <Flex.Item>Urbit OS </Flex.Item>

228− <Flex.Item

229− className={cn({ green3: running, gray4: !running }, 'ml3')}>

230− {running ? 'Connected' : 'Disconnected'}

231− </Flex.Item>

232− </Grid.Item>

233− <BridgeForm initialValues={{ provider: 'tlon' }}>

234− {() => (

235− <>

236− {renderDetails()}

237− {renderMain()}

238− {!localRunning && (

239− <Grid.Item

240− full

241− as={SelectInput}

242− name="provider"

243− label="Host Provider"

244− options={options}

245− disabled

246− />

247− )}

248− </>

249− )}

250− </BridgeForm>

251− </Grid>

252− )}

253− <Grid>

254− <Grid.Item

255− full

256− as={DownloadKeyfileButton}

257− {...bind}

258− className="mt2"

259− detail="A keyfile authenticates your Urbit ID to Urbit OS"

260− />

261− <Grid.Divider />

262− {code && (

263− <Grid.Item full className="mt2" as={CopyButtonWide} text={code}>

264− Login Code

265− </Grid.Item>

266− )}

267− </Grid>

268− </>

269− );

270−}

src/views/UrbitOS/Hosting.tsxnew file+192

@@ -0,0 +1,192 @@

1+import { useCallback, useMemo } from 'react';

2+import { Grid, SelectInput, Flex } from 'indigo-react';

4+import { CopyButtonWide } from 'components/CopyButton';

5+import { ForwardButton } from 'components/Buttons';

6+import { useHosting } from 'store/hosting';

7+import DownloadKeyfileButton from 'components/DownloadKeyfileButton';

8+import LoginButton from 'components/LoginButton';

9+import ProgressButton from 'components/ProgressButton';

10+import useCurrentPointName from 'lib/useCurrentPointName';

11+import useKeyfileGenerator from 'lib/useKeyfileGenerator';

12+import useLifecycle from 'lib/useLifecycle';

13+import useLocalHosting from 'lib/useLocalHosting';

14+import BridgeForm from 'form/BridgeForm';

15+

16+export function Hosting({ manualNetworkSeed }) {

17+ const bind = useKeyfileGenerator(manualNetworkSeed);

18+ const { keyfile, code } = bind;

19+ const ship = useHosting();

20+

21+ const {

22+ syncStatus,

23+ url,

24+ unknown,

25+ bootProgress,

26+ bootMessage,

27+ disabled,

28+ } = ship;

29+

30+ const { running: localRunning, url: localUrl } = useLocalHosting();

31+

32+ let running = useMemo(() => localRunning || ship.running, [

33+ ship,

34+ localRunning,

35+ ]);

36+

37+ useLifecycle(() => {

38+ syncStatus();

39+ });

40+

41+ const createShip = useCallback(() => ship.create(keyfile), [keyfile, ship]);

42+

43+ const name = useCurrentPointName();

44+ const options = [{ text: 'Tlon', value: 'tlon' }];

45+

46+ const renderMain = useCallback(() => {

47+ if (localRunning) {

48+ return (

49+ <Grid.Item

50+ full

51+ as={LoginButton}

52+ solid

53+ success

54+ url={localUrl}

55+ code={code}>

56+ Open OS

57+ </Grid.Item>

58+ );

59+ }

60+ if (ship.running) {

61+ return (

62+ <>

63+ <Grid.Item

64+ cols={[1, 9]}

65+ as={LoginButton}

66+ solid

67+ success

68+ url={url}

69+ code={code}>

70+ Open OS

71+ </Grid.Item>

72+ {/* Unsupported for now */}

73+ {/* <Grid.Item cols={[9, 13]} as={Button} className="b-black b1" center> */}

74+ {/* Disconnect */}

75+ {/* </Grid.Item> */}

76+ </>

77+ );

78+ }

79+ if (ship.missing) {

80+ return (

81+ <Grid.Item

82+ full

83+ as={ForwardButton}

84+ solid

85+ disabled={!keyfile}

86+ onClick={createShip}>

87+ Connect

88+ </Grid.Item>

89+ );

90+ }

91+ if (ship.pending) {

92+ return (

93+ <Grid.Item

94+ full

95+ as={ProgressButton}

96+ success

97+ disabled

98+ progress={bootProgress}>

99+ {bootMessage || 'Connecting'}

100+ </Grid.Item>

101+ );

102+ }

103+ }, [

104+ localRunning,

105+ ship.running,

106+ ship.missing,

107+ ship.pending,

108+ localUrl,

109+ code,

110+ url,

111+ keyfile,

112+ createShip,

113+ bootProgress,

114+ bootMessage,

115+ ]);

116+

117+ const renderDetails = useCallback(() => {

118+ if (ship.running) {

119+ return (

120+ <>

121+ <Grid.Item cols={[1, 9]} className="gray4">

122+ <span className="mono">{name}</span> is connected to Tlon

123+ </Grid.Item>

124+ </>

125+ );

126+ }

127+ if (!keyfile && ship.missing) {

128+ return (

129+ <Grid.Item full className="gray4">

130+ Please reset your networking keys in order to use hosting

131+ </Grid.Item>

132+ );

133+ }

134+ }, [name, ship, keyfile]);

135+

136+ return (

137+ <>

138+ {disabled && (

139+ <Grid gap={4}>

140+ <Grid.Item full className="f5">

141+ Urbit OS

142+ </Grid.Item>

143+ <Grid.Divider />

144+ </Grid>

145+ )}

146+ {!disabled && (

147+ <Grid gap={4}>

148+ <Grid.Item full className="f5" as={Flex}>

149+ <Flex.Item>Urbit OS </Flex.Item>

150+ <Flex.Item

151+ className={cn({ green3: running, gray4: !running }, 'ml3')}>

152+ {running ? 'Connected' : 'Disconnected'}

153+ </Flex.Item>

154+ </Grid.Item>

155+ <BridgeForm initialValues={{ provider: 'tlon' }}>

156+ {() => (

157+ <>

158+ {renderDetails()}

159+ {renderMain()}

160+ {!localRunning && (

161+ <Grid.Item

162+ full

163+ as={SelectInput}

164+ name="provider"

165+ label="Host Provider"

166+ options={options}

167+ disabled

168+ />

169+ )}

170+ </>

171+ )}

172+ </BridgeForm>

173+ </Grid>

174+ )}

175+ <Grid>

176+ <Grid.Item

177+ full

178+ as={DownloadKeyfileButton}

179+ {...bind}

180+ className="mt2"

181+ detail="A keyfile authenticates your Urbit ID to Urbit OS"

182+ />

183+ <Grid.Divider />

184+ {code && (

185+ <Grid.Item full className="mt2" as={CopyButtonWide} text={code}>

186+ Login Code

187+ </Grid.Item>

188+ )}

189+ </Grid>

190+ </>

191+ );

192+}