Merge 1aade19 into b9401f5

package.json

@@ -14,8 +14,8 @@
     "moment": "^2.22.2",
     "node-sass": "^4.9.4",
     "prop-types": "^15.6.2",
-    "react": "^16.6.0",
-    "react-dom": "^16.6.0",
+    "react": "^16.6.3",
+    "react-dom": "^16.6.3",
     "react-facebook-login": "^4.1.1",
     "react-google-login": "^3.2.1",
     "react-loader": "^2.4.5",
@@ -26,6 +26,7 @@
     "react-router-dom": "^4.3.1",
     "react-scripts": "2.0.5",
     "react-toastify": "^4.4.0",
+    "reactstrap": "^6.5.0",
     "redux": "^4.0.1",
     "redux-mock-store": "^1.5.3",
     "redux-thunk": "^2.3.0"

src/actions/actionCreators.js

@@ -24,6 +24,10 @@ import {
   SEND_RESET_LINK_ERROR,
   RESET_PASSWORD_SUCCESS,
   RESET_PASSWORD_ERROR,
+  UPDATE_COMMENT_INITIATED,
+  UPDATE_COMMENT_SUCCESS,
+  UPDATE_COMMENT_ERROR,
+  UPDATING_COMMENTS,
 } from './types';
 
 export const socialLoginInitiated = () => ({
@@ -132,3 +136,20 @@ export const ResetPasswordError = payload => ({
   type: RESET_PASSWORD_ERROR,
   payload,
 });
+export const updateCommentInitiated = payload => ({
+  type: UPDATE_COMMENT_INITIATED,
+  payload,
+});
+export const updateCommentSuccess = payload => ({
+  type: UPDATE_COMMENT_SUCCESS,
+  payload,
+});
+export const updateCommentError = payload => ({
+  type: UPDATE_COMMENT_ERROR,
+  payload,
+});
+export const updatingComments = (payload, comment) => ({
+  type: UPDATING_COMMENTS,
+  payload,
+  comment,
+});

src/actions/articleActions.js

@@ -19,6 +19,10 @@ import {
   editArticleSuccess,
   editArticleError,
   getSpecificArticleInitiated,
+  updateCommentInitiated,
+  updateCommentSuccess,
+  updateCommentError,
+  updatingComments,
 } from './actionCreators';
 
 export const postArticle = postData => dispatch => {
@@ -46,8 +50,8 @@ export const postArticle = postData => dispatch => {
 export const addComment = (postData, article) => dispatch => {
   axiosInstance
     .post(`/api/articles/${article}/comments/`, postData)
-    .then(() => {
-      dispatch(addCommentSuccess(true));
+    .then((response) => {
+      dispatch(addCommentSuccess(response.data.comments));
     });
 };
 
@@ -56,12 +60,13 @@ export const fetchComments = article => dispatch => {
   axiosInstance
     .get(`/api/articles/${article}/comments/`)
     .then((response) => {
-      dispatch(getCommentsSuccess(response.data));
+      dispatch(getCommentsSuccess(response.data.comments));
     })
     .catch(() => {
       localStorage.removeItem('auth_token');
+      localStorage.removeItem('username');
       dispatch(logoutUser(false));
-      toast.error('Please login to view comments', { autoClose: false, hideProgressBar: true });
+      toast.error('Please login', { autoClose: false, hideProgressBar: true });
     });
 };
 
@@ -155,3 +160,29 @@ export const updateArticle = (slug, newData) => dispatch => {
       toast.error(errorMessage, { autoClose: false, hideProgressBar: true });
     });
 };
+
+export const editComment = (payload, slug, comment) => dispatch => {
+  toast.dismiss();
+  dispatch(updateCommentInitiated(true));
+  axiosInstance
+    .put(`/api/articles/${slug}/comments/${comment}/`, payload)
+    .then(() => {
+      dispatch(updatingComments(payload, comment));
+      const success_message = 'Comment updated successfully';
+      dispatch(updateCommentSuccess(true));
+      toast.success(
+        success_message,
+        { autoClose: 3500, hideProgressBar: true },
+      );
+    })
+    .catch((error) => {
+      let errorMessage = '';
+      if (error.response.status === 403) {
+        errorMessage = 'Re-login and try again';
+      } else {
+        errorMessage = 'This comment is non existent';
+      }
+      dispatch(updateCommentError(errorMessage));
+      toast.error(errorMessage, { autoClose: false, hideProgressBar: true });
+    });
+};

src/actions/types.js

@@ -33,3 +33,7 @@ export const SEND_RESET_LINK_SUCCESS = 'SEND_RESET_LINK_SUCCESS';
 export const SEND_RESET_LINK_ERROR = 'SEND_RESET_LINK_ERROR';
 export const RESET_PASSWORD_SUCCESS = 'RESET_PASSWORD_SUCCESS';
 export const RESET_PASSWORD_ERROR = 'RESET_PASSWORD_ERROR';
+export const UPDATE_COMMENT_INITIATED = 'UPDATE_COMMENT_INITIATED';
+export const UPDATE_COMMENT_SUCCESS = 'UPDATE_COMMENT_SUCCESS';
+export const UPDATE_COMMENT_ERROR = 'UPDATE_COMMENT_ERROR';
+export const UPDATING_COMMENTS = 'UPDATING_COMMENTS';

src/actions/userActions.js

@@ -132,6 +132,7 @@ export const getProfile = () => dispatch => {
     })
     .catch(() => {
       localStorage.removeItem('auth_token');
+      localStorage.removeItem('username');
       dispatch({ type: LOGOUT_USER, payload: false });
     });
 };

src/assets/App.css

@@ -376,6 +376,20 @@ header.uvp {
 .no-gutters-comments {
   margin-left: 5%;
 }
+.modal-display{
+  display: block;
+}
+.modal-no-display{
+  display: none;
+}
+.can-not-edit {
+  margin: 10%;
+  display: block;
+}
+.can-edit {
+  margin: 10%;
+  display: none;
+}
 .article-body {
   font-family: "Open Sans", sans-serif;
   font-size: 16px;

src/components/Articles/SingleArticle.js

@@ -54,7 +54,7 @@ const SingleArticle = ({ article }) => {
             <i className="reaction far fa-star icon" />
             <i className="reaction far fa-bookmark icon" />
             <i className="reaction fas fa-share-alt icon" />
-            <Link to={returnArticleCommentURL(article.slug)}><i className="far fa-comment icon" /></Link>
+            <Link exact to={returnArticleCommentURL(article.slug)}><i className="far fa-comment icon" /></Link>
           </div>
         </div>
       </div>

src/components/comments/CommentList.js

@@ -2,20 +2,22 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import RetrieveCommentForm from './RetrieveCommentForm';
 
-export const CommentList = ({ comments }) => (
+export const CommentList = ({ comments, article }) => (
   <div>
     {comments.map(comment => (
-      <RetrieveCommentForm key={comment.id} comment={comment} />
+      <RetrieveCommentForm comment={comment} article={article} />
     ))}
   </div>
 );
 
 CommentList.propTypes = {
   comments: PropTypes.array,
+  article: PropTypes.string,
 };
 
 CommentList.defaultProps = {
   comments: [],
+  article: '',
 };
 
 export default CommentList;

src/components/comments/Comments.js

@@ -26,9 +26,6 @@ export class Comments extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.addCommentSuccess === true) {
-      window.location.reload();
-    }
     if (nextProps.isLoggedIn === false) {
       const { history } = this.props;
       history.push('/login');
@@ -80,7 +77,7 @@ export class Comments extends Component {
         />
         <Loader loaded={!loading}>
           {Object.keys(commentsPayload).length > 0
-            && <CommentList comments={commentsPayload.comments} />
+            && <CommentList comments={commentsPayload} article={article} />
           }
         </Loader>
       </div>
@@ -95,7 +92,6 @@ const matchDispatchToProps = (dispatch) => bindActionCreators({
 
 const mapStateToProps = (state) => ({
   commentsPayload: state.article.commentsPayload,
-  addCommentSuccess: state.article.addCommentSuccess,
   isLoggedIn: state.user.isLoggedIn,
   loading: state.user.loading,
 });
@@ -105,14 +101,12 @@ Comments.propTypes = {
   match: PropTypes.object.isRequired,
   fetchComments: PropTypes.func.isRequired,
   commentsPayload: PropTypes.object.isRequired,
-  addCommentSuccess: PropTypes.bool,
   loading: PropTypes.bool,
   isLoggedIn: PropTypes.bool,
   history: PropTypes.object.isRequired,
 };
 
 Comments.defaultProps = {
-  addCommentSuccess: false,
   loading: false,
   isLoggedIn: true,
 };

src/components/comments/RetrieveCommentForm.js

@@ -2,8 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Moment from 'react-moment';
 import user from '../../assets/images/user.png';
+import UpdateComment from './UpdateComment';
 
-export const RetrieveCommentForm = ({ comment }) => (
+export const RetrieveCommentForm = ({ comment, article }) => (
   <div className="row comment">
     <div className="col-12">
       <div className="row entire-article">
@@ -34,6 +35,7 @@ export const RetrieveCommentForm = ({ comment }) => (
           </div>
         </div>
         <div className="card-footer w-100 text-muted">
+          <UpdateComment slug={article} comment={comment} />
           <i className="far fa-thumbs-down icon" />
           <i className="far fa-thumbs-up icon" />
           <i className="far fa-star icon" />
@@ -58,6 +60,7 @@ export const RetrieveCommentForm = ({ comment }) => (
 
 RetrieveCommentForm.propTypes = {
   comment: PropTypes.object.isRequired,
+  article: PropTypes.string.isRequired,
 };
 
 export default RetrieveCommentForm;