Merge pull request #1685 from hippware/1628

Addresses #1628, #1639

Author: Eric Kirkham

src/components/ListFooter.js

@@ -12,7 +12,7 @@ type Props = {
 };
 
 const ListFooter = observer(({footerImage, finished, style}: Props) => (
-  <View style={[{...style}, {paddingTop: 10, alignItems: 'center', paddingBottom: 21}]}>{finished ? <Image source={footerImage} /> : <Spinner />}</View>
+  <View style={[{...style}, {paddingTop: 10, alignItems: 'center', paddingBottom: 21}]}>{finished ? footerImage ? <Image source={footerImage} /> : null : <Spinner />}</View>
 ));
 
 export default ListFooter;

src/components/Router.js

@@ -188,7 +188,7 @@ const TinyRobotRouter = () => (
         <Scene key='botAddress' component={BotAddressScene} clone back title='Edit Location' />
         <Scene key='profileDetails' component={ProfileDetail} clone back navTransparent={false} />
         <Scene key='myAccount' component={MyAccount} editMode clone back />
-        <Scene key='followers' component={peopleLists.FollowersList} clone title='Followers' back />
+        <Scene key='followers' path='followers' component={peopleLists.FollowersList} clone title='Followers' back />
         <Scene key='following' component={peopleLists.FollowingList} clone title='Following' back />
         <Scene key='blocked' component={peopleLists.BlockedList} clone title='Blocked Users' back right={() => null} />
       </Stack>

src/components/people-lists/FollowersList.js

@@ -19,6 +19,7 @@ import PeopleList from './PeopleList';
 import SectionHeader from './SectionHeader';
 import {FollowableProfileItem} from './customProfileItems';
 import {followersSectionIndex} from '../../utils/friendUtils';
+import ListFooter from '../ListFooter';
 
 type Props = {
   userId: string,
@@ -39,7 +40,7 @@ class FollowersList extends React.Component<Props> {
   };
 
   componentDidMount() {
-    this.profile = profileStore.create(this.props.userId, null, true);
+    this.profile = profileStore.create(this.props.userId, null, true) || model.profile;
     this.loadFollowers();
   }
 
@@ -53,10 +54,14 @@ class FollowersList extends React.Component<Props> {
     const followers = this.profile.isOwn ? model.friends.followers : this.profileList.alphaByHandleList;
     const newFollowers = this.profile.isOwn ? model.friends.newFollowers : [];
     const followersCount = this.profile.isOwn ? model.friends.followers.length : this.profile.followersSize;
+    const {connected} = model;
+    const finished = this.profile.isOwn || this.profileList.finished;
+    const loading = this.profile.isOwn || this.profileList.loading;
     return (
       <Screen isDay={location.isDay}>
         <PeopleList
           renderItem={({item}) => <FollowableProfileItem profile={item} />}
+          ListFooterComponent={connected && loading ? <ListFooter finished={finished} /> : null}
           renderSectionHeader={({section}) => {
             return section.key === 'new' ? (
               <SectionHeader section={section} title='New Followers' count={section.data.length}>

src/components/people-lists/FollowingList.js

@@ -16,6 +16,7 @@ import PeopleList from './PeopleList';
 import SectionHeader from './SectionHeader';
 import {FollowableProfileItem} from './customProfileItems';
 import {followingSectionIndex} from '../../utils/friendUtils';
+import ListFooter from '../ListFooter';
 
 type Props = {
   userId: string,
@@ -49,6 +50,10 @@ class FollowingList extends React.Component {
   render() {
     if (!this.profile) return null;
     const following = this.profile.isOwn ? model.friends.following : this.profileList.alphaByHandleList;
+    const followedCount = this.profile.isOwn ? model.friends.following.length : this.profile.followedSize;
+    const {connected} = model;
+    const finished = this.profile.isOwn || this.profileList.finished;
+    const loading = this.profile.isOwn || this.profileList.loading;
     return (
       <Screen>
         <PeopleList
@@ -62,8 +67,9 @@ class FollowingList extends React.Component {
               autoCapitalize='none'
             />
           }
+          ListFooterComponent={connected && loading ? <ListFooter finished={finished} /> : null}
           renderItem={({item}) => <FollowableProfileItem profile={item} />}
-          renderSectionHeader={({section}) => <SectionHeader section={section} title='Following' count={this.profile.followedSize} />}
+          renderSectionHeader={({section}) => <SectionHeader section={section} title='Following' count={followedCount} />}
           sections={followingSectionIndex(this.searchText, following)}
           loadMore={this.loadFollowing}
         />

src/components/people-lists/SectionHeader.js

@@ -5,6 +5,7 @@ import {StyleSheet, View} from 'react-native';
 import {k} from '../Global';
 import {colors} from '../../constants';
 import {RText} from '../common';
+import {observer} from 'mobx-react/native';
 
 type Props = {
   section: Object,
@@ -13,7 +14,7 @@ type Props = {
   count: number,
 };
 
-const SectionHeader = ({section, title, children, count}: Props) => (
+const SectionHeader = observer(({section, title, children, count}: Props) => (
   <View style={styles.headerBar} key={section.key}>
     <RText size={13}>
       <RText size={16} weight='Bold'>
@@ -23,7 +24,7 @@ const SectionHeader = ({section, title, children, count}: Props) => (
     </RText>
     {children}
   </View>
-);
+));
 
 export default SectionHeader;
 

src/model/FriendList.js

@@ -8,6 +8,8 @@ import assert from 'assert';
 export default class FriendList {
   @observable _list: IObservableArray<Profile> = [];
   lastId: ?string = null;
+  @observable loading = false;
+  @observable finished = false;
 
   @computed
   get list(): Profile[] {

src/store/friendStore.js

@@ -119,6 +119,13 @@ class FriendStore {
     assert(userId, 'User id should not be null');
     assert(profileList, 'Profile list should not be null');
     assert(relation, 'Relation type must be defined');
+    if (profileList.loading) {
+      return;
+    }
+    if (profileList.finished) {
+      return;
+    }
+    profileList.loading = true;
 
     const iq = $iq({
       type: 'get',
@@ -164,9 +171,14 @@ class FriendStore {
           profileList.add(profileToAdd);
         });
         profileList.lastId = stanza.contacts.set.last;
+        if (profileList.length === parseInt(stanza.contacts.set.count)) {
+          profileList.finished = true;
+        }
       }
     } catch (error) {
       log.log('REQUEST RELATIONS error:', error, {level: log.levels.ERROR});
+    } finally {
+      profileList.loading = false;
     }
   };
 

src/store/profileStore.js

@@ -66,6 +66,9 @@ class ProfileStore {
 
   @action
   create = (user: string, data?: Object, force?: boolean): Profile => {
+    if (!user) {
+      return null;
+    }
     return factory.create(user, data, force);
   };