68e8ca5 · bridge · git.iko.soy

git.iko.soy/bridge

cache useResidents data

commit68e8ca594670775a7be6ec5eee12712591ec1008 authorLiam Fitzgerald <liam@urizen.co> dateSat 29 Feb 2020, 14:03 (7 years ago) parentee5bed0

5 files changed+131−81

compare with master

unifiedsplit

src/lib/useResidents.js−54 src/store/lib/usePointStore.js+12−1 src/store/lib/useResidentsStore.js+83 src/views/Point.js+16−5 src/views/Residents.js+20−21

src/lib/useResidents.jsdeleted−54

@@ -1,54 +0,0 @@

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

2−import { Just, Nothing } from 'folktale/maybe';

3−

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

5−

6−import { useNetwork } from 'store/network';

7−

8−import useCurrentPermissions from 'lib/useCurrentPermissions';

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

10−

11−export function useResidents(point) {

12− const [residents, setResidents] = useState(Nothing());

13− const [residentCount, setResidentCount] = useState(Nothing());

14−

15− const { isParent } = useCurrentPermissions();

16− const { contracts } = useNetwork();

17− const _contracts = need.contracts(contracts);

18−

19− const syncResidentCount = useCallback(async () => {

20− if (!isParent) {

21− return;

22− }

23− const count = await azimuth.getSponsoringCount(_contracts, point);

24− setResidentCount(Just(count.toNumber()));

25− }, [isParent, setResidentCount, point, _contracts]);

26−

27− const syncResidents = useCallback(async () => {

28− if (Just.hasInstance(residents) || !isParent) {

29− return;

30− }

31− // Galaxies sponsor themselves

32− const children = (await azimuth.getSponsoring(_contracts, point)).filter(

33− p => p !== point

34− );

35−

36− setResidents(Just(children));

37− }, [residents, isParent, setResidents, point, _contracts]);

38−

39− const [requests, setRequests] = useState(Nothing);

40− const syncRequests = useCallback(async () => {

41− const reqs = await azimuth.getEscapeRequests(_contracts, point);

42− setRequests(Just(reqs));

43− }, [_contracts, point]);

44−

45− useEffect(() => {

46− syncResidentCount();

47− }, [syncResidentCount]);

48−

49− // useEffect(() => {

50− // syncRequests();

51− // });

52−

53− return { residents, residentCount, syncResidents, requests, syncRequests };

54−}

src/store/lib/usePointStore.js+12−1

@@ -6,6 +6,7 @@ import useRekeyDateStore from './useRekeyDateStore';

66import useInvitesStore from './useInvitesStore';

77import useControlledPointsStore from './useControlledPointsStore';

88import useEclipticOwnerStore from './useEclipticOwnerStore';

9+import useResidents from './useResidentsStore';

910

1011export default function usePointStore() {

1112 const { syncDetails, ...details } = useDetailsStore();

@@ -16,6 +17,7 @@ export default function usePointStore() {

1617 syncControlledPoints,

1718 ...controlledPoints

1819 } = useControlledPointsStore();

20+ const { syncResidents, syncResidentCount, ...residents } = useResidents();

1921 const ecliptic = useEclipticOwnerStore();

2022

2123 // sync all of the on-chain info required to display a known point

@@ -34,10 +36,17 @@ export default function usePointStore() {

3436 syncForeignPoint(point),

3537 syncKnownPoint(point),

3638 //

39+ syncResidentCount(point),

3740 syncDetails(point),

3841 syncInvites(point),

3942 ]),

40− [syncForeignPoint, syncKnownPoint, syncDetails, syncInvites]

43+ [

44+ syncForeignPoint,

45+ syncKnownPoint,

46+ syncDetails,

47+ syncInvites,

48+ syncResidentCount,

49+ ]

4150 );

4251

4352 return {

@@ -47,6 +56,7 @@ export default function usePointStore() {

4756 ...invites,

4857 ...controlledPoints,

4958 ...ecliptic,

59+ ...residents,

5060 syncDetails,

5161 syncRekeyDate,

5262 syncInvites,

@@ -54,5 +64,6 @@ export default function usePointStore() {

5464 syncKnownPoint,

5565 syncOwnedPoint,

5666 syncForeignPoint,

67+ syncResidents,

5768 };

5869}

src/store/lib/useResidentsStore.jsnew file+83

@@ -0,0 +1,83 @@

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

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

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

6+import { useNetwork } from 'store/network';

8+import useCurrentPermissions from 'lib/useCurrentPermissions';

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

10+

11+const emptyCacheEntry = {

12+ residentCount: Nothing(),

13+ requestCount: Nothing(),

14+ residents: Nothing(),

15+ requests: Nothing(),

16+};

17+

18+export default function useResidents() {

19+ const [residentCache, _setResidentCache] = useState({});

20+

21+ const addToResidentCache = useCallback(

22+ (point, entry) =>

23+ _setResidentCache(cache => ({ ...cache, [point]: entry })),

24+ [_setResidentCache]

25+ );

26+

27+ const getResidents = useCallback(

28+ point => residentCache[point] || emptyCacheEntry,

29+ [residentCache]

30+ );

31+

32+ const { contracts, web3 } = useNetwork();

33+ const _contracts = need.contracts(contracts);

34+

35+ const syncResidentCount = useCallback(

36+ async point => {

37+ // Do nothing if we've already fetched in full

38+ if (Just.hasInstance(getResidents(point).residents)) {

39+ return;

40+ }

41+

42+ const isGalaxy = azimuth.getPointSize(point) === azimuth.PointSize.Galaxy;

43+ const [residentCount, requestCount] = await Promise.all([

44+ azimuth.getSponsoringCount(_contracts, point),

45+ azimuth.getEscapeRequestsCount(_contracts, point),

46+ ]);

47+

48+ const _residentCount = isGalaxy

49+ ? residentCount.toNumber() - 1

50+ : residentCount.toNumber();

51+

52+ addToResidentCache(point, {

53+ residentCount: Just(_residentCount),

54+ requestCount: Just(requestCount.toNumber()),

55+ residents: Nothing(),

56+ requests: Nothing(),

57+ });

58+ },

59+ [addToResidentCache, _contracts, getResidents]

60+ );

61+

62+ const syncResidents = useCallback(

63+ async point => {

64+ // Galaxies sponsor themselves

65+ const [residents, requests] = await Promise.all([

66+ azimuth.getSponsoring(_contracts, point),

67+ azimuth.getEscapeRequests(_contracts, point),

68+ ]);

69+

70+ const _residents = residents.filter(r => r !== point);

71+

72+ addToResidentCache(point, {

73+ residentCount: Just(_residents.length),

74+ requestCount: Just(requests.length),

75+ residents: Just(_residents),

76+ requests: Just(requests),

77+ });

78+ },

79+ [addToResidentCache, _contracts]

80+ );

81+

82+ return { getResidents, syncResidentCount, syncResidents };

83+}

src/views/Point.js+16−5

@@ -25,9 +25,9 @@ import useInvites from 'lib/useInvites';

2525import { useSyncOwnedPoints } from 'lib/useSyncPoints';

2626import useCurrentPermissions from 'lib/useCurrentPermissions';

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

28−import { useResidents } from 'lib/useResidents';

2928

3029import Inviter from 'views/Invite/Inviter';

30+import { usePointCache } from 'store/pointCache';

3131

3232export default function Point() {

3333 const { pop, push, names } = useLocalRouter();

@@ -36,7 +36,9 @@ export default function Point() {

3636 const { wallet } = useWallet();

3737 const point = need.point(pointCursor);

3838

39− const { residentCount } = useResidents(point);

39+ const { getResidents } = usePointCache();

40+

41+ const { residentCount, requestCount } = getResidents(point);

4042

4143 const {

4244 isParent,

@@ -214,7 +216,7 @@ export default function Point() {

214216 );

215217 });

216218

217− console.log(residentCount);

219+ const _requestCount = requestCount.getOrElse(0);

218220

219221 return (

220222 <View pop={pop} inset>

@@ -226,12 +228,21 @@ export default function Point() {

226228 />

227229 <Grid gap={3}>

228230 {isParent && (

229− <Grid.Item full as={Flex} justify="between" onClick={goResidents}>

231+ <Grid.Item

232+ full

233+ as={Flex}

234+ justify="between"

235+ onClick={goResidents}

236+ className="mv1">

230237 <Flex.Item>

231238 Residents{' '}

232239 <span className="gray3">{matchBlinky(residentCount)}</span>

233240 </Flex.Item>

234− <Flex.Item>N/A</Flex.Item>

241+ {_requestCount !== 0 && (

242+ <Flex.Item className="f7 bg-gray2 h3 pv1 ph2 br-full r-full text-center">

243+ {_requestCount} PENDING

244+ </Flex.Item>

245+ )}

235246 </Grid.Item>

236247 )}

237248 {isPlanet && hasInvites && <InviteForm />}

src/views/Residents.js+20−21

@@ -10,10 +10,10 @@ import Sigil from 'components/Sigil';

1010

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

1212import useCurrentPointName from 'lib/useCurrentPointName';

13−import { useResidents } from 'lib/useResidents';

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

1514

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

16+import { usePointCache } from 'store/pointCache';

1717

1818const NAMES = {

1919 REQUESTS: 'REQUESTS',

@@ -30,14 +30,8 @@ const VIEWS = {

3030 [NAMES.ALL]: AllResidents,

3131};

3232

33−function Requests({ className }) {

33+function Requests({ className, requests }) {

3434 const onThing = () => {};

35− const { pointCursor } = usePointCursor();

36− const point = need.point(pointCursor);

37− const { requests, syncRequests } = useResidents(point);

38− useEffect(() => {

39− syncRequests();

40− }, [syncRequests]);

4135

4236 if (Nothing.hasInstance(requests)) {

4337 return (

@@ -86,11 +80,13 @@ function Resident({ point, onAccept, onDecline }) {

8680 </Grid.Item>

8781 {isRequest && (

8882 <>

89− <Grid.Item className="flex-row align-center underline" cols={[7, 10]}>

83+ <Grid.Item

84+ className="flex-row-r align-center underline green3"

85+ cols={[7, 10]}>

9086 Accept

9187 </Grid.Item>

9288 <Grid.Item

93− className="flex-row align-center underline"

89+ className="flex-row-r align-center underline red4"

9490 cols={[10, 13]}>

9591 Decline

9692 </Grid.Item>

@@ -101,14 +97,7 @@ function Resident({ point, onAccept, onDecline }) {

10197 );

10298}

10399

104−function AllResidents({ className }) {

105− const { pointCursor } = usePointCursor();

106− const point = need.point(pointCursor);

107− const { syncResidents, residents } = useResidents(point);

108− useEffect(() => {

109− syncResidents();

110− }, [syncResidents]);

111−

100+function AllResidents({ className, residents }) {

112101 if (Nothing.hasInstance(residents)) {

113102 return (

114103 <Grid className={className}>

@@ -132,11 +121,17 @@ export default function Residents() {

132121 const { pop } = useLocalRouter();

133122 const name = useCurrentPointName();

134123

135− // const { pointCursor } = usePointCursor();

124+ const { pointCursor } = usePointCursor();

125+ const point = need.point(pointCursor);

126+ const { getResidents, syncResidents } = usePointCache();

136127

137− const [currentTab, setCurrentTab] = useState(NAMES.ALL);

128+ useEffect(() => {

129+ syncResidents(point);

130+ }, [syncResidents, point]);

131+

132+ const { residents, requests } = getResidents(point);

138133

139− const [req, selectRequest] = useState();

134+ const [currentTab, setCurrentTab] = useState(NAMES.ALL);

140135

141136 return (

142137 <View pop={pop}>

@@ -153,10 +148,14 @@ export default function Residents() {

153148 full

154149 className="mt1"

155150 as={Tabs}

151+ // Tabs

156152 views={VIEWS}

157153 options={OPTIONS}

158154 currentTab={currentTab}

159155 onTabChange={setCurrentTab}

156+ // Props for tab

157+ residents={residents}

158+ requests={requests}

160159 />

161160 </Grid>

162161 </View>