ft(comment): User should comment on article: (#35) (#40)

- fetch all comments - fetch all replies to comment - post comment - post reply to comment [Maintains #164798170]
andela · May 23, 2019 · f53f3c8 · f53f3c8
1 parent 3184d34
commit f53f3c8
Show file tree

Hide file tree

Showing 24 changed files with 585 additions and 207 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -52,7 +52,7 @@
     "react-onevent": "^1.0.1",
     "react-redux": "^7.0.3",
     "react-router-dom": "^5.0.0",
-    "react-star-ratings": "^2.3.0",
+    "react-star-rating-component": "^1.4.1",
     "react-tag-input": "^6.4.0",
     "react-toolbox": "^2.0.0-beta.13",
     "redux": "^4.0.1",

diff --git a/src/actions/articlesActions.js b/src/actions/articlesActions.js
@@ -76,15 +76,15 @@ export const postArticle = (
     notify.show('Errors have occured', 'error', 4000);
   });
 
-export const fetchArticles = () => dispatch => axios.get(`${baseURL}/articles/`)
+export const fetchArticles = () => dispatch => axios.get(`${process.env.baseURL}/articles/`)
   .then((response) => {
     dispatch({
       type: GET_ARTICLES,
       payload: response.data.results,
     });
   });
 
-export const getSingleArticle = slug => dispatch => axios.get(`${baseURL}/articles/${slug}`)
+export const getSingleArticle = slug => dispatch => axios.get(`${process.env.baseURL}/articles/${slug}`)
   .then((response) => {
     dispatch(fetchAnArticleSuccess(response));
   }).catch((err) => {

diff --git a/src/actions/ratingActions.jsx b/src/actions/ratingActions.jsx
@@ -0,0 +1,38 @@
+import axios from 'axios';
+import notification from '../utils/Notify';
+
+
+export const successRating = data => ({
+  type: 'RATING_SUCCESSFUL',
+  data,
+});
+
+export const startAction = () => ({
+  type: 'RATING_STARTED',
+});
+
+export const failedRating = err => ({
+  type: 'RATING_FAILED',
+  err,
+});
+
+const { baseURL } = process.env;
+export const userRating = (ratingData, slug) => (dispatch) => {
+  const url = `${baseURL}/articles/${slug}/rate`;
+  const headers = {
+    Authorization: `Bearer ${localStorage.getItem('accessToken')}`,
+    'Content-Type': 'application/json',
+  };
+
+  dispatch(startAction());
+  return axios.post(url, ratingData, { headers })
+    .then((data) => {
+      if (data.data) {
+        dispatch(successRating(data.data));
+        notification(data.data.message, 'success', 5000);
+      } else {
+        dispatch(failedRating(data.error.message));
+        notification(data.error, 'success', 5000);
+      }
+    });
+};
diff --git a/src/actions/types.js b/src/actions/types.js
@@ -23,3 +23,6 @@ export const LIKE_AN_ARTICLE = 'LIKE_AN_ARTICLE';
 export const ALREADY_LIKE_AN_ARTICLE = 'ALREADY_LIKE_AN_ARTICLE';
 export const ALREADY_DISLIKE_AN_ARTICLE = 'ALREADY_LIKE_AN_ARTICLE';
 export const DISLIKE_AN_ARTICLE = 'DISLIKE_AN_ARTICLE';
+export const RATING_SUCCESSFUL = 'RATING_SUCCESSFUL';
+export const RATING_STARTED = 'RATING_STARTED';
+export const RATING_FAILED = 'RATING_FAILED';
diff --git a/src/components/Articles/ArticleDetail.jsx b/src/components/Articles/ArticleDetail.jsx
@@ -3,6 +3,7 @@ import PropTypes, { shape } from 'prop-types';
 import moment from 'moment';
 import { Link } from 'react-router-dom';
 import Comments from '../../pages/Comments';
+import RatingContainer from '../../pages/Ratings';
 import DeleteArticleComponentModel from './DeleteArticleModel';
 import ShareArticlesComponent from './ShareArticles';
 import avartaImage from '../../assets/images/avarta.png';
@@ -74,6 +75,7 @@ const ArticleDetail = ({
 
             </h6>
             <br />
+            <br />
             <p className="card-text article-text">
               { article.body }
             </p>
@@ -91,6 +93,8 @@ const ArticleDetail = ({
                   {tag}
                 </span>
               ))}
+              <br />
+              <RatingContainer slug={article.slug} />
             </p>
             {article.author && article.author.username
             === localStorage.getItem('username')

diff --git a/src/components/Articles/DisplayArticles.jsx b/src/components/Articles/DisplayArticles.jsx
@@ -1,9 +1,8 @@
-
 import React from 'react';
 import { Link } from 'react-router-dom';
 import PropTypes, { shape } from 'prop-types';
 import ArticleIconsComponent from './articlesIcons';
-
+import './article.scss';
 
 const DisplayArticles = ({ article, articleDate }) => (
   <div className="row">
@@ -27,18 +26,32 @@ const DisplayArticles = ({ article, articleDate }) => (
               {' '}
               <b>{article.author.username}</b>
             </p>
+            {article.average_rating <= 0 ? ''
+              : (
+                <div className="ratingStar">
+                  <i className="fas fa-star" />
+                  {' '}
+                  <span className="rating-digit">
+                    ratings
+                    {' '}
+                    {article.average_rating}
+                  </span>
+                </div>
+              )
+            }
+            <br />
             <div className="card-footer custom-footer">
               <Link
                 to={{
                   pathname: `/articles/${article.slug}`,
                 }}
                 className="btn btn-primary float-left read-more-button"
               >
-              Read More ...
+                Read More ...
               </Link>
-              <p className="float-right">
+              <div className="float-right">
                 <ArticleIconsComponent article={article} />
-              </p>
+              </div>
             </div>
 
           </div>

diff --git a/src/components/Articles/article.scss b/src/components/Articles/article.scss
@@ -251,3 +251,10 @@ i {
 }
 
 
+.fa-star{
+    color: #ffb400
+}
+.rating-comp, .rating-comp{
+    text-align: center;
+    font-size: 30px;
+}
diff --git a/src/components/Rating/index.js b/src/components/Rating/index.js
diff --git a/src/components/Ratings/index.jsx b/src/components/Ratings/index.jsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import StarRatingComponent from 'react-star-rating-component';
+
+const Rating = props => (
+  <div>
+    <a
+      className="ratingButton"
+      data-toggle="modal"
+      data-target="#exampleModalCenter"
+      href="#modal1"
+    >
+    Rate This Article
+    </a>
+    <div
+      className="modal fade"
+      id="exampleModalCenter"
+      tabIndex="-1"
+      role="dialog"
+      aria-labelledby="exampleModalCenterTitle"
+      aria-hidden="true"
+    >
+      <div className="modal-dialog modal-dialog-centered" role="document">
+        <div className="modal-content">
+          <div className="modal-header">
+            <h5 className="modal-title rating-title" id="exampleModalLongTitle">
+              Your Rating is
+              {' '}
+              {' '}
+              {props.rating}
+            </h5>
+            <button
+              type="button"
+              className="close"
+              data-dismiss="modal"
+              aria-label="Close"
+            >
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div className="modal-body">
+            <div className="form-group rating-comp">
+              <StarRatingComponent
+                name={props.name}
+                starCount={props.starCount}
+                value={props.value}
+                onStarClick={props.onStarClick}
+              />
+            </div>
+          </div>
+          <div className="modal-footer">
+            <button
+              type="submit"
+              className="btn btn-secondary pagButton"
+              data-dismiss="modal"
+              onClick={props.onSubmit}
+            >
+            Submit
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+);
+
+export default Rating;
diff --git a/src/pages/Dashboard/Dashboard.scss b/src/pages/Dashboard/Dashboard.scss
@@ -6,4 +6,12 @@
 .pagination-buttons {
     display: flex;
     justify-content: space-between;
+
+}
+.article-btns{
+    position: fixed;
+    bottom: 1vh;
+    overflow: auto;
+    width: 90vw;
+    padding-left: 200px;
 }
diff --git a/src/pages/Dashboard/index.jsx b/src/pages/Dashboard/index.jsx
@@ -37,7 +37,7 @@ export class Dashboard extends React.Component {
     return (
       <div>
         {paginateArticles.length === 0 ? <DashboardArticles firstArticles={firstArticles} totalArticles={articles} /> : <DashboardArticles paginateArticles={paginateArticles} firstArticles={firstArticles} totalArticles={articles} />}
-        <div className="container pagination-buttons">
+        <div className="container pagination-buttons article-btns">
           {prev ? (
             <button type="button" className="btn left pagButton" onClick={this.fetchPrevious}>
               Previous

diff --git a/src/pages/Landing/Landing.scss b/src/pages/Landing/Landing.scss
@@ -7,7 +7,6 @@ h1 {
 }
 .btn{
   font-size: 1rem;
-  background-color: #172439;
   color: #f8f9fa;
   align-content: center;
 }
@@ -443,9 +442,18 @@ h1 {
   }
 
 
+}
+.article-btns{
+    position: fixed;
+    bottom: 1vh;
+    overflow: auto;
+    width: 90vw;
+    padding-left: 300px;
 }
 .pagButton {
     &:hover {
         color: aliceblue
     }
+  background-color: #172439;
+
 }
diff --git a/src/pages/Landing/index.jsx b/src/pages/Landing/index.jsx
@@ -6,6 +6,7 @@ import LandingImage from '../../assets/images/landing_image.jpg';
 import { fetchArticles } from '../../actions/articlesActions';
 import { getOriginal, getNext } from '../../actions/paginationActions';
 import './Landing.scss';
+import '../../components/Articles/article.scss';
 
 export class Landing extends Component {
   componentDidMount() {
@@ -50,22 +51,22 @@ export class Landing extends Component {
             <br />
           </div>
         </div>
-        <div className="container pagination-buttons">
+        <div className="article-btns">
           {prev ? (
-            <button type="button" className="btn left pagButton" onClick={this.fetchPrevious}>
+            <button type="button" className="btn float-left pagButton" onClick={this.fetchPrevious}>
               Previous
             </button>
           ) : (
-            <button type="button" className="btn left pagButton" disabled>
+            <button type="button" className="btn float-left pagButton" disabled>
                 Previous
             </button>
           )}
           {next ? (
-            <button type="button" className="btn right pagButton" onClick={this.fetchData}>
+            <button type="button" className="btn float-right pagButton" onClick={this.fetchData}>
               Next
             </button>
           ) : (
-            <button type="button" className="btn right pagButton" disabled>
+            <button type="button" className="btn float-right pagButton" disabled>
                 Next
             </button>
           )}

diff --git a/src/pages/Ratings/index.jsx b/src/pages/Ratings/index.jsx
@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import Rating from '../../components/Ratings';
+import { userRating } from '../../actions/ratingActions';
+
+export class RatingContainer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      ratings: 1,
+    };
+  }
+
+  onStarClick = (nextValue, prevValue, name) => {
+    this.setState({ ratings: nextValue });
+  };
+
+    onSubmit = () => {
+      const { slug } = this.props;
+      const ratingData = { ratings: this.state.ratings };
+      this.props.userRating(ratingData, slug);
+    };
+
+    render() {
+      const { ratings } = this.state;
+      return (
+        <div>
+          <Rating
+            name="rate1"
+            starCount={5}
+            value={ratings}
+            onStarClick={this.onStarClick}
+            rating={ratings}
+            onSubmit={this.onSubmit}
+          />
+
+        </div>
+      );
+    }
+}
+export const mapStateToProps = state => (
+  { ratingReducer: state.ratingReducer }
+);
+export default connect(mapStateToProps, { userRating })(RatingContainer);