feat(pagination): implement pagionation support for articles

- ensure articles are paginated and page numbers are displayed [Delivers #165305229]
andela · Jun 18, 2019 · 36e6f1a · 36e6f1a
1 parent 1e75c09
commit 36e6f1a
Show file tree

Hide file tree

Showing 6 changed files with 114 additions and 34 deletions.
diff --git a/src/assets/styles/articles.scss b/src/assets/styles/articles.scss
@@ -60,6 +60,7 @@
   height: 400px;
   border: 1px solid $bordergray;
   margin-bottom: 20px;
+  margin: 10px;
 }
 
 .flip-box-inner {
@@ -83,18 +84,18 @@
   backface-visibility: hidden;
 }
 
-.flip-box-front {
-  background-color: $cardgray;
-  color: $black;
-}
-
 .flip-box-back {
   overflow: hidden !important;
   transform: rotateY(180deg);
 }
 
 .home-card {
   height: 100% !important;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin-right: 0px !important;
+  margin-bottom: 0 !important;
+  margin-left: 0px !important;
 }
 
 .homepage-card-image {
@@ -126,4 +127,11 @@
     height: 4.7%;
     width: 4.7%;
   }
+.pagination {
+  display: flex;
+  justify-content: center;
+}
+
+.page-link {
+  cursor: pointer;
 }
diff --git a/src/components/articles/TagsSearch.js b/src/components/articles/TagsSearch.js
@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import '../../assets/styles/searchComponent.scss';
 
 /*
-* Tags search Component
-* Display tags that contain keyword searched
-*@return {jsx}
-*/
+ * Tags search Component
+ * Display tags that contain keyword searched
+ *@return {jsx}
+ */
 class TagsSearch extends Component {
   render() {
     const { tag } = this.props;

diff --git a/src/components/comments/Comments.js b/src/components/comments/Comments.js
@@ -26,7 +26,6 @@ class Comments extends Component {
     const { slug } = this.props;
     const { isLoading, data } = this.props.myState;
     const comments = data.Comments;
-    console.log(comments);
 
     return (
       <div>

diff --git a/src/redux/actions/FetchArticlesActions.js b/src/redux/actions/FetchArticlesActions.js
@@ -2,7 +2,6 @@ import axios from 'axios';
 import { FETCH_ARTICLES, DELETE_ARTICLE, BASE_URL } from '../constants';
 import { successToast } from '../../helpers';
 
-
 /*
  *Defines the action types for successful all articles fetch
  */
@@ -64,16 +63,15 @@ export const deleteArticleFailure = error => ({
   error,
 });
 
-
 /*
  *Defines the fetchArticles actions and dispatches the right
  *action for either success
  *failure
  */
-export const fetchArticles = () => dispatch => {
+export const fetchArticles = url => dispatch => {
   dispatch({ type: FETCH_ARTICLES });
   return axios
-    .get(`${BASE_URL}/articles/`)
+    .get(url)
     .then(response => {
       dispatch(fetchSuccess(response));
     })
@@ -105,7 +103,7 @@ export const fetchOneArticle = (slug, history) => dispatch => {
  *action for either success
  *failure
  */
-export const fetchByAuthor = (author) => dispatch => {
+export const fetchByAuthor = author => dispatch => {
   dispatch({ type: FETCH_ARTICLES });
   return axios
     .get(`${BASE_URL}/article/search/?author=${author}`)

diff --git a/src/redux/constants/index.js b/src/redux/constants/index.js
@@ -27,3 +27,4 @@ export const DELETE_ARTICLE = 'DELETE_ARTICLE';
 export const CREATE_ARTICLE = 'CREATE_ARTICLE';
 export const UPDATE_ARTICLE = 'UPDATE_ARTICLE';
 export const GET_ONE_ARTICLE = 'GET_ONE_ARTICLE';
+export const ARTICLES_URL = `${BASE_URL}/articles/`;
diff --git a/src/views/AllArticles.js b/src/views/AllArticles.js
@@ -1,19 +1,40 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
-import { CardColumns } from 'react-bootstrap';
+import { CardColumns, CardDeck } from 'react-bootstrap';
 import { connect } from 'react-redux';
 import parse from 'html-react-parser';
 import { fetchArticles } from '../redux/actions/FetchArticlesActions';
 import Article from '../components/articles/Article';
 import { Loader } from '../components/layout/Loader';
+import { ARTICLES_URL } from '../redux/constants';
 
 class AllArticles extends Component {
+  state = {
+    ArticlesPerPage: 9,
+    active: false,
+  };
+
   componentWillMount() {
     const { fetchArticles: fetchAllArticles } = this.props;
-    fetchAllArticles();
+    fetchAllArticles(ARTICLES_URL);
+    console.log(this.state);
   }
 
+  handleClick = e => {
+    const { fetchArticles: fetchAllArticles } = this.props;
+    const id = Number(e.target.id);
+
+    fetchAllArticles(`${ARTICLES_URL}?page=${id}`);
+    this.setState({ active: true });
+  };
+
+  handleLink = e => {
+    const { fetchArticles: fetchAllArticles } = this.props;
+    const url = e.target.id;
+    fetchAllArticles(url);
+  };
+
   render() {
     const {
       articles: { isLoading },
@@ -26,27 +47,80 @@ class AllArticles extends Component {
         },
       } = this.props;
 
-      const { results } = { ...data };
+      const {
+        results, previous, next, count,
+      } = { ...data };
+
+      const { ArticlesPerPage } = this.state;
+
+      // Logic for displaying page numbers
+      const pageNumbers = [];
+      for (let i = 1; i <= Math.ceil(count / ArticlesPerPage); i++) {
+        pageNumbers.push(i);
+      }
 
       return (
         <div className="container">
           <h1>Latest Articles</h1>
-          <CardColumns className="all-articles">
-            {results && results.map((values) => (
-              <Article
-                title={values.title}
-                key={values.id}
-                description={values.description}
-                readtime={values.readtime}
-                created_at={moment(values.created_at).format('MMMM Do YYYY')}
-                author={values.author.username}
-                image={values.image}
-                slug={values.slug}
-                read_count={values.read_count}
-                body={parse(values.body)}
-              />
-            ))}
-          </CardColumns>
+          <CardDeck>
+            {results
+              && results.map(values => (
+                <Article
+                  title={values.title}
+                  key={values.id}
+                  description={values.description}
+                  readtime={values.readtime}
+                  created_at={moment(values.created_at).format('MMMM Do YYYY')}
+                  author={values.author.username}
+                  image={values.image}
+                  slug={values.slug}
+                  read_count={values.read_count}
+                  body={parse(values.body)}
+                />
+              ))}
+          </CardDeck>
+          <div className="pagination">
+            <nav aria-label="Page navigation">
+              <ul className="pagination">
+                {previous ? (
+                  <li className="page-item">
+                    <span
+                      className="page-link"
+                      id={previous}
+                      onClick={this.handleLink}
+                      aria-label="Previous"
+                    >
+                      <span aria-hidden="true">&laquo;</span>
+                      <span className="sr-only">Previous</span>
+                    </span>
+                  </li>
+                ) : null}
+
+                {pageNumbers.map((num, index) => (
+                  <li key={index} className="page-item">
+                    <span id={num} className="page-link" onClick={this.handleClick}>
+                      {num}
+                    </span>
+                  </li>
+                ))}
+
+                {next ? (
+                  <li className="page-item">
+                    <span
+                      className="page-link"
+                      id={next}
+                      onClick={this.handleLink}
+                      aria-label="Next"
+                    >
+                      <span aria-hidden="true">&raquo;</span>
+                      <span className="sr-only">Next</span>
+                    </span>
+                  </li>
+                ) : null}
+              </ul>
+            </nav>
+          </div>
+
           <hr />
         </div>
       );