__tests__/channel/subscribers/__snapshots__/ChannelSubscribers.js.snap

@@ -93,6 +93,7 @@ exports[`channel subscribers component should render correctly 1`] = `
     </View>
   </View>
   <RCTScrollView
+    ListFooterComponent={null}
     data={
       Array [
         Object {

src/channel/ChannelService.js

@@ -134,22 +134,22 @@ class ChannelService {
       });
   }
 
-  getSubscribers(guid, filter, offset) {
-    const tag = `channel:subscribers:${guid}`;
-    // abort previous call
-    abort(tag);
-
-    return api.get('api/v1/subscribe/' + filter + '/' + guid, { offset: offset, limit: 12 }, tag)
-    .then((data) => {
-      return {
-        entities: data.users,
-        offset: data['load-next'],
-        }
-      })
-      .catch(err => {
-        logService.exception('[ChannelService]', err);
-        throw new Error (i18n.t('errorMessage'));
-      })
+  /**
+   * Get subscribers
+   * @param {string} guid
+   * @param {string} filter
+   * @param {string} offset
+   */
+  async getSubscribers(guid, filter, offset) {
+    const data = await api.get('api/v1/subscribe/' + filter + '/' + guid, {
+      offset: offset,
+      limit: 12,
+    });
+
+    return {
+      entities: data.users,
+      offset: data['load-next'],
+    };
   }
 
   async getScheduledCount(guid) {

src/channel/header/CompleteProfile.js

@@ -25,7 +25,9 @@ export default class CompleteProfile extends Component {
    * Render
    */
   render() {
-    let onboarding = featuresService.has('onboarding-december-2019') ? 'OnboardingScreenNew' : 'OnboardingScreen';
+    let onboarding = featuresService.has('onboarding-december-2019')
+      ? 'OnboardingScreenNew'
+      : 'OnboardingScreen';
     return (
       <TouchableOpacity style={[CS.padding2x]} onPress={() => navigationService.push(onboarding)}>
         <View>

src/channel/subscribers/ChannelSubscribers.js

@@ -27,14 +27,15 @@ import DiscoveryUser from '../../discovery/DiscoveryUser';
 import CenteredLoading from '../../common/components/CenteredLoading';
 import { CommonStyle } from '../../styles/Common';
 import colors from '../../styles/Colors';
-
+import ErrorLoading from '../../common/components/ErrorLoading';
 
 /**
  * Discovery screen
  */
+export default
 @inject('channelSubscribersStore')
 @observer
-export default class ChannelSubscribers extends Component {
+class ChannelSubscribers extends Component {
 
   /**
    * On component will mount
@@ -66,35 +67,40 @@ export default class ChannelSubscribers extends Component {
   render() {
     let body;
 
-    const channels = this.props.channelSubscribersStore;
+    const store = this.props.channelSubscribersStore;
+
+    const footerCmp = store.errorLoading ? (
+      <ErrorLoading message={i18n.t('cantLoad')} tryAgain={store.loadList} />
+    ) : null;
 
-    if (!channels.list.loaded && !channels.list.refreshing) {
-      body = <CenteredLoading />
+    if (!store.list.loaded && !store.list.refreshing && !store.errorLoading) {
+      body = <CenteredLoading />;
     } else {
       body = (
         <FlatList
-          data={channels.list.entities.slice()}
+          data={store.list.entities.slice()}
           renderItem={this.renderRow}
           keyExtractor={item => item.guid}
           onRefresh={this.refresh}
-          refreshing={channels.list.refreshing}
+          refreshing={store.list.refreshing}
           onEndReached={this.loadFeed}
           // onEndReachedThreshold={0}
           initialNumToRender={12}
           style={styles.listView}
           removeClippedSubviews={false}
+          ListFooterComponent={footerCmp}
         />
-      )
+      );
     }
 
     return (
       <View style={CommonStyle.flexContainer}>
         <View style={styles.topbar}>
           <View style={[CommonStyle.flexContainer, CommonStyle.rowJustifyCenter]}>
-            <TouchableHighlight underlayColor='transparent' onPress={() => channels.setFilter('subscribers')} style={channels.filter == 'subscribers'? [styles.selectedButton, CommonStyle.flexContainerCenter]: [styles.buttons, CommonStyle.flexContainerCenter]}>
+            <TouchableHighlight underlayColor='transparent' onPress={() => store.setFilter('subscribers')} style={store.filter == 'subscribers'? [styles.selectedButton, CommonStyle.flexContainerCenter]: [styles.buttons, CommonStyle.flexContainerCenter]}>
               <Text>{i18n.t('subscribers')}</Text>
             </TouchableHighlight>
-            <TouchableHighlight underlayColor='transparent' onPress={() => channels.setFilter('subscriptions')} style={channels.filter == 'subscriptions'? [styles.selectedButton, CommonStyle.flexContainerCenter]: [styles.buttons, CommonStyle.flexContainerCenter ]}>
+            <TouchableHighlight underlayColor='transparent' onPress={() => store.setFilter('subscriptions')} style={store.filter == 'subscriptions'? [styles.selectedButton, CommonStyle.flexContainerCenter]: [styles.buttons, CommonStyle.flexContainerCenter ]}>
               <Text>{i18n.t('subscriptions')}</Text>
             </TouchableHighlight>
           </View>
@@ -104,7 +110,6 @@ export default class ChannelSubscribers extends Component {
     );
   }
 
-
   /**
    * Load subs data
    */

src/channel/subscribers/ChannelSubscribersStore.js

-import {
-  observable,
-  action
-} from 'mobx'
+import { observable, action } from 'mobx';
 
 import OffsetListStore from '../../common/stores/OffsetListStore';
 import channelService from '../ChannelService';
 import UserModel from '../UserModel';
+import logService from '../../common/services/log.service';
 
 /**
  * Subscribers Store
  */
 class ChannelSubscribersStore {
-
   list = new OffsetListStore();
-
+  @observable errorLoading = false;
+  @observable loading = false;
   @observable filter = 'subscribers';
 
   guid = '';
 
-  loading = false;
-
   setGuid(guid) {
-    let reload = (this.guid != guid);
+    let reload = this.guid != guid;
     this.guid = guid;
     this.loadList(reload);
   }
 
   /**
-   * Load boost list
+   * Set action
    */
-  loadList(reload = false) {
+  @action
+  setLoading(value: boolean) {
+    this.loading = value;
+  }
 
+  /**
+   * Set the error loading flag
+   * @param {boolean} value
+   */
+  @action
+  setErrorLoading(value: boolean) {
+    this.errorLoading = value;
+  }
+
+  /**
+   * Load boost list
+   */
+  loadList = async (reload = false) => {
     if (this.list.cantLoadMore()) {
       return Promise.resolve();
     }
 
-    if(reload)
+    if (reload) {
       this.list.clearList();
+    }
 
     this.loading = true;
 
-    return channelService.getSubscribers(this.guid, this.filter, this.list.offset)
-      .then( feed => {
-        feed.entities = UserModel.createMany(feed.entities);
-        this.list.setList(feed);
-      })
-      .finally(() => {
-        this.loading = false;
-      });
-  }
+    try {
+      this.setLoading(true);
+      this.setErrorLoading(false);
+      const feed = await channelService.getSubscribers(
+        this.guid,
+        this.filter,
+        this.list.offset,
+      );
+
+      feed.entities = UserModel.createMany(feed.entities);
+      this.list.setList(feed);
+    } catch (err) {
+      this.setErrorLoading(true);
+      logService.exception(err);
+    } finally {
+      this.setLoading(false);
+    }
+  };
 
   @action
   reset() {
@@ -62,10 +84,9 @@ class ChannelSubscribersStore {
    */
   refresh() {
     this.list.refresh();
-    this.loadList()
-      .finally(() => {
-        this.list.refreshDone();
-      });
+    this.loadList().finally(() => {
+      this.list.refreshDone();
+    });
   }
 
   @action
@@ -77,4 +98,4 @@ class ChannelSubscribersStore {
   }
 }
 
-export default ChannelSubscribersStore;
\ No newline at end of file
+export default ChannelSubscribersStore;