feat: Make the starred repositories list paged (#750)

* feat: Make the starred repositories list paged using the new api

* Revert "feat: Make the starred repositories list paged using the new api"

This reverts commit fdabf02.

* feat: Make the starred repositories list paged using the new api

* fix: remove leftovers

* fix: make repo id always lowercase

Author: machour

src/api/actions/index.js

@@ -3,3 +3,6 @@ import { createPaginationActionSet } from 'utils';
 export const ACTIVITY_GET_EVENTS_RECEIVED = createPaginationActionSet(
   'ACTIVITY_GET_EVENTS_RECEIVED'
 );
+export const ACTIVITY_GET_STARRED_REPOS_FOR_USER = createPaginationActionSet(
+  'ACTIVITY_GET_STARRED_REPOS_FOR_USER'
+);

src/api/client.js

@@ -141,5 +141,12 @@ export class Client {
         })
       );
     },
+    getStarredReposForUser: async (userId, params) => {
+      return this.call(`users/${userId}/starred`, params).then(response => ({
+        response,
+        nextPageUrl: this.getNextPageUrl(response),
+        schema: Schemas.REPO_ARRAY,
+      }));
+    },
   };
 }

src/api/reducers/pagination.js

@@ -78,4 +78,7 @@ const paginate = types => {
 // Updates the pagination data for different actions.
 export const pagination = combineReducers({
   ACTIVITY_GET_EVENTS_RECEIVED: paginate(Actions.ACTIVITY_GET_EVENTS_RECEIVED),
+  ACTIVITY_GET_STARRED_REPOS_FOR_USER: paginate(
+    Actions.ACTIVITY_GET_STARRED_REPOS_FOR_USER
+  ),
 });

src/api/schemas/index.js

@@ -1,6 +1,9 @@
 import { eventSchema } from './events';
+import { repoSchema } from './repos';
 
 export default {
   EVENT: eventSchema,
   EVENT_ARRAY: [eventSchema],
+  REPO: repoSchema,
+  REPO_ARRAY: [repoSchema],
 };

src/api/schemas/repos.js

@@ -0,0 +1,9 @@
+import { schema } from 'normalizr';
+
+export const repoSchema = new schema.Entity(
+  'repos',
+  {},
+  {
+    idAttribute: repo => repo.full_name.toLowerCase(),
+  }
+);

src/user/screens/starred-repository-list.screen.js

@@ -1,48 +1,85 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import { FlatList } from 'react-native';
-
-import { getStarredRepositories } from 'user';
+import { FlatList, View, ActivityIndicator } from 'react-native';
 
+import { RestClient } from 'api';
 import {
   ViewContainer,
   RepositoryListItem,
   LoadingRepositoryListItem,
 } from 'components';
 
-const mapStateToProps = state => ({
-  user: state.user.user,
-  starredRepositories: state.user.starredRepositories,
-  isPendingStarredRepositories: state.user.isPendingStarredRepositories,
-});
+const mapStateToProps = (state, ownProps) => {
+  const {
+    auth: { user },
+    pagination: { ACTIVITY_GET_STARRED_REPOS_FOR_USER },
+    entities: { repos },
+  } = state;
+
+  const userId = ownProps.navigation.state.params.user.login;
+
+  const starredReposPagination = ACTIVITY_GET_STARRED_REPOS_FOR_USER[
+    userId
+  ] || {
+    ids: [],
+    isFetching: true,
+  };
+  const starredRepos = starredReposPagination.ids.map(id => repos[id]);
+
+  return {
+    user,
+    starredReposPagination,
+    starredRepos,
+    userId,
+  };
+};
 
-const mapDispatchToProps = dispatch =>
-  bindActionCreators({ getStarredRepositories }, dispatch);
+const mapDispatchToProps = {
+  getStarredReposForUser: RestClient.activity.getStarredReposForUser,
+};
 
 class StarredRepositoryList extends Component {
   props: {
-    user: Object,
-    starredRepositories: Array,
+    userId: String,
+    starredRepos: Array,
+    starredReposPagination: Object,
+    getStarredReposForUser: Function,
     navigation: Object,
-    isPendingStarredRepositories: boolean,
-    getStarredRepositories: Function,
   };
 
   componentWillMount() {
-    const user = this.props.navigation.state.params.user;
+    const { getStarredReposForUser, userId } = this.props;
 
-    this.props.getStarredRepositories(user);
+    getStarredReposForUser(userId);
   }
 
+  renderFooter = () => {
+    if (this.props.starredReposPagination.nextPageUrl === null) {
+      return null;
+    }
+
+    return (
+      <View
+        style={{
+          paddingVertical: 20,
+        }}
+      >
+        <ActivityIndicator animating size="large" />
+      </View>
+    );
+  };
+
   render() {
     const {
-      starredRepositories,
+      starredReposPagination,
+      starredRepos,
+      userId,
       navigation,
-      isPendingStarredRepositories,
     } = this.props;
 
     const repoCount = navigation.state.params.repoCount;
+    const isPendingStarredRepositories =
+      starredRepos.length === 0 && starredReposPagination.isFetching;
 
     return (
       <ViewContainer>
@@ -52,7 +89,18 @@ class StarredRepositoryList extends Component {
           )}
         {!isPendingStarredRepositories && (
           <FlatList
-            data={starredRepositories}
+            data={starredRepos}
+            onRefresh={() =>
+              this.props.getStarredReposForUser(userId, {
+                forceRefresh: true,
+              })
+            }
+            refreshing={!starredRepos && starredReposPagination.isFetching}
+            onEndReached={() =>
+              this.props.getStarredReposForUser(userId, { loadMore: true })
+            }
+            onEndReachedThreshold={0.5}
+            ListFooterComponent={this.renderFooter}
             renderItem={({ item }) => (
               <RepositoryListItem repository={item} navigation={navigation} />
             )}

src/user/user.action.js

@@ -12,7 +12,6 @@ import {
   GET_IS_FOLLOWING,
   GET_IS_FOLLOWER,
   GET_REPOSITORIES,
-  GET_STARRED_REPOSITORIES,
   GET_FOLLOWERS,
   GET_FOLLOWING,
   SEARCH_USER_REPOS,
@@ -202,30 +201,6 @@ export const getRepositories = user => {
   };
 };
 
-export const getStarredRepositories = user => {
-  return (dispatch, getState) => {
-    const url = `/users/${user.login}/starred?per_page=50`;
-    const accessToken = getState().auth.accessToken;
-
-    dispatch({ type: GET_STARRED_REPOSITORIES.PENDING });
-
-    v3
-      .getJson(url, accessToken)
-      .then(data => {
-        dispatch({
-          type: GET_STARRED_REPOSITORIES.SUCCESS,
-          payload: data,
-        });
-      })
-      .catch(error => {
-        dispatch({
-          type: GET_STARRED_REPOSITORIES.ERROR,
-          payload: error,
-        });
-      });
-  };
-};
-
 export const getFollowing = user => {
   return (dispatch, getState) => {
     const accessToken = getState().auth.accessToken;

src/user/user.reducer.js

@@ -4,7 +4,6 @@ import {
   GET_IS_FOLLOWING,
   GET_IS_FOLLOWER,
   GET_REPOSITORIES,
-  GET_STARRED_REPOSITORIES,
   GET_FOLLOWERS,
   GET_FOLLOWING,
   SEARCH_USER_REPOS,
@@ -165,23 +164,6 @@ export const userReducer = (state = initialState, action = {}) => {
         error: action.payload,
         isPendingRepositories: false,
       };
-    case GET_STARRED_REPOSITORIES.PENDING:
-      return {
-        ...state,
-        isPendingStarredRepositories: true,
-      };
-    case GET_STARRED_REPOSITORIES.SUCCESS:
-      return {
-        ...state,
-        starredRepositories: action.payload,
-        isPendingStarredRepositories: false,
-      };
-    case GET_STARRED_REPOSITORIES.ERROR:
-      return {
-        ...state,
-        error: action.payload,
-        isPendingStarredRepositories: false,
-      };
     case GET_FOLLOWERS.PENDING:
       return {
         ...state,

src/user/user.type.js

@@ -5,9 +5,6 @@ export const GET_ORGS = createActionSet('GET_ORGS');
 export const GET_IS_FOLLOWING = createActionSet('GET_IS_FOLLOWING');
 export const GET_IS_FOLLOWER = createActionSet('GET_IS_FOLLOWER');
 export const GET_REPOSITORIES = createActionSet('GET_REPOSITORIES');
-export const GET_STARRED_REPOSITORIES = createActionSet(
-  'GET_STARRED_REPOSITORIES'
-);
 export const GET_FOLLOWERS = createActionSet('GET_FOLLOWERS');
 export const GET_FOLLOWING = createActionSet('GET_FOLLOWING');
 export const SEARCH_USER_REPOS = createActionSet('SEARCH_USER_REPOS');