feature(Like Dislike and Get single Article): implement feedback [Fix…

…es #167484555]
andela · Oct 29, 2019 · 4a85fcc · 4a85fcc
1 parent 86d078f
commit 4a85fcc
Show file tree

Hide file tree

Showing 16 changed files with 119 additions and 42 deletions.
diff --git a/src/app/App.js b/src/app/App.js
@@ -14,7 +14,6 @@ import Profile from '../feature/profile/view_profile/ViewProfileComponent';
 import UpdateProfile from '../feature/profile/update_profile/UpdateProfileComponent';
 import ForgotPassword from '../feature/Reset Password/forgot password/ForgotPasswordComponent';
 import ResetPassword from '../feature/Reset Password/reset password/ResetPasswordComponent';
-import Home from '../feature/homePage/Home';
 import '../../node_modules/font-awesome/css/font-awesome.min.css';
 
 toast.configure();
@@ -38,7 +37,7 @@ function App() {
             <Route path="/signup" component={SignUp} />
             <Route path="/profile" component={Profile} />
             <Route path="/update-profile" component={UpdateProfile} />
-            <Route path="/articles/:slug" component={SingleArticle} />
+            <Route path="/articles/:slug" component={GetSingleArticle} />
             <ProtectedRoutes path="/create" component={CreateArticle} />
           </section>
         </Switch>

diff --git a/src/app/common/CommentCount/CommentCount.scss b/src/app/common/CommentCount/CommentCount.scss
@@ -0,0 +1,17 @@
+.commentCount-box {
+  height: 100px;
+  margin: 0 0 0 1em;
+  float: left;
+}
+.comment {
+  color: black;
+  &_box {
+    display: inline-flex;
+    height: 30px;
+    justify-content: space-between;
+    width: fit-content;
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
diff --git a/src/app/common/CommentCount/CommentCountComponent.js b/src/app/common/CommentCount/CommentCountComponent.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import './CommentCount.scss';
+
+export default function CommentCount({ count }) {
+  return (
+    <div className="commentCount-box">
+      <div className="comment">
+        <span className="comment_count">
+          {count}
+          {count === 1 ? ' comment' : ' comments'}
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/common/CommentCount/__tests__/CommentCountComponent.test.js b/src/app/common/CommentCount/__tests__/CommentCountComponent.test.js
@@ -0,0 +1,21 @@
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import CommentCount from '../CommentCountComponent';
+
+describe('Comment Count Components tests', () => {
+  const wrapper = shallow(<CommentCount count={1} />);
+  it('Should render tags', () => {
+    expect(wrapper.find('div').length).toBe(2);
+    expect(wrapper.find('span').length).toBe(1);
+  });
+  it('Should render 1 comment', () => {
+    expect(wrapper.text()).toEqual('1 comment');
+  });
+});
+describe('Comment Count Components tests', () => {
+  const wrapper = shallow(<CommentCount count={2} />);
+  it('Should render 2 comments', () => {
+    expect(wrapper.text()).toEqual('2 comments');
+  });
+});
diff --git a/src/app/common/config/axiosConfig.js b/src/app/common/config/axiosConfig.js
@@ -1,10 +1,12 @@
-const token = localStorage.getItem('token');
-
-const axiosConfig = {
-  headers: {
-    'Content-Type': 'application/json',
-    Authorization: token
-  }
+export const getToken = () => localStorage.getItem('token');
+const setAxiosConfig = () => {
+  const axiosConfig = {
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: getToken()
+    }
+  };
+  return axiosConfig;
 };
 
-export default axiosConfig;
+export default setAxiosConfig;
diff --git a/src/app/reducers/index.js b/src/app/reducers/index.js
@@ -20,5 +20,5 @@ export default combineReducers({
   crateArticle: article,
   getAllArticles,
   social: socialReducer,
-  getSingleArticle
+  getSingleArticle,
 });
diff --git a/src/feature/articles/createArticle/createArticleAction.js b/src/feature/articles/createArticle/createArticleAction.js
@@ -3,7 +3,7 @@ import axios from 'axios';
 import { toast } from 'react-toastify';
 import { CREATE_ARTICLE_SUCCESS, CREATE_ARTICLE_FAIL } from '../constants';
 import { BACKEND_URL } from '../../../app/common/config/appConfig';
-import axiosConfig from '../../../app/common/config/axiosConfig';
+import setAxiosConfig from '../../../app/common/config/axiosConfig';
 
 config();
 
@@ -25,7 +25,7 @@ const createArticle = (
     const res = await axios.post(
       `${BACKEND_URL}/articles/`,
       formData,
-      axiosConfig
+      setAxiosConfig()
     );
     dispatch({
       type: CREATE_ARTICLE_SUCCESS,

diff --git a/src/feature/articles/getArticles/GetAllArticles.scss b/src/feature/articles/getArticles/GetAllArticles.scss
@@ -125,6 +125,7 @@
       }
       .likeDislike-box {
         height: 40px;
+        pointer-events: none;
       }
     }
   }

diff --git a/src/feature/articles/getArticles/GetAllArticlesComponent.js b/src/feature/articles/getArticles/GetAllArticlesComponent.js
@@ -9,6 +9,7 @@ import defautImage from '../../../app/common/images/defaultImage.png';
 import avatar from '../../../app/common/images/avatar.png';
 import getAllArticles from './GetAllArticlesAction';
 import LikeDilsikeArticle from '../likeDislikeArticles/LikeDislikeComponent';
+import CommentCountComponent from '../../../app/common/CommentCount/CommentCountComponent';
 import './GetAllArticles.scss';
 
 export class GetAllArticles extends Component {
@@ -90,8 +91,13 @@ export class GetAllArticles extends Component {
                         </div>
                       </div>
                       <hr className="divider" />
+                      <CommentCountComponent
+                        className="btn__commentCount"
+                        count={article.commentCount}
+                      />
+
                       <LikeDilsikeArticle
-                        className="btn__likesDislikes"
+                        className="disabled btn__likesDislikes"
                         likes={article.likes}
                         dislikes={article.dislikes}
                       />

diff --git a/src/feature/articles/getSingleArticle/GetSingleArticle.scss b/src/feature/articles/getSingleArticle/GetSingleArticle.scss
@@ -1,6 +1,7 @@
 .wrapper {
   width: 80%;
-  margin: 20px auto;
+  margin: 0 auto;
+  margin-bottom: 2em !important;
   padding: 5px 30px;
   background: #f8f8f8;
 }

diff --git a/src/feature/articles/getSingleArticle/GetSingleArticleComponent.js b/src/feature/articles/getSingleArticle/GetSingleArticleComponent.js
@@ -12,13 +12,15 @@ import DefaultAvatar from '../../../app/common/images/avatar.png';
 import ellipsis from '../../../app/common/images/ellipsis.png';
 import bookmark from '../../../app/common/images/bookmark.png';
 import ShareArticle from '../shareArticle/ShareArticleComponent';
+import CommentCountComponent from '../../../app/common/CommentCount/CommentCountComponent';
 import './GetSingleArticle.scss';
 
 export class ViewSingleArticle extends Component {
   componentDidMount() {
     const { GetSingleArticle } = this.props;
     const { slug } = this.props.match.params;
     GetSingleArticle(slug);
+    window.scrollTo(0, 0);
   }
 
   render() {
@@ -34,7 +36,8 @@ export class ViewSingleArticle extends Component {
         dislikes,
         createdAt,
         readTime,
-        averageRatings
+        averageRatings,
+        commentCount
       }
     } = this.props.article;
     const { userName, image } = author;
@@ -60,10 +63,7 @@ export class ViewSingleArticle extends Component {
                   .fromNow()}
               </span>
               {'  '}
-              <span className="heading__munite">
-                {readTime}
-.
-              </span>
+              <span className="heading__munite">{readTime}.</span>
               <span>
                 <div className="heading__avarageRating">
                   <AverageRating avarageRatings={averageRatings} />
@@ -75,8 +75,7 @@ export class ViewSingleArticle extends Component {
             <div className="heading__right-item">
               <span className="bookmark">
                 {' '}
-                <img src={bookmark} className="heading__bookmark" alt="" />
-                {' '}
+                <img src={bookmark} className="heading__bookmark" alt="" />{' '}
               </span>
               <span className="menu">
                 <img src={ellipsis} className="heading__menu" alt=" " />
@@ -100,7 +99,10 @@ export class ViewSingleArticle extends Component {
             <div className="status__comment">
               <BrowserRouter>
                 <Link to="#?" className="status__comment">
-                  4 comments
+                  <CommentCountComponent
+                    className="btn__commentCount"
+                    count={commentCount}
+                  />
                 </Link>
               </BrowserRouter>
             </div>
@@ -148,6 +150,10 @@ const mapStateToProps = ({ getSingleArticle, login }) => ({
   currentUser: login,
   isAuthenticated: login
 });
+const mapDispatchToProps = {
+  GetSingleArticle
+};
+
 ViewSingleArticle.defaultProps = {
   location: {
     pathname: ''
@@ -158,5 +164,5 @@ ViewSingleArticle.defaultProps = {
 };
 export default connect(
   mapStateToProps,
-  { GetSingleArticle }
+  mapDispatchToProps
 )(ViewSingleArticle);
diff --git a/src/feature/articles/getSingleArticle/__tests__/GetSingleArticleComponent.test.js b/src/feature/articles/getSingleArticle/__tests__/GetSingleArticleComponent.test.js
@@ -28,8 +28,10 @@ const renderViewSingleArticle = args => {
 
 describe('Get All Articles Components tests', () => {
   it('Should render a form inputs', () => {
+    window.scrollTo = jest.fn();
     const wrapper = renderViewSingleArticle();
     expect(wrapper.find('div').length).toBe(20);
     expect(wrapper.find('img').length).toBe(3);
+    expect(window.scrollTo).toBeCalledWith(0, 0);
   });
 });
diff --git a/src/feature/articles/likeDislikeArticles/LikeDislike.scss b/src/feature/articles/likeDislikeArticles/LikeDislike.scss
@@ -6,6 +6,7 @@
 }
 .likes,
 .dislikes {
+  color: black;
   display: flex;
   height: 30px;
   justify-content: space-between;

diff --git a/src/feature/articles/likeDislikeArticles/LikeDislikeAction.js b/src/feature/articles/likeDislikeArticles/LikeDislikeAction.js
@@ -8,14 +8,14 @@ import {
   DISLIKE_ARTICLE_SUCCESS,
   DISLIKE_ARTICLE_FAIL
 } from '../constants';
-import axiosConfig from '../../../app/common/config/axiosConfig';
+import setAxiosConfig from '../../../app/common/config/axiosConfig';
 
 export const likeArticle = slug => async dispatch => {
   try {
     const { data } = await axios.put(
       `${BACKEND_URL}/articles/${slug}/like`,
       {},
-      axiosConfig
+      setAxiosConfig()
     );
     dispatch({
       type: LIKE_ARTICLE_SUCCESS,
@@ -37,7 +37,7 @@ export const dislikeArticle = slug => async dispatch => {
     const { data } = await axios.put(
       `${BACKEND_URL}/articles/${slug}/dislike`,
       {},
-      axiosConfig
+      setAxiosConfig()
     );
     dispatch({
       type: DISLIKE_ARTICLE_SUCCESS,

diff --git a/src/feature/articles/likeDislikeArticles/__tests__/LikeDislikeAction.test.js b/src/feature/articles/likeDislikeArticles/__tests__/LikeDislikeAction.test.js
@@ -3,12 +3,6 @@ import { makeMockStore } from '../../../../app/common/config/mockStore';
 import { likeArticle, dislikeArticle } from '../LikeDislikeAction';
 import mockArticle from '../../../../__mocks__/mockData';
 
-import {
-  GET_SINGLE_ARTICLE_SUCCESS,
-  LIKE_ARTICLE_FAIL,
-  DISLIKE_ARTICLE_FAIL
-} from '../../constants';
-
 const store = makeMockStore({ article: {} });
 describe('Like Article Action', () => {
   beforeEach(() => moxios.install());
@@ -29,8 +23,11 @@ describe('Like Article Action', () => {
         }
       });
     });
+    const expected = ['LIKE_ARTICLE_FAIL'];
     return store.dispatch(likeArticle(error)).then(() => {
-      expect(store.getActions().length).toEqual(1);
+      const dispatchedActions = store.getActions();
+      const dispatchedTypes = dispatchedActions.map(action => action.type);
+      expect(dispatchedTypes).toEqual(expected);
     });
   });
 });
@@ -41,7 +38,7 @@ describe('Dislike Article Action', () => {
     moxios.uninstall();
     store.clearActions();
   });
-  it('Should dispatch DISLIKE_ARTICLE_SUCCESS action', async () => {
+  it('Should dispatch DISLIKE_ARTICLE_FAIL action', async () => {
     const error = 'No articles the moment';
     moxios.wait(() => {
       const request = moxios.requests.mostRecent();
@@ -54,8 +51,11 @@ describe('Dislike Article Action', () => {
         }
       });
     });
+    const expected = ['DISLIKE_ARTICLE_FAIL'];
     return store.dispatch(dislikeArticle(error)).then(() => {
-      expect(store.getActions().length).toEqual(1);
+      const dispatchedActions = store.getActions();
+      const dispatchedTypes = dispatchedActions.map(action => action.type);
+      expect(dispatchedTypes).toEqual(expected);
     });
   });
 });
@@ -67,22 +67,25 @@ describe('Like and Dislike sucess  Article Actions ', () => {
     store.clearActions();
   });
   const slug = 'Should dispatch GET_SINGLE_ARTICLE_SUCCESS-3244';
-  it('Should dispatch DISLIKE_ARTICLE_SUCCESS action', async () => {
+  it('Should dispatch LIKE_ARTICLE_SUCCESS action', async () => {
     moxios.wait(() => {
       const request = moxios.requests.mostRecent();
       request.respondWith({
         status: 200,
         response: {
           data: {
-            article: mockArticle.article
+            message: 'You have successfully liked'
           }
         }
       });
     });
+    const expected = ['LIKE_ARTICLE_SUCCESS'];
     await store.dispatch(likeArticle(slug));
-    expect(store.getActions().length).toEqual(1);
+    const dispatchedActions = store.getActions();
+    const dispatchedTypes = dispatchedActions.map(action => action.type);
+    expect(dispatchedTypes).toEqual(expected);
   });
-  it('Should dispatch  GET_SINGLE_ARTICLE_SUCCESS action', async () => {
+  it('Should dispatch  DISLIKE_ARTICLE_SUCCESS action', async () => {
     moxios.wait(() => {
       const request = moxios.requests.mostRecent();
       request.respondWith({
@@ -94,8 +97,11 @@ describe('Like and Dislike sucess  Article Actions ', () => {
         }
       });
     });
+    const expected = ['DISLIKE_ARTICLE_SUCCESS'];
     return store.dispatch(dislikeArticle(slug)).then(() => {
-      expect(store.getActions().length).toEqual(1);
+      const dispatchedActions = store.getActions();
+      const dispatchedTypes = dispatchedActions.map(action => action.type);
+      expect(dispatchedTypes).toEqual(expected);
     });
   });
 });

diff --git a/src/feature/articles/likeDislikeArticles/__tests__/LikeDislikeComponent.test.js b/src/feature/articles/likeDislikeArticles/__tests__/LikeDislikeComponent.test.js
@@ -5,7 +5,7 @@ import { LikeDislike } from '../LikeDislikeComponent';
 
 describe('Like and Dislike Components tests', () => {
   const wrapper = shallow(<LikeDislike />);
-  it('Should render a form inputs', () => {
+  it('Should render tags and classes', () => {
     expect(wrapper.find('.likes').length).toBe(1);
     expect(wrapper.find('.dislikes').length).toBe(1);
     expect(wrapper.find('div').length).toBe(3);