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,28 +15,31 @@ 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>
     );
   };
 
-  return (
+  const _renderListItem = ({ item, index }) => (
-    <FlatList
-      data={data}
-      keyExtractor={(item, index) => index.toString()}
-      renderItem={({ item, index }) => (
     <View style={[styles.communityWrapper, index % 2 !== 0 && styles.itemWrapperGray]}>
       <View style={{ flex: 3, flexDirection: 'row', alignItems: 'center' }}>
         <TouchableOpacity onPress={() => handleOnPress(item[0])}>
@@ -73,8 +83,15 @@ const SubscribedCommunitiesListView = ({
         )}
       </View>
     </View>
-      )}
+  );
+
+  return (
+    <FlatList
+      data={data}
+      keyExtractor={(item, index) => index.toString()}
+      renderItem={_renderListItem}
       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