handing empty view and pull to refresh in subscribed community tab

src/components/subscribedCommunitiesList/view/subscribedCommunitiesListStyles.js

@@ -48,4 +48,9 @@ export default EStyleSheet.create({
   tabbarItem: {
     flex: 1,
   },
+  noContentText: {
+    textAlign: 'center',
+    marginVertical: 32,
+    color: '$primaryBlack',
+  },
 });

src/components/subscribedCommunitiesList/view/subscribedCommunitiesListView.js

@@ -1,5 +1,12 @@
 import React from 'react';
-import { View, FlatList, TouchableOpacity, Text, ActivityIndicator } from 'react-native';
+import {
+  View,
+  FlatList,
+  TouchableOpacity,
+  ActivityIndicator,
+  Text,
+  RefreshControl,
+} from 'react-native';
 import { useIntl } from 'react-intl';
 
 import { Tag, UserAvatar } from '../../index';
@@ -8,73 +15,83 @@ import { ListPlaceHolder } from '../../basicUIElements';
 import DEFAULT_IMAGE from '../../../assets/no_image.png';
 
 import styles from './subscribedCommunitiesListStyles';
+import globalStyles from '../../../globalStyles';
 
 const SubscribedCommunitiesListView = ({
   data,
   subscribingCommunities,
   handleOnPress,
   handleSubscribeButtonPress,
+  handleGetSubscriptions,
+  isLoading,
 }) => {
   const intl = useIntl();
 
   const _renderEmptyContent = () => {
-    return (
+    return isLoading ? (
       <>
         <ListPlaceHolder />
       </>
+    ) : (
+      <Text style={[globalStyles.subTitle, styles.noContentText]}>
+        {intl.formatMessage({ id: 'empty_screen.nothing_here' })}
+      </Text>
     );
   };
 
+  const _renderListItem = ({ item, index }) => (
+    <View style={[styles.communityWrapper, index % 2 !== 0 && styles.itemWrapperGray]}>
+      <View style={{ flex: 3, flexDirection: 'row', alignItems: 'center' }}>
+        <TouchableOpacity onPress={() => handleOnPress(item[0])}>
+          <UserAvatar username={item[0]} defaultSource={DEFAULT_IMAGE} noAction />
+        </TouchableOpacity>
+        <TouchableOpacity onPress={() => handleOnPress(item[0])}>
+          <Text style={styles.community}>{item[1]}</Text>
+        </TouchableOpacity>
+      </View>
+      <View>
+        {subscribingCommunities.hasOwnProperty(item[0]) &&
+        subscribingCommunities[item[0]].loading ? (
+          <View style={{ width: 65, alignItems: 'center', justifyContent: 'center' }}>
+            <ActivityIndicator />
+          </View>
+        ) : (
+          <Tag
+            style={styles.subscribeButton}
+            textStyle={item[4] && styles.subscribeButtonText}
+            value={
+              !item[4]
+                ? intl.formatMessage({
+                    id: 'search_result.communities.subscribe',
+                  })
+                : intl.formatMessage({
+                    id: 'search_result.communities.unsubscribe',
+                  })
+            }
+            isPin={!item[4]}
+            isFilter
+            onPress={() =>
+              handleSubscribeButtonPress(
+                {
+                  isSubscribed: item[4],
+                  communityId: item[0],
+                },
+                'communitiesScreenJoinedTab',
+              )
+            }
+          />
+        )}
+      </View>
+    </View>
+  );
+
   return (
     <FlatList
       data={data}
       keyExtractor={(item, index) => index.toString()}
-      renderItem={({ item, index }) => (
+      renderItem={_renderListItem}
-        <View style={[styles.communityWrapper, index % 2 !== 0 && styles.itemWrapperGray]}>
-          <View style={{ flex: 3, flexDirection: 'row', alignItems: 'center' }}>
-            <TouchableOpacity onPress={() => handleOnPress(item[0])}>
-              <UserAvatar username={item[0]} defaultSource={DEFAULT_IMAGE} noAction />
-            </TouchableOpacity>
-            <TouchableOpacity onPress={() => handleOnPress(item[0])}>
-              <Text style={styles.community}>{item[1]}</Text>
-            </TouchableOpacity>
-          </View>
-          <View>
-            {subscribingCommunities.hasOwnProperty(item[0]) &&
-            subscribingCommunities[item[0]].loading ? (
-              <View style={{ width: 65, alignItems: 'center', justifyContent: 'center' }}>
-                <ActivityIndicator />
-              </View>
-            ) : (
-              <Tag
-                style={styles.subscribeButton}
-                textStyle={item[4] && styles.subscribeButtonText}
-                value={
-                  !item[4]
-                    ? intl.formatMessage({
-                        id: 'search_result.communities.subscribe',
-                      })
-                    : intl.formatMessage({
-                        id: 'search_result.communities.unsubscribe',
-                      })
-                }
-                isPin={!item[4]}
-                isFilter
-                onPress={() =>
-                  handleSubscribeButtonPress(
-                    {
-                      isSubscribed: item[4],
-                      communityId: item[0],
-                    },
-                    'communitiesScreenJoinedTab',
-                  )
-                }
-              />
-            )}
-          </View>
-        </View>
-      )}
       ListEmptyComponent={_renderEmptyContent}
+      refreshControl={<RefreshControl refreshing={isLoading} onRefresh={handleGetSubscriptions} />}
     />
   );
 };

src/screens/communities/container/communitiesContainer.js

@@ -17,6 +17,7 @@ const CommunitiesContainer = ({ children, navigation }) => {
 
   const [discovers, setDiscovers] = useState([]);
   const [subscriptions, setSubscriptions] = useState([]);
+  const [isSubscriptionsLoading, setIsSubscriptionsLoading] = useState(false);
 
   const currentAccount = useSelector((state) => state.account.currentAccount);
   const pinCode = useSelector((state) => state.application.pin);
@@ -28,21 +29,7 @@ const CommunitiesContainer = ({ children, navigation }) => {
   );
 
   useEffect(() => {
-    getSubscriptions(currentAccount.username).then((subs) => {
+    _getSubscriptions();
-      subs.forEach((item) => item.push(true));
-      getCommunities('', 50, null, 'rank').then((communities) => {
-        communities.forEach((community) =>
-          Object.assign(community, {
-            isSubscribed: subs.some(
-              (subscribedCommunity) => subscribedCommunity[0] === community.name,
-            ),
-          }),
-        );
-
-        setSubscriptions(subs);
-        setDiscovers(shuffle(communities));
-      });
-    });
   }, []);
 
   useEffect(() => {
@@ -97,6 +84,31 @@ const CommunitiesContainer = ({ children, navigation }) => {
     setSubscriptions(subscribedsData);
   }, [subscribingCommunitiesInJoinedTab]);
 
+  const _getSubscriptions = () => {
+    setIsSubscriptionsLoading(true);
+    getSubscriptions(currentAccount.username)
+      .then((subs) => {
+        setIsSubscriptionsLoading(false);
+        subs.forEach((item) => item.push(true));
+        getCommunities('', 50, null, 'rank').then((communities) => {
+          communities.forEach((community) =>
+            Object.assign(community, {
+              isSubscribed: subs.some(
+                (subscribedCommunity) => subscribedCommunity[0] === community.name,
+              ),
+            }),
+          );
+
+          setSubscriptions(subs);
+          setDiscovers(shuffle(communities));
+        });
+      })
+      .catch((err) => {
+        console.warn('Failed to get subscriptions', err);
+        setIsSubscriptionsLoading(false);
+      });
+  };
+
   // Component Functions
   const _handleOnPress = (name) => {
     navigation.navigate({
@@ -146,6 +158,8 @@ const CommunitiesContainer = ({ children, navigation }) => {
       subscribingCommunitiesInJoinedTab,
       handleOnPress: _handleOnPress,
       handleSubscribeButtonPress: _handleSubscribeButtonPress,
+      handleGetSubscriptions: _getSubscriptions,
+      isSubscriptionsLoading,
     })
   );
 };

src/screens/communities/view/communitiesScreen.js

@@ -55,6 +55,8 @@ const CommunitiesScreen = ({ navigation, searchValue }) => {
         handleSubscribeButtonPress,
         subscribingCommunitiesInDiscoverTab,
         subscribingCommunitiesInJoinedTab,
+        handleGetSubscriptions,
+        isSubscriptionsLoading,
       }) => {
         return (
           <View style={styles.container}>
@@ -77,6 +79,8 @@ const CommunitiesScreen = ({ navigation, searchValue }) => {
                   subscribingCommunities={subscribingCommunitiesInJoinedTab}
                   handleSubscribeButtonPress={handleSubscribeButtonPress}
                   handleOnPress={handleOnPress}
+                  handleGetSubscriptions={handleGetSubscriptions}
+                  isLoading={isSubscriptionsLoading}
                 />
               </View>
               <View