Merge e1d36bb into 51cadd7

package.json

@@ -76,6 +76,7 @@
     "file-loader": "^3.0.1",
     "html-webpack-plugin": "^3.2.0",
     "jest": "^24.8.0",
+    "jwt-decode": "^2.2.0",
     "moxios": "^0.4.0",
     "node-sass": "^4.12.0",
     "prettier": "^1.17.0",

src/actions/commentsActions.js

@@ -0,0 +1,61 @@
+import {
+  CREATE_COMMENTS,
+  CREATE_COMMENTS_ERRORS,
+  FETCH_COMMENTS,
+  FETCH_COMMENTS_ERRORS
+} from "./types";
+import axios from "axios";
+import { toast } from "react-toastify";
+
+export const articleComments = (data, slug) => async dispatch => {
+  return await axios
+    .post(
+      `https://ah-backend-prime-staging.herokuapp.com/api/v1/articles/${slug}/comments/0/`,
+      data,
+      {
+        headers: {
+          Authorization: "Bearer " + sessionStorage.token
+        }
+      }
+    )
+    .then(res => {
+      dispatch({
+        type: CREATE_COMMENTS,
+        payload: res.data
+      });
+      toast.dismiss();
+      toast.success("thanks for your view", {
+        hideProgressBar: false,
+        autoClose: 3000
+      });
+    })
+    .catch(errors => {
+      dispatch({
+        type: CREATE_COMMENTS_ERRORS,
+        payload: errors.response.data
+      });
+    });
+};
+export const fetchComments = slug => async dispatch => {
+  return await axios
+    .get(
+      ` https://ah-backend-prime-staging.herokuapp.com/api/v1/articles/${slug}/comments/0/`,
+      {
+        headers: {
+          Authorization: "Bearer " + sessionStorage.token
+        }
+      }
+    )
+    .then(res => {
+      dispatch({
+        type: FETCH_COMMENTS,
+        payload: res.data.message
+      });
+    })
+    .catch(error => {
+      dispatch({
+        type: FETCH_COMMENTS_ERRORS,
+        payload: { errors: "error fetching your comments" }
+      });
+    });
+};

src/actions/types.js

@@ -42,3 +42,7 @@ export const LIKE_ARTICLE_SUCCESS = "LIKE_ARTICLE_SUCCESS";
 export const LIKE_ARTICLE_FAILURE = "LIKE_ARTICLE_FAILURE";
 export const DISLIKE_ARTICLE_FAILURE = "DISLIKE_ARTICLE_FAILURE";
 export const DISLIKE_ARTICLE_SUCCESS = "DISLIKE_ARTICLE_SUCCESS";
+export const CREATE_COMMENTS = "CREATE_COMMENTS";
+export const CREATE_COMMENTS_ERRORS = "CREATE_COMMENTS_ERRORS";
+export const FETCH_COMMENTS = "FETCH_COMMENTS";
+export const FETCH_COMMENTS_ERRORS = "FETCH_COMMENTS_ERRORS";

src/components/articles/singleArticle.js

@@ -10,6 +10,7 @@ import dislike from "../../styles/images/dislike.png";
 
 import "../../styles/singleArticle.scss";
 import { getArticleAction } from "../../actions/getArticle";
+import Comments from "../comments";
 
 export class SingleArticleComponent extends Component {
   state = {
@@ -130,6 +131,7 @@ export class SingleArticleComponent extends Component {
 
           <div className="article-description-body">
             <p style={{ fontWeight: "light" }}>{oneArticle.body}</p>
+            <Comments articleSlug={oneArticle.slug} />
           </div>
           <div>
             <img

src/components/comments.js

@@ -0,0 +1,105 @@
+import React, { Component } from "react";
+import moment from "moment";
+import { articleComments, fetchComments } from "../actions/commentsActions";
+import { connect } from "react-redux";
+import "../styles/comments.scss";
+
+
+export class Comments extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      comments: ""
+    };
+  }
+
+  componentDidMount() {
+    const { fetchComments, articleSlug } = this.props;
+    fetchComments(articleSlug);
+  }
+
+  handleOnChange = event => {
+    event.preventDefault();
+    const { name, value } = event.target;
+    this.setState({ [name]: value });
+  };
+
+  handleOnSubmit = event => {
+    event.preventDefault();
+    const { articleSlug, articleComments, fetchComments } = this.props;
+    const { comments } = this.state;
+    const data = {
+      body: comments
+    };
+    articleComments(data, articleSlug);
+    fetchComments(articleSlug);
+  };
+
+  render() {
+    const { commentsMessage } = this.props;
+    const comment = commentsMessage.map(message => (
+      <section className="comments" key={message.id}>
+        <article className="comment">
+          <a className="comment-img" href="#non">
+            <img src={message.author.image} alt="" width="50" height="50" />
+          </a>
+          <div className="comment-body">
+            <div className="text">
+              <p>{message.body}</p>
+            </div>
+            <p className="attribution">
+              by <a href={`/profile/${message.author.username}`}>{message.author.username}</a> at {moment(message.createdAt).format(
+                          "h:mm:ss a [on] MMMM Do YYYY.")}
+
+            </p>
+          </div>
+        </article>
+      </section>
+    ));
+    return (
+      <div className="row">
+        <div className="col col-lg-1" />
+        <div className="col col-lg-10">
+          <div className="row">
+            <div className="col col-lg-1" />
+            <div className="col col-lg-11">
+              <form
+                method="POST"
+                onSubmit={this.handleOnSubmit}
+                className="comment-forms"
+              >
+                <textarea
+                  className="form-control"
+                  name="comments"
+                  value={this.state.comments}
+                  onChange={this.handleOnChange}
+                >
+                  comments here
+                </textarea>
+                <button
+                  type="submit"
+                  className="btn btn-comment"
+                  style={{ marginTop: "10px" }}
+                >
+                  comment
+                </button>
+              </form>
+            </div>
+          </div>
+          {comment}
+        </div>
+        <div className="col col-lg-1" />
+      </div>
+    );
+  }
+}
+
+export const mapStateToProps = state => ({
+  commentsSuccess: state.comments.success,
+  commentsErrors: state.comments.errors,
+  commentsMessage: state.getComments.comments
+});
+export default connect(
+  mapStateToProps,
+  { articleComments, fetchComments }
+)(Comments);

src/components/sideDrawer.js

@@ -2,7 +2,6 @@ import React from "react";
 import "../styles/sidedrawer.scss";
 
 const SideDrawer = props => {
-
   return (
     <div className="sideDrawer">
       <ul className="list-group">

src/containers/profile/UsersProfileContainer.js

@@ -41,7 +41,7 @@ export class UsersProfileContainer extends Component {
 
   componentWillReceiveProps(newProps) {
     const { profile, isfollowing, following, followers } = newProps;
-    if(profile){
+    if (profile) {
       sessionStorage.setItem("userview_name", profile.username);
       this.setState({
         username: profile.username,

src/reducers/commentsReducer.js

@@ -0,0 +1,23 @@
+import { CREATE_COMMENTS, CREATE_COMMENTS_ERRORS } from "../actions/types";
+
+const initialState = {
+  success: {},
+  errors: {}
+};
+
+export default (state = initialState, action) => {
+  switch (action.type) {
+    case CREATE_COMMENTS:
+      return {
+        ...state,
+        success: action.payload
+      };
+    case CREATE_COMMENTS_ERRORS:
+      return {
+        ...state,
+        errors: action.payload
+      };
+    default:
+      return state;
+  }
+};

src/reducers/getCommentsReducer.js

@@ -0,0 +1,16 @@
+import { FETCH_COMMENTS } from "../actions/types";
+
+const initialState = {
+  comments: []
+};
+export default (state = initialState, action) => {
+  switch (action.type) {
+    case FETCH_COMMENTS:
+      return {
+        ...state,
+        comments: action.payload
+      };
+    default:
+      return state;
+  }
+};

src/reducers/rootReducer.js

@@ -9,6 +9,8 @@ import profileReducer from "./profileReducer";
 import getArticleReducer from "./getArticleReducer";
 import createArticleReducer from "./createArticleReducer";
 import followsUnfollowsReducer from "./followsUnfollowsReducer";
+import commentsReducer from "./commentsReducer";
+import getCommentsReducer from "./getCommentsReducer";
 
 export default combineReducers({
   auth_login: loginReducer,
@@ -20,5 +22,8 @@ export default combineReducers({
   passReset: passwordResetReducer,
   passChange: passwordChangeReducer,
   profileReducer: profileReducer,
-  followsUnfollowsReducer: followsUnfollowsReducer
+  followsUnfollowsReducer: followsUnfollowsReducer,
+  profileReducer,
+  comments: commentsReducer,
+  getComments: getCommentsReducer
 });