From e416b7ce4990ef47968df03f52d0eca10209cac8 Mon Sep 17 00:00:00 2001 From: Sadaqat Ali Date: Thu, 30 Jun 2022 22:28:44 +0500 Subject: [PATCH] cache implemented in membership/joined tab with merge and delete functionality --- .../view/subscribedCommunitiesListView.js | 4 +- src/redux/actions/cacheActions.ts | 7 +- src/redux/actions/communitiesAction.js | 5 +- .../container/communitiesContainer.js | 92 ++++++++++++++----- src/utils/communitiesUtils.ts | 20 ++++ 5 files changed, 99 insertions(+), 29 deletions(-) create mode 100644 src/utils/communitiesUtils.ts diff --git a/src/components/subscribedCommunitiesList/view/subscribedCommunitiesListView.js b/src/components/subscribedCommunitiesList/view/subscribedCommunitiesListView.js index faaa35af8..cf4446f9c 100644 --- a/src/components/subscribedCommunitiesList/view/subscribedCommunitiesListView.js +++ b/src/components/subscribedCommunitiesList/view/subscribedCommunitiesListView.js @@ -79,9 +79,11 @@ const SubscribedCommunitiesListView = ({ onPress={() => handleSubscribeButtonPress( { - isSubscribed: item[4], communityId: item[0], communityTitle: item[1], + userRole: item[2], + userLabel: item[3], + isSubscribed: item[4], }, 'communitiesScreenJoinedTab', ) diff --git a/src/redux/actions/cacheActions.ts b/src/redux/actions/cacheActions.ts index 93252e835..19c01d32b 100644 --- a/src/redux/actions/cacheActions.ts +++ b/src/redux/actions/cacheActions.ts @@ -93,11 +93,12 @@ export const updateSubscribedCommunitiesCache = (data: any) => { const path = data.communityId; const created = new Date(); const communityTitle = data.communityTitle ? data.communityTitle : ''; - const userRole = ''; - const userLabel = ''; + const userRole = data.userRole ? data.userRole : ''; + const userLabel = data.userLabel ? data.userLabel : ''; + const subscribedCommunity:SubscribedCommunity = { data : [data.communityId, communityTitle, userRole, userLabel, !data.isSubscribed], - expiresAt : created.getTime() + 6000000, + expiresAt : created.getTime() + 86400000, }; return ({ diff --git a/src/redux/actions/communitiesAction.js b/src/redux/actions/communitiesAction.js index 3ae39cfc2..c84a74cad 100644 --- a/src/redux/actions/communitiesAction.js +++ b/src/redux/actions/communitiesAction.js @@ -45,7 +45,10 @@ export const fetchSubscribedCommunities = (username) => { return (dispatch) => { dispatch({ type: FETCH_SUBSCRIBED_COMMUNITIES }); getSubscriptions(username) - .then((res) => dispatch(fetchSubscribedCommunitiesSuccess(res))) + .then((res) => { + res.forEach((item) => item.push(true)); + dispatch(fetchSubscribedCommunitiesSuccess(res)); + }) .catch((err) => dispatch(fetchSubscribedCommunitiesFail(err))); }; }; diff --git a/src/screens/communities/container/communitiesContainer.js b/src/screens/communities/container/communitiesContainer.js index 81c4a36ac..b6247c65f 100644 --- a/src/screens/communities/container/communitiesContainer.js +++ b/src/screens/communities/container/communitiesContainer.js @@ -1,7 +1,7 @@ import { useState, useEffect } from 'react'; import { withNavigation } from 'react-navigation'; import { useSelector, useDispatch } from 'react-redux'; -import { shuffle } from 'lodash'; +import { shuffle, isEmpty } from 'lodash'; import { useIntl } from 'react-intl'; import ROUTES from '../../../constants/routeNames'; @@ -10,7 +10,11 @@ import { getCommunities, getSubscriptions } from '../../../providers/hive/dhive' import { subscribeCommunity, leaveCommunity } from '../../../redux/actions/communitiesAction'; import { statusMessage } from '../../../redux/constants/communitiesConstants'; -import { updateSubscribedCommunitiesCache } from '../../../redux/actions/cacheActions'; +import { + deleteSubscribedCommunityCacheEntry, + updateSubscribedCommunitiesCache, +} from '../../../redux/actions/cacheActions'; +import { mergeSubCommunitiesCacheInSubList } from '../../../utils/communitiesUtils'; const CommunitiesContainer = ({ children, navigation }) => { const dispatch = useDispatch(); @@ -23,6 +27,7 @@ const CommunitiesContainer = ({ children, navigation }) => { const currentAccount = useSelector((state) => state.account.currentAccount); const pinCode = useSelector((state) => state.application.pin); + const subscribedCommunities = useSelector((state) => state.communities.subscribedCommunities); const subscribingCommunitiesInDiscoverTab = useSelector( (state) => state.communities.subscribingCommunitiesInCommunitiesScreenDiscoverTab, ); @@ -57,7 +62,18 @@ const CommunitiesContainer = ({ children, navigation }) => { // side effect for subscribed communities cache update useEffect(() => { - console.log('subscribedCommunitiesCache updated : ', subscribedCommunitiesCache); + if ( + subscribedCommunitiesCache && + subscribedCommunitiesCache.size && + subscriptions && + subscriptions.length > 0 + ) { + const updatedSubsList = mergeSubCommunitiesCacheInSubList( + subscriptions, + subscribedCommunitiesCache, + ); + setSubscriptions(updatedSubsList.slice()); + } }, [subscribedCommunitiesCache]); useEffect(() => { @@ -87,36 +103,54 @@ const CommunitiesContainer = ({ children, navigation }) => { }, [subscribingCommunitiesInDiscoverTab]); useEffect(() => { - const subscribedsData = [...subscriptions]; - - Object.keys(subscribingCommunitiesInJoinedTab).map((communityId) => { - if (!subscribingCommunitiesInJoinedTab[communityId].loading) { - if (!subscribingCommunitiesInJoinedTab[communityId].error) { - if (subscribingCommunitiesInJoinedTab[communityId].isSubscribed) { - subscribedsData.forEach((item) => { - if (item[0] === communityId) { - item[4] = true; - } - }); - } else { - subscribedsData.forEach((item) => { - if (item[0] === communityId) { - item[4] = false; - } - }); + if (!isEmpty(subscribingCommunitiesInJoinedTab)) { + const subscribedsData = mergeSubCommunitiesCacheInSubList( + subscribedCommunities.data, + subscribedCommunitiesCache, + ); + Object.keys(subscribingCommunitiesInJoinedTab).map((communityId) => { + if (!subscribingCommunitiesInJoinedTab[communityId].loading) { + if (!subscribingCommunitiesInJoinedTab[communityId].error) { + if (subscribingCommunitiesInJoinedTab[communityId].isSubscribed) { + subscribedsData.forEach((item) => { + if (item[0] === communityId) { + item[4] = true; + } + }); + } else { + subscribedsData.forEach((item) => { + if (item[0] === communityId) { + item[4] = false; + } + }); + } } } - } - }); + }); - setSubscriptions(subscribedsData); + setSubscriptions(subscribedsData); + } }, [subscribingCommunitiesInJoinedTab]); const _getSubscriptions = () => { setIsSubscriptionsLoading(true); + if ( + subscribedCommunities && + subscribedCommunities.data && + subscribedCommunities.data.length > 0 + ) { + const updatedSubsList = mergeSubCommunitiesCacheInSubList( + subscribedCommunities.data, + subscribedCommunitiesCache, + ); + setSubscriptions(updatedSubsList.slice()); + console.log('just before isSubscriptionsLoading : ', updatedSubsList.slice()); + setIsSubscriptionsLoading(false); + } getSubscriptions(currentAccount.username) .then((subs) => { subs.forEach((item) => item.push(true)); + _invalidateSubscribedCommunityCache(subs); // invalidate subscribed communities cache item when latest data is available getCommunities('', 50, null, 'rank').then((communities) => { communities.forEach((community) => Object.assign(community, { @@ -126,7 +160,7 @@ const CommunitiesContainer = ({ children, navigation }) => { }), ); - setSubscriptions(subs); + setSubscriptions(mergeSubCommunitiesCacheInSubList(subs, subscribedCommunitiesCache)); //merge cache with fetched data setDiscovers(shuffle(communities)); setIsSubscriptionsLoading(false); }); @@ -137,6 +171,14 @@ const CommunitiesContainer = ({ children, navigation }) => { }); }; + const _invalidateSubscribedCommunityCache = (fetchedList) => { + fetchedList.map((listItem) => { + let itemExists = subscribedCommunitiesCache.get(listItem[0]); + if (itemExists) { + dispatch(deleteSubscribedCommunityCacheEntry(listItem[0])); + } + }); + }; // Component Functions const _handleOnPress = (name) => { navigation.navigate({ @@ -178,6 +220,8 @@ const CommunitiesContainer = ({ children, navigation }) => { ); }; + console.log('isSubscriptionsLoading : ', isSubscriptionsLoading); + console.log('subscribedCommunities : ', subscribedCommunities); console.log('subscriptions : ', subscriptions); return ( children && diff --git a/src/utils/communitiesUtils.ts b/src/utils/communitiesUtils.ts new file mode 100644 index 000000000..91438b4fc --- /dev/null +++ b/src/utils/communitiesUtils.ts @@ -0,0 +1,20 @@ +import { SubscribedCommunity } from '../redux/reducers/cacheReducer'; + +export const mergeSubCommunitiesCacheInSubList = ( + subList: any[], + cacheMap: Map, +) => { + if (!cacheMap || !cacheMap.size) { + return subList.sort((a, b) => a[1].localeCompare(b[1])); + } + const cacheList = Array.from(cacheMap, ([path, item]) => item.data); + cacheList.map((cacheListItem) => { + let index = subList.findIndex((subListItem) => subListItem[0] === cacheListItem[0]); + if (index !== -1) { + subList[index] = [...cacheListItem]; + } else { + subList.push(cacheListItem); + } + }); + return subList.sort((a, b) => a[1].localeCompare(b[1])); +};