From 950414d87446185ada2413561dcdfad5b6783f6b Mon Sep 17 00:00:00 2001
From: Arthur Kalule <arthur.kalule@andela.com>
Date: Fri, 14 Jun 2019 09:21:57 +0300
Subject: [PATCH] feat(comment): add comment on article

 - add comment reducer and actions tests and implementation
 - add comment form

 [starts #165273535]
---
 src/components/Apps/App.js                    |   2 +
 src/components/Apps/App.test.js               |   1 -
 src/components/comment/Comment.test.js        | 113 ++++++++++++++++++
 src/components/comment/CommentBox.js          |  44 +++++++
 src/components/comment/CommentForm.js         | 107 +++++++++++++++++
 src/components/comment/DeleteComment.js       |  35 ++++++
 .../__snapshots__/Comment.test.js.snap        |  33 +++++
 src/components/comment/index.js               |  91 ++++++++++++++
 src/store/actions/__mocks__/index.js          |  26 ++++
 .../commentActions/commentActions.test.js     |  47 ++++++++
 src/store/actions/commentActions/index.js     | 112 +++++++++++++++++
 src/store/actions/commentTypes.js             |   5 +
 .../reducers/commentReducer/__mocks__.js      |  38 ++++++
 .../commentReducer/commentReducer.test.js     |  76 ++++++++++++
 src/store/reducers/commentReducer/index.js    |  44 +++++++
 src/store/rootReducer.js                      |   4 +-
 16 files changed, 776 insertions(+), 2 deletions(-)
 create mode 100644 src/components/comment/Comment.test.js
 create mode 100644 src/components/comment/CommentBox.js
 create mode 100644 src/components/comment/CommentForm.js
 create mode 100644 src/components/comment/DeleteComment.js
 create mode 100644 src/components/comment/__snapshots__/Comment.test.js.snap
 create mode 100644 src/components/comment/index.js
 create mode 100644 src/store/actions/commentActions/commentActions.test.js
 create mode 100644 src/store/actions/commentActions/index.js
 create mode 100644 src/store/actions/commentTypes.js
 create mode 100644 src/store/reducers/commentReducer/__mocks__.js
 create mode 100644 src/store/reducers/commentReducer/commentReducer.test.js
 create mode 100644 src/store/reducers/commentReducer/index.js

diff --git a/src/components/Apps/App.js b/src/components/Apps/App.js
index c24ea38..ceda567 100644
--- a/src/components/Apps/App.js
+++ b/src/components/Apps/App.js
@@ -5,6 +5,7 @@ import PasswordResetPage from 'pages/PasswordReset';
 import PageNotFound from 'pages/Error';
 
 import 'assets/MainStyle.scss';
+import Comment from 'components/comment';
 
 class App extends Component {
   render() {
@@ -12,6 +13,7 @@ class App extends Component {
       <Router>
         <Switch>
           <Route exact path="/" render={props => <LandingPage {...props} />} />
+          <Route path="/comments" render={props => <Comment {...props} articleSlug="javascript-code" />} />
           <Route path="/reset-password" render={props => <PasswordResetPage {...props} />} />
           <Route component={PageNotFound} />
         </Switch>
diff --git a/src/components/Apps/App.test.js b/src/components/Apps/App.test.js
index c823227..41ad499 100644
--- a/src/components/Apps/App.test.js
+++ b/src/components/Apps/App.test.js
@@ -3,7 +3,6 @@ import { Provider } from 'react-redux';
 import { shallow, mount } from 'enzyme';
 import store from 'store/store';
 import { LandingPage } from 'pages/Landing';
-import PageNotFound from 'pages/Error';
 import { MemoryRouter } from 'react-router';
 import App from './App';
 
diff --git a/src/components/comment/Comment.test.js b/src/components/comment/Comment.test.js
new file mode 100644
index 0000000..cd06434
--- /dev/null
+++ b/src/components/comment/Comment.test.js
@@ -0,0 +1,113 @@
+import React from 'react';
+import { CommentForm, mapStateToProps, mapDispatchToProps } from 'components/Comment/CommentForm';
+import { shallow } from 'enzyme';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import moxios from 'moxios';
+
+
+describe('Comment component', () => {
+  const props = {
+    articleSlug: '',
+    createNewComment: jest.fn(),
+    username: 'dojo',
+  };
+
+  const initialState = {
+    commentBody: '',
+  };
+  const mockStore = configureStore([thunk]);
+  let wrapper;
+  let store;
+
+
+  beforeEach(() => {
+    store = mockStore(initialState);
+    moxios.install();
+    wrapper = shallow(<CommentForm store={store} {...props} />);
+  });
+
+  afterEach(() => {
+    moxios.uninstall();
+  });
+
+  it('should render without crashing', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should limit commenting on articles to authenticated users', () => {
+    wrapper.setProps({ username: '' });
+    expect(wrapper.text()).toBe('login to comment on this article');
+  });
+
+  it('should handle the comment body input change event', () => {
+    const event = {
+      target: {
+        name: 'commentBody',
+        value: 'My first comment',
+      },
+    };
+
+    wrapper.instance().handleChange(event);
+    expect(wrapper.instance().state.commentBody).toBe(event.target.value);
+  });
+
+  it('should handle the onSubmit event', () => {
+    const instance = wrapper.instance();
+    wrapper.setState({ commentBody: '' });
+    wrapper.setProps({ articleSlug: 'my_article_slug' });
+    const event = {
+      target: {
+        type: 'submit',
+        name: 'addComment',
+      },
+      preventDefault: jest.fn(),
+    };
+
+    instance.handleCommentSubmit(event);
+
+    expect(instance.props.createNewComment.mock.calls.length).toBe(0);
+
+    wrapper.setState({ commentBody: 'My first comment' });
+    instance.handleCommentSubmit(event);
+
+    expect(instance.props.createNewComment.mock.calls.length).toBe(1);
+    expect(instance.props.createNewComment).toBeCalled();
+  });
+
+  it('should show an error on submitting a comment with  on missing comment body', () => {
+    wrapper.setState({ error: 'Comment body is required' });
+    expect(wrapper.find('.error-msg').text()).toBe('Comment body is required');
+  });
+
+  it('should show a success message on successfully commenting on an article', () => {
+    wrapper.setProps({ success: true });
+    expect(wrapper.find('.success-msg').text()).toBe('Comment added successfully');
+  });
+
+
+  it('should map state to props', () => {
+    const mockedState = {
+      loginReducer: {
+        user: {
+          username: 'arthur'
+        }
+      },
+      commentReducer: {
+        success: true,
+      }
+    };
+
+    const state = mapStateToProps(mockedState);
+
+    expect(state.username).toEqual('arthur');
+    expect(state.success).toEqual(true);
+  });
+
+  it('should map dispatch to props', () => {
+    const mockedDispatch = jest.fn();
+
+    mapDispatchToProps(mockedDispatch).createNewComment();
+    expect(mockedDispatch).toHaveBeenCalled();
+  });
+});
diff --git a/src/components/comment/CommentBox.js b/src/components/comment/CommentBox.js
new file mode 100644
index 0000000..279abc4
--- /dev/null
+++ b/src/components/comment/CommentBox.js
@@ -0,0 +1,44 @@
+// react
+import React from 'react';
+import PropTypes from 'prop-types';
+import DeleteComment from 'components/comment/DeleteComment';
+
+
+const CommentBox = (
+  {
+    id, author: { username, }, created_at, body, articleSlug, deleteComment
+  }
+) => (
+  <div className="comment">
+    <span>
+      {' '}
+      {id}
+    </span>
+    <h4>
+      <b>username</b>
+      {username}
+      {' '}
+    </h4>
+    <p>{created_at}</p>
+    <p>{body}</p>
+    <DeleteComment
+      author={username}
+      id={id}
+      articleSlug={articleSlug}
+      deleteComment={deleteComment}
+    />
+  </div>
+);
+
+CommentBox.propTypes = {
+  deleteComment: PropTypes.func.isRequired,
+  articleSlug: PropTypes.string.isRequired,
+  id: PropTypes.number.isRequired,
+  body: PropTypes.string.isRequired,
+  created_at: PropTypes.string.isRequired,
+  author: PropTypes.shape({
+    username: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+export default CommentBox;
diff --git a/src/components/comment/CommentForm.js b/src/components/comment/CommentForm.js
new file mode 100644
index 0000000..a724c20
--- /dev/null
+++ b/src/components/comment/CommentForm.js
@@ -0,0 +1,107 @@
+import React, { Component } from 'react';
+
+// third party libraries
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+// comment actions
+import createComment from 'store/actions/commentActions';
+
+export class CommentForm extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      commentBody: '',
+      error: '',
+    };
+  }
+
+  handleCommentSubmit = (e) => {
+    e.preventDefault();
+
+
+    const { commentBody } = this.state;
+    const { createNewComment, articleSlug } = this.props;
+
+    if (articleSlug && commentBody) {
+      createNewComment(articleSlug, commentBody);
+    }
+  };
+
+  handleChange = (e) => {
+    const { name, value } = e.target;
+
+    this.setState({ [name]: value });
+  };
+
+  renderCommentError = error => (
+    error ? <div className="error-msg text-danger">{ error }</div> : ''
+  );
+
+  renderCommentSuccess = success => (success ? <div className="success-msg text-success">Comment added successfully</div> : '');
+
+
+  render() {
+    const { commentBody, error } = this.state;
+    const { success, username } = this.props;
+    if (!username) {
+      return (<div>login to comment on this article</div>);
+    }
+
+    return (
+      <div>
+        <div>
+          <h2>Add your Comment Here</h2>
+          {this.renderCommentError(error)}
+          {this.renderCommentSuccess(success)}
+
+          <form onSubmit={this.handleCommentSubmit}>
+            <div>
+              <textarea
+                placeholder="Comment"
+                rows="3"
+                required
+                name="commentBody"
+                value={commentBody}
+                onChange={this.handleChange}
+              />
+            </div>
+            <div>
+              <button type="submit" name="addComment">Post Comment</button>
+            </div>
+          </form>
+        </div>
+
+      </div>
+    );
+  }
+}
+
+// default props
+CommentForm.defaultProps = {
+  username: '',
+  success: false,
+};
+
+// Props Validation
+CommentForm.propTypes = {
+  createNewComment: PropTypes.func.isRequired,
+  articleSlug: PropTypes.string.isRequired,
+  success: PropTypes.bool,
+  username: PropTypes.string,
+};
+
+// mapState to props
+export const mapStateToProps = (state) => {
+  const { commentReducer: { success }, loginReducer: { user: { username } } } = state;
+  return { success, username };
+};
+
+// map dispatch to props
+export const mapDispatchToProps = dispatch => ({
+  createNewComment(articleSlug, commentBody) {
+    dispatch(createComment(articleSlug, commentBody));
+  }
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(CommentForm);
diff --git a/src/components/comment/DeleteComment.js b/src/components/comment/DeleteComment.js
new file mode 100644
index 0000000..197312a
--- /dev/null
+++ b/src/components/comment/DeleteComment.js
@@ -0,0 +1,35 @@
+// react
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { isAuthenticated } from 'utils';
+
+
+const DeleteComment = ({
+  id, author, articleSlug, deleteComment
+}) => (
+  <Fragment>
+    {isAuthenticated().username === author && (
+      (
+      <button
+        type="button"
+        onClick={(event) => {
+          event.preventDefault();
+          deleteComment(articleSlug, id);
+        }}
+      >
+Delete
+      </button>
+      )
+    )
+  }
+  </Fragment>
+);
+
+DeleteComment.propTypes = {
+  articleSlug: PropTypes.string.isRequired,
+  id: PropTypes.number.isRequired,
+  author: PropTypes.string.isRequired,
+  deleteComment: PropTypes.func.isRequired,
+};
+
+export default DeleteComment;
diff --git a/src/components/comment/__snapshots__/Comment.test.js.snap b/src/components/comment/__snapshots__/Comment.test.js.snap
new file mode 100644
index 0000000..c27b473
--- /dev/null
+++ b/src/components/comment/__snapshots__/Comment.test.js.snap
@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Comment component should render without crashing 1`] = `
+<div>
+  <div>
+    <h2>
+      Add your Comment Here
+    </h2>
+    <form
+      onSubmit={[Function]}
+    >
+      <div>
+        <textarea
+          name="commentBody"
+          onChange={[Function]}
+          placeholder="Comment"
+          required={true}
+          rows="3"
+          value=""
+        />
+      </div>
+      <div>
+        <button
+          name="addComment"
+          type="submit"
+        >
+          Post Comment
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
+`;
diff --git a/src/components/comment/index.js b/src/components/comment/index.js
new file mode 100644
index 0000000..3efc0fc
--- /dev/null
+++ b/src/components/comment/index.js
@@ -0,0 +1,91 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { readComments, removeComment } from 'store/actions/commentActions';
+
+
+import CommentBox from './CommentBox';
+// eslint-disable-next-line import/no-named-as-default
+import CommentForm from './CommentForm';
+
+export class Comment extends Component {
+  componentDidMount() {
+    const { articleSlug, getComments } = this.props;
+    getComments(articleSlug);
+  }
+
+
+  render() {
+    const {
+      comments, commentsCount, articleSlug, deleteComment
+    } = this.props;
+
+    const commentList = comments.reverse().map(comment => (
+      <CommentBox
+        key={comment.id}
+        {...comment}
+        deleteComment={deleteComment}
+        articleSlug={articleSlug}
+      />
+    ));
+
+
+    return (
+      <div>
+        <span>
+          {commentsCount}
+          {' '}
+          comments
+        </span>
+        <CommentForm articleSlug={articleSlug} />
+        {commentList}
+      </div>
+    );
+  }
+}
+
+
+// props validation
+Comment.propTypes = {
+  articleSlug: PropTypes.string.isRequired,
+  commentsCount: PropTypes.number.isRequired,
+  getComments: PropTypes.func.isRequired,
+  deleteComment: PropTypes.func.isRequired,
+  comments: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    created_at: PropTypes.string.isRequired,
+    updated_at: PropTypes.string.isRequired,
+    body: PropTypes.string.isRequired,
+    author: PropTypes.shape({
+      firstname: PropTypes.string.isRequired,
+      lastname: PropTypes.string.isRequired,
+      bio: PropTypes.string.isRequired,
+      image: PropTypes.string.isRequired,
+      email: PropTypes.string.isRequired,
+    }).isRequired,
+    highlighted_text: PropTypes.string.isRequired,
+    start_index: PropTypes.string.isRequired,
+    end_index: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+// map state to props
+export const mapStateToProps = (state) => {
+  const { comments, commentsCount } = state.commentReducer;
+
+
+  return { comments, commentsCount };
+};
+
+// map dispatch to props
+export const mapDispatchToProps = dispatch => ({
+  getComments(articleSlug) {
+    dispatch(readComments(articleSlug));
+  },
+  deleteComment(articleSlug, commentId) {
+    dispatch(removeComment(articleSlug, commentId));
+  }
+});
+
+// export default CommentList;
+export default connect(mapStateToProps, mapDispatchToProps)(Comment);
diff --git a/src/store/actions/__mocks__/index.js b/src/store/actions/__mocks__/index.js
index f903679..73807b7 100644
--- a/src/store/actions/__mocks__/index.js
+++ b/src/store/actions/__mocks__/index.js
@@ -36,6 +36,32 @@ const data = {
       },
     },
   },
+  addComment: {
+    success: {
+      comment: {
+        created_at: '2019-06-14T05:58:57.206787Z',
+        updated_at: '2019-06-14T05:58:57.206825Z',
+        author: {
+          firstname: '',
+          lastname: '',
+          username: 'adojo',
+          bio: '',
+          image: '',
+          email: 'user@ahhaven.com'
+        },
+        body: 'my third comment',
+        id: 1
+      }
+
+    },
+    failure: {
+      errors: {
+        error: [
+          'comment error',
+        ],
+      },
+    },
+  },
 };
 
 export default data;
diff --git a/src/store/actions/commentActions/commentActions.test.js b/src/store/actions/commentActions/commentActions.test.js
new file mode 100644
index 0000000..24a7c54
--- /dev/null
+++ b/src/store/actions/commentActions/commentActions.test.js
@@ -0,0 +1,47 @@
+// helper functions
+import { ADD_COMMENT_SUCCESS, COMMENT_REQUEST } from 'store/actions/commentTypes';
+
+import createComment from 'store/actions/commentActions';
+import moxios from 'moxios';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import data from 'store/actions/__mocks__/index';
+
+// actions and action types
+
+const middlewares = [thunk];
+
+const mockStore = configureMockStore(middlewares);
+describe('comment actions', () => {
+  beforeEach(() => {
+    moxios.install();
+  });
+  afterEach(() => {
+    moxios.uninstall();
+  });
+  it('should create a comment', () => {
+    const store = mockStore({});
+    moxios.wait(() => {
+      const request = moxios.requests.mostRecent();
+      request.respondWith({
+        status: 200,
+        response: data.addComment.success,
+      });
+    });
+
+    const expectedActions = [
+      {
+        type: COMMENT_REQUEST,
+      },
+      {
+        type: ADD_COMMENT_SUCCESS,
+        comment: data.addComment.success.comment,
+      },
+    ];
+
+    return store.dispatch(createComment('article_slug', 'bdy'))
+      .then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+  });
+});
diff --git a/src/store/actions/commentActions/index.js b/src/store/actions/commentActions/index.js
new file mode 100644
index 0000000..2f45b78
--- /dev/null
+++ b/src/store/actions/commentActions/index.js
@@ -0,0 +1,112 @@
+// Import axios
+import axios from 'axios';
+
+
+// Comment constants
+import {
+  ADD_COMMENT_SUCCESS, COMMENT_REQUEST, DELETE_COMMENT, GET_COMMENTS
+} from 'store/actions/commentTypes';
+
+// base url for api
+import { baseURL, isAuthenticated } from 'utils';
+
+
+// comment request
+const commentRequest = () => ({
+  type: COMMENT_REQUEST,
+});
+
+// add comment
+const addCommentRequest = comment => ({
+  type: ADD_COMMENT_SUCCESS,
+  comment,
+});
+
+// add comment
+const getCommentsRequest = (comments, commentsCount) => ({
+  type: GET_COMMENTS,
+  comments,
+  commentsCount,
+});
+
+// delete comment
+const deletCommentRequest = message => ({
+  type: DELETE_COMMENT,
+  message,
+});
+
+/**
+ * This function gets a list of comments for a specific article
+ * @param {string} article_slug
+ * @returns {object}   returns a list of comments or an empty list if none
+ */
+export const readComments = articleSlug => (dispatch) => {
+  const config = {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    responseType: 'application/json',
+  };
+
+  return axios.get(`${baseURL}/articles/${articleSlug}/comments/`, config)
+
+    .then((comment) => {
+      const commentData = comment.data;
+
+      dispatch(getCommentsRequest(commentData.comments, commentData.commentsCount));
+    }).catch(error => (error.response.data));
+};
+/**
+ * This function deletes  a comment for a specific article
+ * @param {string} article_slug
+ * @param {number} commentId
+ * @returns {object}   returns a list of comments or an empty list if none
+ */
+export const removeComment = (articleSlug, commentId) => (dispatch) => {
+  const config = {
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: 'Bearer '.concat(isAuthenticated().token)
+    },
+    responseType: 'application/json',
+  };
+
+  return axios.delete(`${baseURL}/articles/${articleSlug}/comments/${commentId}/`, config)
+
+    .then((success) => {
+      dispatch(deletCommentRequest(success.data.message));
+      dispatch(readComments(articleSlug));
+    }).catch(error => (error.response.data));
+};
+
+
+/**
+ * This function adds a comment on an article
+ * @param {string} article_slug
+ * @param {string} comment body
+ * @returns {object}   created comment
+ * @returns {string} errors if comment is invalid
+ */
+
+export const createComment = (articleSlug, commentBody) => (dispatch) => {
+  const config = {
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: 'Bearer '.concat(isAuthenticated().token)
+    },
+    responseType: 'application/json',
+  };
+  dispatch(commentRequest());
+
+  return axios.post(`${baseURL}/articles/${articleSlug}/comments/`, { comment: { body: commentBody } }, config)
+
+    .then((comment) => {
+      const commentData = comment.data.comment;
+
+      dispatch(addCommentRequest(commentData));
+      dispatch(readComments(articleSlug));
+    }).catch(error => (error.response.data));
+};
+
+
+export default createComment;
diff --git a/src/store/actions/commentTypes.js b/src/store/actions/commentTypes.js
new file mode 100644
index 0000000..972758d
--- /dev/null
+++ b/src/store/actions/commentTypes.js
@@ -0,0 +1,5 @@
+export const ADD_COMMENT_SUCCESS = 'ADD_COMMENT_SUCCESS';
+export const COMMENT_ERROR = 'COMMENT_ERROR';
+export const GET_COMMENTS = 'GET_COMMENTS';
+export const DELETE_COMMENT = 'DELETE_COMMENT';
+export const COMMENT_REQUEST = 'COMMENT_REQUEST';
diff --git a/src/store/reducers/commentReducer/__mocks__.js b/src/store/reducers/commentReducer/__mocks__.js
new file mode 100644
index 0000000..2ee370f
--- /dev/null
+++ b/src/store/reducers/commentReducer/__mocks__.js
@@ -0,0 +1,38 @@
+const commentTestData = [
+  {
+    id: 1,
+    created_at: '2019-06-14T05:58:57.206787Z',
+    updated_at: '2019-06-14T05:58:57.206825Z',
+    body: 'my first comment',
+    author: {
+      firstname: 'Firstname',
+      lastname: 'Lastname',
+      username: 'adojo',
+      bio: 'This is arthur biodata information',
+      image: 'https://firebasestorage.googleapis.com/v0/b/ah-frontend-dojo.appspot.com/o/images%2F61030656_367914100741361_8198565189029724160_n.jpg?alt=media&token=a2c313ca-3c98-44f6-b89e-bba30409c49f',
+      email: 'email1@ahhaven.com'
+    },
+    highlighted_text: null,
+    start_index: null,
+    end_index: null
+  },
+  {
+    id: 2,
+    created_at: '2019-06-14T07:43:08.288832Z',
+    updated_at: '2019-06-14T07:43:08.288889Z',
+    body: 'my second comment',
+    author: {
+      firstname: 'Firstnamex',
+      lastname: 'Lastnamex',
+      username: 'adojo',
+      bio: 'This is arthur biodata information',
+      image: 'https://firebasestorage.googleapis.com/v0/b/ah-frontend-dojo.appspot.com/o/images%2F61030656_367914100741361_8198565189029724160_n.jpg?alt=media&token=a2c313ca-3c98-44f6-b89e-bba30409c49f',
+      email: 'email2@ahhaven.com'
+    },
+    highlighted_text: null,
+    start_index: null,
+    end_index: null
+  }
+];
+
+export default commentTestData;
diff --git a/src/store/reducers/commentReducer/commentReducer.test.js b/src/store/reducers/commentReducer/commentReducer.test.js
new file mode 100644
index 0000000..6ca82ec
--- /dev/null
+++ b/src/store/reducers/commentReducer/commentReducer.test.js
@@ -0,0 +1,76 @@
+import commentReducer from 'store/reducers/commentReducer';
+// user login constants
+import {
+  ADD_COMMENT_SUCCESS, COMMENT_REQUEST, GET_COMMENTS
+} from 'store/actions/commentTypes';
+import commentTestData from 'store/reducers/commentReducer/__mocks__';
+
+describe('loginReducer state', () => {
+  it('should return the initial state', () => {
+    expect(commentReducer(undefined, {})).toEqual(
+      { comments: [], commentsCount: 0 }
+
+    );
+  });
+  it('should handle loading status for comment', () => {
+    expect(
+      commentReducer(
+        {},
+        {
+
+          type: COMMENT_REQUEST,
+          isLoading: true,
+        },
+      ),
+    ).toEqual({
+      isLoading: true,
+
+
+    });
+  });
+
+  it('should handle Add new comment', () => {
+    expect(
+      commentReducer(
+        {},
+        {
+
+          type: ADD_COMMENT_SUCCESS,
+          comment: {
+
+            articleSlug: '',
+            body: 'My first comment',
+          },
+        },
+      ),
+    ).toEqual({
+      comment: {
+        articleSlug: '',
+        body: 'My first comment',
+      },
+      success: true,
+      errors: '',
+      isLoading: false,
+
+    });
+  });
+
+  it('should handle get all comments', () => {
+    expect(
+      commentReducer(
+        {},
+        {
+
+          type: GET_COMMENTS,
+          comments: { commentTestData },
+          commentsCount: commentTestData.length,
+        },
+      ),
+    ).toEqual({
+      comments: { commentTestData },
+      commentsCount: commentTestData.length,
+      isLoading: false,
+
+    });
+  });
+});
diff --git a/src/store/reducers/commentReducer/index.js b/src/store/reducers/commentReducer/index.js
new file mode 100644
index 0000000..110f904
--- /dev/null
+++ b/src/store/reducers/commentReducer/index.js
@@ -0,0 +1,44 @@
+// comment constants
+import {
+  COMMENT_REQUEST, ADD_COMMENT_SUCCESS, GET_COMMENTS, DELETE_COMMENT
+} from 'store/actions/commentTypes';
+
+const commentReducer = (state = {
+  comments: [],
+  commentsCount: 0,
+}, action) => {
+  switch (action.type) {
+    case COMMENT_REQUEST:
+      return {
+        ...state,
+        isLoading: true,
+      };
+    case ADD_COMMENT_SUCCESS:
+      return {
+        ...state,
+        comment: action.comment,
+        success: true,
+        errors: '',
+        isLoading: false,
+      };
+    case GET_COMMENTS:
+      return {
+        ...state,
+        comments: action.comments,
+        commentsCount: action.commentsCount,
+        isLoading: false,
+      };
+    case DELETE_COMMENT:
+      return {
+        ...state,
+        message: action.message,
+        isLoading: false,
+      };
+
+
+    default:
+      return state;
+  }
+};
+
+export default commentReducer;
diff --git a/src/store/rootReducer.js b/src/store/rootReducer.js
index 6f8567e..c81689b 100644
--- a/src/store/rootReducer.js
+++ b/src/store/rootReducer.js
@@ -4,6 +4,7 @@ import registerReducer from 'store/reducers/registerReducer';
 import loginReducer from 'store/reducers/loginReducer';
 import confirmEmailReducer from 'store/reducers/confirmEmailReducer';
 import passwordResetReducer from 'store/reducers/passwordResetReducer';
+import commentReducer from 'store/reducers/commentReducer';
 
 import articles from './reducers/articles';
 
@@ -13,7 +14,8 @@ const rootReducers = combineReducers({
   loginReducer,
   articles,
   confirmEmailReducer,
-  passwordResetReducer
+  passwordResetReducer,
+  commentReducer,
 });
 
 export default rootReducers;