b529677 · bridge · git.iko.soy

git.iko.soy/bridge

on master help sign in

fix: synchronous local storage writes

b529677Matt Condon (shrugs)7 years ago

src/lib/useLocalStorageState.js+15−10

compare with master

unifiedsplit

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

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

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

3/**

4 * useLocalStorageState is useState but it persists to localStorage

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

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

9 */

10export default function useLocalStorageState(key, initialValue) {

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

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

12 try {

13 const value = localStorage.getItem(key);

14 if (value === null) {

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

25 }

26 });

28− useEffect(() => {

28+ const setState = useCallback(

29+ value => {

29− try {

30+ try {

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

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

31− } catch {

32+ } catch {

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

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

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

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

34− }

35+ }

36+

37+ _setState(value);

38+ },

35− }, [key, state]);

39+ [key]

40+ );

37 return [state, setState];

42 return [state, setState];

38}

43}

src/views/Disclaimer.js+2−2

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

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

21 });

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

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

24 setHasDisclaimed(true);

25 pop();

26 }, [pop, setHasDisclaimed]);

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

80 <Grid.Item

81 as={ForwardButton}

82 disabled={!isUnderstood}

83− onClick={goToPassport}

83+ onClick={goBack}

84 solid

85 full>

86 Continue

src/views/Point.js+21−11

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

10import View from 'components/View';

11import Passport from 'components/Passport';

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

13−import FooterButton from 'components/FooterButton';

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

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

16import useInvites from 'lib/useInvites';

15import useInvites from 'lib/useInvites';

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

52 case azimuth.PointSize.Planet:

51 case azimuth.PointSize.Planet:

53 const availableInvitesText = matchBlinky(availableInvites);

52 const availableInvitesText = matchBlinky(availableInvites);

54 return (

53 return (

54+ <>

55+ <Grid.Item

56+ full

57+ as={ForwardButton}

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

58+ disabled={!isActiveOwner}

59+ onClick={goInvite}>

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

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

57− </FooterButton>

61+ </Grid.Item>

62+ <Grid.Divider />

63+ </>

58 );

64 );

59 //

65 //

60 case azimuth.PointSize.Star:

66 case azimuth.PointSize.Star:

61 return (

67 return (

62− <FooterButton

68+ <>

69+ <Grid.Item

70+ full

71+ as={ForwardButton}

63− disabled={!isActiveOwner}

72+ disabled={!isActiveOwner}

64− onClick={goPartiesSetPoolSize}>

73+ onClick={goPartiesSetPoolSize}>

65− Manage Parties

74+ Manage Parties

66− </FooterButton>

75+ </Grid.Item>

76+ <Grid.Divider />

77+ </>

67 );

78 );

68 //

79 //

69 default:

80 default:

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

78 <View>

89 <View>

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

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

80 <Grid className="pt2">

91 <Grid className="pt2">

92+ {inviteButton}

81 <Grid.Item

93 <Grid.Item

82 full

94 full

83 as={ForwardButton}

95 as={ForwardButton}

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

100 )}

112 )}

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

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

102 </Grid>

114 </Grid>

103−

104− {inviteButton}

105 </View>

115 </View>

106 );

116 );

107}

117}