feat(pagination): Pagination of Articles

- Get the total number of articles - Define the number of pages - Create pagination component - Write tests for pagination of articles [Delivers #161966576]
andela · Jan 25, 2019 · 8578fdd · 8578fdd
1 parent ab04d1a
commit 8578fdd
Show file tree

Hide file tree

Showing 11 changed files with 210 additions and 15 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,13 +12,15 @@
     "enzyme-adapter-react-16": "^1.7.1",
     "expect": "^23.6.0",
     "fetch-mock": "^7.3.0",
+    "moment": "^2.24.0",
     "moxios": "^0.4.0",
     "nock": "^10.0.6",
     "node-fetch": "^2.3.0",
     "prop-types": "^15.6.2",
     "react": "^16.7.0",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.7.0",
+    "react-moment": "^0.8.4",
     "react-redux": "^6.0.0",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",

diff --git a/src/actions/__test__/ArticlesActions.test.js b/src/actions/__test__/ArticlesActions.test.js
@@ -2,10 +2,13 @@ import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import moxios from 'moxios';
 import expect from 'expect';
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
 
 import * as actions from '../articleActions';
 import * as types from '../actionTypes';
 
+const mock = new MockAdapter(axios);
 const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
 
@@ -133,3 +136,80 @@ describe('Article Actions types', () => {
     });
   });
 });
+
+
+describe('Pagination', () => {
+  afterEach = (
+    () => mock.restore()
+  );
+
+  it('should create an action to get articles count', () => {
+    const userData = {
+      email: 'jake@jakecom',
+      password: '@jakejake254',
+    };
+    mock.onGet('https://ah-technocrats.herokuapp.com/api/articles/').replyOnce(200,
+      {
+        user: {
+          token: 'token',
+        },
+      });
+
+    const expectedActions = [
+      {
+        type: types.PAGE,
+        request: userData,
+      },
+      {
+        type: types.FETCH_ARTICLES_FAILS,
+        successfulMessage: {
+          user: {
+            token: 'token',
+          },
+        },
+      },
+    ];
+    const store = mockStore({ userData: {} });
+    store.dispatch(actions.pageData(userData)).then(() => {
+      expect(store.getActions()).toEqual(expectedActions);
+    });
+  });
+});
+
+describe('Get pagintaed data', () => {
+  afterEach = (
+    () => mock.restore()
+  );
+
+  it('should create an action to get articles count', () => {
+    const userData = {
+      email: 'jake@jakecom',
+      password: '@jakejake254',
+    };
+    mock.onGet('https://ah-technocrats.herokuapp.com/api/articles/?limit=10&offset=10').replyOnce(200,
+      {
+        user: {
+          token: 'token',
+        },
+      });
+
+    const expectedActions = [
+      {
+        type: types.PAGE,
+        request: userData,
+      },
+      {
+        type: types.FETCH_ARTICLES_FAILS,
+        successfulMessage: {
+          user: {
+            token: 'token',
+          },
+        },
+      },
+    ];
+    const store = mockStore({ userData: {} });
+    store.dispatch(actions.getPage(userData)).then(() => {
+      expect(store.getActions()).toEqual(expectedActions);
+    });
+  });
+});
diff --git a/src/actions/actionTypes.js b/src/actions/actionTypes.js
@@ -8,3 +8,6 @@ export const FETCH_ARTICLES_FAILS = 'FETCH_ARTICLES';
 export const LOGIN_ACTION = 'LOGIN_ACTION';
 export const LOGIN_SUCCESSFUL = 'LOGIN_SUCCESSFUL';
 export const LOGIN_REJECTED = 'LOGIN_REJECTED';
+export const UPDATED_ARTICLES = 'UPDATED_ARTICLES';
+export const PAGE = 'GET_PAGES_COUNT';
+export const NEXT_PAGE = 'NEXT_PAGE';
diff --git a/src/actions/articleActions.js b/src/actions/articleActions.js
@@ -1,5 +1,7 @@
 import axios from 'axios';
-import { FETCH_ARTICLES, FETCH_ARTICLES_SUCCESS, FETCH_ARTICLES_FAILS } from './actionTypes';
+import {
+  FETCH_ARTICLES, FETCH_ARTICLES_SUCCESS, FETCH_ARTICLES_FAILS, PAGE, NEXT_PAGE,
+} from './actionTypes';
 
 export const fetchAllArticles = () => (
   {
@@ -14,20 +16,50 @@ export const fetchArticlesSuccess = payload => (
   }
 );
 
+export const fetchPagesCount = payload => (
+  {
+    type: PAGE,
+    payload,
+  }
+);
+
 export const fetchArticleFails = errorMessage => (
   {
     type: FETCH_ARTICLES_FAILS,
     errorMessage,
   }
 );
+export const getNextPage = () => (
+  {
+    type: NEXT_PAGE,
+  }
+);
+
 
 export function fetchArticles() {
   return (dispatch) => {
     dispatch(fetchAllArticles());
-    return axios.get('https://ah-technocrats.herokuapp.com/api/articles/')
+    return axios.get('https://ah-technocrats.herokuapp.com/api/articles/?limit=10&offset=00')
       .then(payload => dispatch(fetchArticlesSuccess(payload.data.results.articles)))
       .catch(errorMessage => dispatch(fetchArticleFails(errorMessage)));
   };
 }
 
-export default fetchArticles;
+export function pageData() {
+  return (dispatch) => {
+    dispatch(fetchAllArticles());
+    return axios.get('https://ah-technocrats.herokuapp.com/api/articles/')
+      .then(payload => dispatch(fetchPagesCount(payload.data.count)))
+      .catch(errorMessage => dispatch(fetchArticleFails(errorMessage)));
+  };
+}
+
+export function getPage(page) {
+  const newPage = page * 10 - 10;
+  return (dispatch) => {
+    dispatch(getNextPage());
+    return axios.get(`https://ah-technocrats.herokuapp.com/api/articles/?limit=10&offset=${newPage}`)
+      .then(payload => dispatch(fetchArticlesSuccess(payload.data.results.articles)))
+      .catch(errorMessage => dispatch(fetchArticleFails(errorMessage)));
+  };
+}
diff --git a/src/components/Articles/AllArticlesComponent.jsx b/src/components/Articles/AllArticlesComponent.jsx
@@ -1,9 +1,13 @@
 import React from 'react';
-import { Container } from 'semantic-ui-react';
+import { Container, Pagination } from 'semantic-ui-react';
 import { PropTypes } from 'prop-types';
 import SingleArticleComponent from './SingleArticleComponent';
 
-const AllArticlesComponent = ({ articles }) => (
+let number;
+
+const AllArticlesComponent = ({
+  articles, pagination, getNewPage,
+}) => (
   <Container>
     <div className="space">
       <div className="ui header medium">
@@ -19,14 +23,46 @@ const AllArticlesComponent = ({ articles }) => (
             ))}
           </div>
         </div>
+        <div className="small-space pagination-button">
+          <div className="ui pagination menu ">
+            <Pagination
+              boundaryRange={0}
+              defaultActivePage={1}
+              ellipsisItem={null}
+              firstItem={null}
+              lastItem={null}
+              siblingRange={1}
+              onClick={(e) => {
+                number = e.target.innerText;
+                return getNewPage(e.target.innerText);
+              }}
+              totalPages={Math.ceil(pagination / 10)}
+            />
+          </div>
+        </div>
+        <div className="small-margin tagline">
+          <span>
+        Page
+            {' '}
+            {number}
+            {' '}
+        of
+            {' '}
+            {Math.ceil(pagination / 10)}
+          </span>
+        </div>
+
       </div>
       <div className="two wide column" />
+
     </div>
   </Container>
 );
 
 AllArticlesComponent.propTypes = {
   articles: PropTypes.shape().isRequired,
+  pagination: PropTypes.number.isRequired,
+  getNewPage: PropTypes.func.isRequired,
 };
 
 export default AllArticlesComponent;
diff --git a/src/components/Articles/Articles.scss b/src/components/Articles/Articles.scss
@@ -85,6 +85,10 @@
     margin-top: 20px;
 }
 
+.pagination-button {
+    margin-bottom: 20px;
+}
+
 .space-bottom {
     margin-bottom:50px
 }
@@ -224,3 +228,7 @@ div [class*="right float"] {
 a.red{
     color:#67bd45!important;
 }
+
+.cursor {
+    cursor: pointer;
+}
diff --git a/src/components/Articles/ArticlesContainer.jsx b/src/components/Articles/ArticlesContainer.jsx
@@ -7,7 +7,7 @@ import {
   Segment,
 } from 'semantic-ui-react';
 
-import fetchArticlesAct from '../../actions/articleActions';
+import { fetchArticles, pageData, getPage } from '../../actions/articleActions';
 import Footer from '../Footer/Footer';
 import SideBarMenu from '../Menu/Menu';
 import AllArticlesComponent from './AllArticlesComponent';
@@ -21,19 +21,25 @@ export class ArticleContainer extends React.Component {
   }
 
   componentWillMount() {
-    const { fetchArticles } = this.props;
-    fetchArticles();
+    const { fetchAllArticles, fetchpageData } = this.props;
+    fetchAllArticles();
+    fetchpageData();
   }
 
+
   render() {
-    const { articles } = this.props;
+    const { articles, pagination, getNewPage } = this.props;
     return (
       <React.Fragment>
         <Header />
         <Sidebar.Pushable as={Segment} attached="bottom">
           <SideBarMenu />
           <Sidebar.Pusher id="pusher" className="pusher-height">
-            <AllArticlesComponent articles={articles} />
+            <AllArticlesComponent
+              articles={articles}
+              pagination={pagination}
+              getNewPage={getNewPage}
+            />
           </Sidebar.Pusher>
         </Sidebar.Pushable>
         <Footer />
@@ -43,19 +49,28 @@ export class ArticleContainer extends React.Component {
 }
 
 ArticleContainer.propTypes = {
-  fetchArticles: PropTypes.func,
+  fetchAllArticles: PropTypes.func,
+  fetchpageData: PropTypes.func,
+  getNewPage: PropTypes.func.isRequired,
   articles: PropTypes.arrayOf(PropTypes.object),
+  pagination: PropTypes.arrayOf(PropTypes.object).isRequired,
 };
 
 ArticleContainer.defaultProps = {
-  fetchArticles: () => {},
+  fetchAllArticles: () => {},
+  fetchpageData: () => {},
   articles: [],
 };
 
 const mapStateToProps = state => ({
   articles: state.articles.items,
+  pagination: state.articles.count,
+  // set state for article data
+  articleData: state.articles,
 });
 
 export default connect(mapStateToProps, {
-  fetchArticles: fetchArticlesAct,
+  fetchAllArticles: fetchArticles,
+  fetchpageData: pageData,
+  getNewPage: getPage,
 })(ArticleContainer);
diff --git a/src/components/Articles/SingleArticleComponent.jsx b/src/components/Articles/SingleArticleComponent.jsx
@@ -14,7 +14,6 @@ const SingleArticleComponent = ({ article }) => (
       <div className="excerpt">
         {article.description}
         <br />
-        {article.body}
       </div>
       <div className="small-margin tagline">
         <span className="date">{article.created_at}</span>

diff --git a/src/reducers/__tests__/ArticlesReducer.test.js b/src/reducers/__tests__/ArticlesReducer.test.js
@@ -4,6 +4,7 @@ import articleReducer from '../articleReducer';
 import * as types from '../../actions/actionTypes';
 
 const initialState = {
+  count: 0,
   items: [],
   item: {},
 };
@@ -28,6 +29,7 @@ describe('article reducer', () => {
       payload,
     };
     const expectedState = {
+      count: 0,
       item: {},
       items: payload,
     };