Merge pull request #49 from ergun1017/master

fix list pagination with tag

Author: EricSimons

src/components/ArticleList.js

@@ -30,6 +30,7 @@ const ArticleList = props => {
       }
 
       <ListPagination
+        pager={props.pager}
         articlesCount={props.articlesCount}
         currentPage={props.currentPage} />
     </div>

src/components/Home/MainView.js

@@ -7,7 +7,7 @@ const YourFeedTab = props => {
   if (props.token) {
     const clickHandler = ev => {
       ev.preventDefault();
-      props.onTabClick('feed', agent.Articles.feed());
+      props.onTabClick('feed', agent.Articles.feed, agent.Articles.feed());
     }
 
     return (
@@ -26,7 +26,7 @@ const YourFeedTab = props => {
 const GlobalFeedTab = props => {
   const clickHandler = ev => {
     ev.preventDefault();
-    props.onTabClick('all', agent.Articles.all());
+    props.onTabClick('all', agent.Articles.all, agent.Articles.all());
   };
   return (
     <li className="nav-item">
@@ -61,7 +61,7 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = dispatch => ({
-  onTabClick: (tab, payload) => dispatch({ type: 'CHANGE_TAB', tab, payload })
+  onTabClick: (tab, pager, payload) => dispatch({ type: 'CHANGE_TAB', tab, pager, payload })
 });
 
 const MainView = props => {
@@ -83,6 +83,7 @@ const MainView = props => {
       </div>
 
       <ArticleList
+        pager={props.pager}
         articles={props.articles}
         loading={props.loading}
         articlesCount={props.articlesCount}

src/components/Home/Tags.js

@@ -10,7 +10,7 @@ const Tags = props => {
           tags.map(tag => {
             const handleClick = ev => {
               ev.preventDefault();
-              props.onClickTag(tag, agent.Articles.byTag(tag));
+              props.onClickTag(tag, page => agent.Articles.byTag(tag, page), agent.Articles.byTag(tag));
             };
 
             return (

src/components/Home/index.js

@@ -14,10 +14,10 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = dispatch => ({
-  onClickTag: (tag, payload) =>
-    dispatch({ type: 'APPLY_TAG_FILTER', tag, payload }),
-  onLoad: (tab, payload) =>
-    dispatch({ type: 'HOME_PAGE_LOADED', tab, payload }),
+  onClickTag: (tag, pager, payload) =>
+    dispatch({ type: 'APPLY_TAG_FILTER', tag, pager, payload }),
+  onLoad: (tab, pager, payload) =>
+    dispatch({ type: 'HOME_PAGE_LOADED', tab, pager, payload }),
   onUnload: () =>
     dispatch({  type: 'HOME_PAGE_UNLOADED' })
 });
@@ -26,10 +26,10 @@ class Home extends React.Component {
   componentWillMount() {
     const tab = this.props.token ? 'feed' : 'all';
     const articlesPromise = this.props.token ?
-      agent.Articles.feed() :
-      agent.Articles.all();
+      agent.Articles.feed :
+      agent.Articles.all;
 
-    this.props.onLoad(tab, Promise.all([agent.Tags.getAll(), articlesPromise]));
+    this.props.onLoad(tab, articlesPromise, Promise.all([agent.Tags.getAll(), articlesPromise()]));
   }
 
   componentWillUnmount() {

src/components/ListPagination.js

@@ -17,7 +17,13 @@ const ListPagination = props => {
     range.push(i);
   }
 
-  const setPage = page => props.onSetPage(page, agent.Articles.all(page));
+  const setPage = page => {
+    if(props.pager) {
+      props.onSetPage(page, props.pager(page));
+    }else {
+      props.onSetPage(page, agent.Articles.all(page))
+    }
+  };
 
   return (
     <nav>

src/components/Profile.js

@@ -148,6 +148,7 @@ class Profile extends React.Component {
               </div>
 
               <ArticleList
+                pager={this.props.pager}
                 articles={this.props.articles}
                 articlesCount={this.props.articlesCount}
                 state={this.props.currentPage} />

src/components/ProfileFavorites.js

@@ -7,15 +7,15 @@ import agent from '../agent';
 import { connect } from 'react-redux';
 
 const mapDispatchToProps = dispatch => ({
-  onLoad: (payload) =>
-    dispatch({ type: 'PROFILE_FAVORITES_PAGE_LOADED', payload }),
+  onLoad: (pager, payload) =>
+    dispatch({ type: 'PROFILE_FAVORITES_PAGE_LOADED', pager, payload }),
   onUnload: () =>
     dispatch({ type: 'PROFILE_FAVORITES_PAGE_UNLOADED' })
 });
 
 class ProfileFavorites extends Profile {
   componentWillMount() {
-    this.props.onLoad(Promise.all([
+    this.props.onLoad(page => agent.Articles.favoritedBy(this.props.params.username, page), Promise.all([
       agent.Profile.get(this.props.params.username),
       agent.Articles.favoritedBy(this.props.params.username)
     ]));

src/reducers/articleList.js

@@ -27,6 +27,7 @@ export default (state = {}, action) => {
     case 'APPLY_TAG_FILTER':
       return {
         ...state,
+        pager: action.pager,
         articles: action.payload.articles,
         articlesCount: action.payload.articlesCount,
         tab: null,
@@ -36,6 +37,7 @@ export default (state = {}, action) => {
     case 'HOME_PAGE_LOADED':
       return {
         ...state,
+        pager: action.pager,
         tags: action.payload[0].tags,
         articles: action.payload[1].articles,
         articlesCount: action.payload[1].articlesCount,
@@ -47,6 +49,7 @@ export default (state = {}, action) => {
     case 'CHANGE_TAB':
       return {
         ...state,
+        pager: action.pager,
         articles: action.payload.articles,
         articlesCount: action.payload.articlesCount,
         tab: action.tab,
@@ -56,6 +59,7 @@ export default (state = {}, action) => {
     case 'APPLY_TAG_FILTER':
       return {
         ...state,
+        pager: action.pager,
         articles: action.payload.articles,
         articlesCount: action.payload.articlesCount,
         tab: null,
@@ -66,6 +70,7 @@ export default (state = {}, action) => {
     case 'PROFILE_FAVORITES_PAGE_LOADED':
       return {
         ...state,
+        pager: action.pager,
         articles: action.payload[1].articles,
         articlesCount: action.payload[1].articlesCount,
         currentPage: 0