Merge 97fd3c0 into 228f6e4

andela · Dec 21, 2018 · 8065ba3 · 8065ba3
2 parents 228f6e4 + 97fd3c0
commit 8065ba3
Show file tree

Hide file tree

Showing 34 changed files with 718 additions and 391 deletions.
diff --git a/package.json b/package.json
@@ -72,6 +72,7 @@
     "jest-puppeteer": "^3.5.2",
     "jquery": "^3.3.1",
     "jsdom": "^13.0.0",
+    "lodash": "^4.17.11",
     "mini-css-extract-plugin": "^0.4.5",
     "moxios": "^0.4.0",
     "node-sass": "^4.10.0",

diff --git a/src/__snapshots__/index.test.js.snap b/src/__snapshots__/index.test.js.snap
@@ -63,7 +63,7 @@ exports[`Provider and App renders <Provider/> correctly 2`] = `
     />
     <Route
       component={[Function]}
-      path="/articles"
+      path="/articles/page/:pageNumber"
     />
     <Route
       component={[Function]}

diff --git a/src/actions/articleActions.js b/src/actions/articleActions.js
@@ -17,12 +17,13 @@ export const showErrorAction = payload => ({
   payload, // error message
 });
 
-export const fetchArticlesThunk = () => dispatch => axios.get(`${APP_URL}/articles`)
+
+export const fetchArticlesThunk = pageNumber => dispatch => axios.get(`${APP_URL}/articles?page=${pageNumber}`)
   .then((response) => {
-    dispatch(fetchArticlesSuccess(response.data.results));
+    dispatch(fetchArticlesSuccess(response.data));
   })
-  .catch(() => {
-    dispatch(fetchArticlesFailure('Check your internet conectivity'));
+  .catch((error) => {
+    dispatch(fetchArticlesFailure(error.response.data.results));
   });
 
 

diff --git a/src/actions/likedislikeActions.js b/src/actions/likedislikeActions.js
@@ -20,7 +20,7 @@ export const likeDislikeArticleThunk = likeObj => (dispatch) => {
       .then((response) => {
         dispatch(likeDislikeArticleAction(payload(response)));
       })
-      .catch(() => {});
+      .catch(() => { });
   }
   return axios.post(url, likeObj, headerValue)
     .then((response) => {

diff --git a/src/actions/loginActions/loginActions.test.js b/src/actions/loginActions/loginActions.test.js
@@ -53,12 +53,8 @@ describe('Login Actions tests', () => {
       status: 400,
       response: { error: 'Not found' },
     });
-    const expectedtActions = [{
-      payload: { response: undefined },
-      type: ACTION_TYPE.USER_LOGIN_SUCCESS,
-    }];
     const store = mockStore({});
-    returnExpect(store, expectedtActions);
+    returnExpect(store, expectedtActionsLogin);
   });
   test('Login unsuccessfull', () => {
     moxios.stubRequest(`${APP_URL}/users/login`, {

diff --git a/src/actions/tests/articleActions.test.js b/src/actions/tests/articleActions.test.js
@@ -12,8 +12,9 @@ import {
 import ACTION_TYPE from '../actionTypes';
 import APP_URL from '../../utils/constants';
 
-describe('Article component', () => {
+describe('get articles component', () => {
   let store;
+  const pageNumber = 1;
   let url;
   let sampleId;
 
@@ -32,7 +33,7 @@ describe('Article component', () => {
   it('should handle fetchArticlesFailure', () => {
     const errorMessage = 'Check your internet conectivity';
     moxios.stubRequest(
-      `${APP_URL}/articles`,
+      `${APP_URL}/articles?page=${pageNumber}`,
       {
         status: 400,
         response: {
@@ -44,7 +45,7 @@ describe('Article component', () => {
     );
     store.clearActions();
     const expectedActions = [{ errorMessage, type: 'FETCH_ARTICLES_FAILURE' }];
-    store.dispatch(fetchArticlesThunk()).then(() => {
+    store.dispatch(fetchArticlesThunk(pageNumber)).catch(() => {
       expect(store.getActions()).toEqual(expectedActions);
     });
   });
@@ -59,17 +60,17 @@ describe('Article component', () => {
       ],
     };
     moxios.stubRequest(
-      `${APP_URL}/articles`,
+      `${APP_URL}/articles?page=${pageNumber}`,
       {
         status: 200,
         response: mockData,
       },
     );
     store.clearActions();
     const expectedActions = [
-      { articles: [{ body: '', title: '' }], type: 'FETCH_ARTICLES_SUCCESS' },
+      { articles: { results: [{ body: '', title: '' }] }, type: 'FETCH_ARTICLES_SUCCESS' },
     ];
-    store.dispatch(fetchArticlesThunk()).then(() => {
+    store.dispatch(fetchArticlesThunk(pageNumber)).then(() => {
       expect(store.getActions()).toEqual(expectedActions);
     });
   });
@@ -115,7 +116,7 @@ describe('Article component', () => {
       .then(() => {
         expect(store.getActions()).toEqual(expectedActions);
       })
-      .catch(() => {});
+      .catch(() => { });
   });
 
   test('get article thunk action with error', () => {
@@ -128,7 +129,7 @@ describe('Article component', () => {
       .then(() => {
         expect(store.getActions()).toEqual(expectedActions);
       })
-      .catch(() => {});
+      .catch(() => { });
   });
 
   test('get like-status thunk action', () => {
@@ -160,6 +161,6 @@ describe('Article component', () => {
       .then(() => {
         expect(store.getActions()).toEqual(expectedActions);
       })
-      .catch(() => {});
+      .catch(() => { });
   });
 });
diff --git a/src/actions/tests/likedislikeActions.test.js b/src/actions/tests/likedislikeActions.test.js
@@ -38,12 +38,12 @@ describe('Like/Dislike Actions', () => {
       .then(() => {
         expect(store.getActions()).toEqual(expectedActions);
       })
-      .catch(() => {});
+      .catch(() => { });
     // if the article hasn't been liked/disliked before (likeDislikeStatus='')
     store.dispatch(likeDislikeArticleThunk({ ...likeObj, likeDislikeStatus: '' }))
       .then(() => {
         expect(store.getActions()).toEqual(expectedActions);
       })
-      .catch(() => {});
+      .catch(() => { });
   });
 });
diff --git a/src/commons/initialStates.js b/src/commons/initialStates.js
@@ -23,7 +23,7 @@ const initialState = {
         email: '',
       },
     },
-    articles: [],
+    articles: {},
     errorMessage: '',
   },
   deleteArticleReducer: {},

diff --git a/src/components/App/index.js b/src/components/App/index.js
@@ -31,7 +31,7 @@ const App = () => (
         <Route exact path="/" component={Home} />
         <Route path="/login" component={LoginPage} />
         <Route path="/signup" component={SignUpPageConnected} />
-        <Route path="/articles" component={Articles} />
+        <Route path="/articles/page/:pageNumber" component={Articles} />
         <Route path="/article/:articleId" component={ArticlePageConnected} />
         <Route path="/profile" component={ProfileConnected} />
         <Route path="/profiles/edit" component={EditProfilePageConnected} />

diff --git a/src/components/Articles/Articles.scss b/src/components/Articles/Articles.scss
@@ -71,3 +71,6 @@ $primaryDarker: #345F5B;
     }
   }
 }
+.NotFound{
+  padding-top: 250px;
+}
diff --git a/src/components/Articles/index.test.js b/src/components/Articles/index.test.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import ArticleDisplay from '.';
+
+
+describe('Test  pagination', () => {
+  const article = {
+    count: 44,
+    title: 'hello',
+    description: 'World',
+    image_url: 'https://helloworld.png',
+  };
+
+  const ArticleDisplaywrapper = shallow(
+    <ArticleDisplay article={article} />,
+  );
+
+  test('ArticleDisplay shpuld render corretly', () => {
+    expect(ArticleDisplaywrapper.find('.article-card').length).toBe(1);
+  });
+});
diff --git a/src/components/Pagination/__snapshots__/index.test.js.snap b/src/components/Pagination/__snapshots__/index.test.js.snap
@@ -0,0 +1,68 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test  pagination Snap shot pagination Component 1`] = `
+<div>
+  <br />
+  <ul
+    className="pagination justify-content-center"
+  >
+    <li
+      className="page-item disabled"
+    >
+      <a
+        className="page-link"
+        href="articles/page/0"
+        tabIndex="-1"
+      >
+        Previous
+      </a>
+    </li>
+    <li
+      className="page-item active"
+      key="1"
+    >
+       
+      <a
+        className="page-link"
+        href="articles/page/1"
+      >
+        1
+      </a>
+    </li>
+    <li
+      className="page-item null"
+      key="2"
+    >
+       
+      <a
+        className="page-link"
+        href="articles/page/2"
+      >
+        2
+      </a>
+    </li>
+    <li
+      className="page-item null"
+      key="3"
+    >
+       
+      <a
+        className="page-link"
+        href="articles/page/3"
+      >
+        3
+      </a>
+    </li>
+    <li
+      className="page-item null"
+    >
+      <a
+        className="page-link"
+        href="articles/page/2"
+      >
+        Next
+      </a>
+    </li>
+  </ul>
+</div>
+`;
diff --git a/src/components/Pagination/index.js b/src/components/Pagination/index.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
+
+const Pagination = ({ article, pageNumber }) => {
+  const activePage = number => (number === Number(pageNumber) ? 'active' : null);
+  const disablePrevious = (num1, num2) => (num1 === num2 ? 'disabled' : null);
+
+  const numberOfpages = Math.ceil(article.count / 12);
+  const ArraynumberOfpages = _.range(1, numberOfpages + 1);
+  const pages = ArraynumberOfpages.map(number => (
+    <li key={number} className={`page-item ${activePage(number)}`}>
+      {' '}
+      <a className="page-link" href={`articles/page/${number}`}>{number}</a>
+    </li>
+  ));
+
+  return (
+    <div>
+      <br />
+      <ul className="pagination justify-content-center">
+        <li className={`page-item ${disablePrevious(pageNumber, '1')}`}>
+          <a className="page-link" href={`articles/page/${Number(pageNumber) - 1}`} tabIndex="-1">Previous</a>
+        </li>
+        {pages}
+        <li className={`page-item ${disablePrevious(Number(pageNumber), numberOfpages)}`}>
+          <a className="page-link" href={`articles/page/${Number(pageNumber) + 1}`}>Next</a>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+Pagination.propTypes = {
+  article: PropTypes.shape({}).isRequired,
+  pageNumber: PropTypes.string.isRequired,
+};
+
+export default Pagination;
diff --git a/src/components/Pagination/index.test.js b/src/components/Pagination/index.test.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Pagination from '.';
+
+
+describe('Test  pagination', () => {
+  const article = {
+    count: 35,
+  };
+  const pageNumber = '1';
+  const Paginationwrapper = shallow(
+    <Pagination article={article} pageNumber={pageNumber} />,
+  );
+
+  test('Snap shot pagination Component', () => {
+    expect(Paginationwrapper).toMatchSnapshot();
+  });
+  test('Pagination should render correctly', () => {
+    expect(Paginationwrapper.find('.active').length).toBe(1);
+    expect(Paginationwrapper.find('.disabled').length).toBe(1);
+  });
+});
diff --git a/src/components/comments/__snapshots__/index.test.js.snap b/src/components/comments/__snapshots__/index.test.js.snap
@@ -87,6 +87,7 @@ exports[`<Article /> should render correctly 1`] = `
                 2018-12-10T05:23:51.342553Z
               </small>
             </h6>
+            <hr />
           </div>
           <p
             className="card-text"

diff --git a/src/components/comments/index.js b/src/components/comments/index.js
@@ -26,6 +26,7 @@ export const CommentsPage = ({ comments, handleLikeDislike }) => {
                 {comment.created_at}
               </small>
             </h6>
+            <hr />
           </div>
           <p className="card-text">{comment.comment_body}</p>
           <LikeDislike