cache implemented in membership/joined tab with merge and delete functionality

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',
               )

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 ({

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)));
   };
 };

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,8 +103,11 @@ const CommunitiesContainer = ({ children, navigation }) => {
   }, [subscribingCommunitiesInDiscoverTab]);
 
   useEffect(() => {
-    const subscribedsData = [...subscriptions];
-
+    if (!isEmpty(subscribingCommunitiesInJoinedTab)) {
+      const subscribedsData = mergeSubCommunitiesCacheInSubList(
+        subscribedCommunities.data,
+        subscribedCommunitiesCache,
+      );
       Object.keys(subscribingCommunitiesInJoinedTab).map((communityId) => {
         if (!subscribingCommunitiesInJoinedTab[communityId].loading) {
           if (!subscribingCommunitiesInJoinedTab[communityId].error) {
@@ -110,13 +129,28 @@ const CommunitiesContainer = ({ children, navigation }) => {
       });
 
       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 &&

src/utils/communitiesUtils.ts

@@ -0,0 +1,20 @@
+import { SubscribedCommunity } from '../redux/reducers/cacheReducer';
+
+export const mergeSubCommunitiesCacheInSubList = (
+  subList: any[],
+  cacheMap: Map<string, SubscribedCommunity>,
+) => {
+  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]));
+};