b529677 · bridge · git.iko.soy

git.iko.soy/bridge

fix: synchronous local storage writes

commitb529677b42daf28299401feb15d85968cf15baeb authorMatt Condon (shrugs) <mattgcondon@gmail.com> dateTue 23 Jul 2019, 13:34 (7 years ago) parentcd30e5f

3 files changed+38−23

compare with master

unifiedsplit

src/lib/useLocalStorageState.js+15−10 src/views/Disclaimer.js+2−2 src/views/Point.js+21−11

src/lib/useLocalStorageState.js+15−10

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

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

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

33/**

44 * useLocalStorageState is useState but it persists to localStorage

@@ -8,7 +8,7 @@ import { useState, useEffect } from 'react';

88 * https://usehooks.com/useLocalStorage/

99 */

1010export default function useLocalStorageState(key, initialValue) {

11− const [state, setState] = useState(() => {

11+ const [state, _setState] = useState(() => {

1212 try {

1313 const value = localStorage.getItem(key);

1414 if (value === null) {

@@ -25,14 +25,19 @@ export default function useLocalStorageState(key, initialValue) {

2525 }

2626 });

2727

28− useEffect(() => {

29− try {

30− localStorage.setItem(key, JSON.stringify(state));

31− } catch {

32− // if user is in private mode or has storage restriction

33− // localStorage can throw. Also JSON.stringify can throw.

34− }

35− }, [key, state]);

28+ const setState = useCallback(

29+ value => {

30+ try {

31+ localStorage.setItem(key, JSON.stringify(value));

32+ } catch {

33+ // if user is in private mode or has storage restriction

34+ // localStorage can throw. Also JSON.stringify can throw.

35+ }

36+

37+ _setState(value);

38+ },

39+ [key]

40+ );

3641

3742 return [state, setState];

3843}

src/views/Disclaimer.js+2−2

@@ -20,7 +20,7 @@ export default function ActivateDisclaimer() {

2020 label: 'I acknowledge and understand these rights',

2121 });

2222

23− const goToPassport = useCallback(() => {

23+ const goBack = useCallback(async () => {

2424 setHasDisclaimed(true);

2525 pop();

2626 }, [pop, setHasDisclaimed]);

@@ -80,7 +80,7 @@ export default function ActivateDisclaimer() {

8080 <Grid.Item

8181 as={ForwardButton}

8282 disabled={!isUnderstood}

83− onClick={goToPassport}

83+ onClick={goBack}

8484 solid

8585 full>

8686 Continue

src/views/Point.js+21−11

@@ -10,7 +10,6 @@ import { useHistory } from 'store/history';

1010import View from 'components/View';

1111import Passport from 'components/Passport';

1212import { ForwardButton, BootArvoButton } from 'components/Buttons';

13−import FooterButton from 'components/FooterButton';

1413import { matchBlinky } from 'components/Blinky';

1514

1615import useInvites from 'lib/useInvites';

@@ -52,18 +51,30 @@ export default function Point() {

5251 case azimuth.PointSize.Planet:

5352 const availableInvitesText = matchBlinky(availableInvites);

5453 return (

55− <FooterButton disabled={!isActiveOwner} onClick={goInvite}>

56− Invite <sup>{availableInvitesText}</sup>

57− </FooterButton>

54+ <>

55+ <Grid.Item

56+ full

57+ as={ForwardButton}

58+ disabled={!isActiveOwner}

59+ onClick={goInvite}>

60+ Invite <sup>{availableInvitesText}</sup>

61+ </Grid.Item>

62+ <Grid.Divider />

63+ </>

5864 );

5965 //

6066 case azimuth.PointSize.Star:

6167 return (

62− <FooterButton

63− disabled={!isActiveOwner}

64− onClick={goPartiesSetPoolSize}>

65− Manage Parties

66− </FooterButton>

68+ <>

69+ <Grid.Item

70+ full

71+ as={ForwardButton}

72+ disabled={!isActiveOwner}

73+ onClick={goPartiesSetPoolSize}>

74+ Manage Parties

75+ </Grid.Item>

76+ <Grid.Divider />

77+ </>

6778 );

6879 //

6980 default:

@@ -78,6 +89,7 @@ export default function Point() {

7889 <View>

7990 <Passport point={Just(point)} />

8091 <Grid className="pt2">

92+ {inviteButton}

8193 <Grid.Item

8294 full

8395 as={ForwardButton}

@@ -100,8 +112,6 @@ export default function Point() {

100112 )}

101113 <Grid.Item full as={BootArvoButton} disabled />

102114 </Grid>

103−

104− {inviteButton}

105115 </View>

106116 );

107117}