Fetch POST comments

Author: samdevlops

src/components/DishdetailComponent.js

@@ -25,7 +25,7 @@ class CommentForm extends Component{
     handleSubmit(values) {
         console.log(" Current State is :" +JSON.stringify(values));
         //alert(" Current State is :" +JSON.stringify(values));
-        this.props.addComment(this.props.dishId, values.rating, values.author, values.comment);
+        this.props.postComment(this.props.dishId, values.rating, values.author, values.comment);
     }
 
 
@@ -130,7 +130,7 @@ class CommentForm extends Component{
         );
     }
 
-    function RenderComments({comments, addComment, dishId}) {
+    function RenderComments({comments, postComment, dishId}) {
         var commentList = comments.map(comment => {
             return (
                 <li key={comment.id} >
@@ -149,7 +149,7 @@ class CommentForm extends Component{
                     {commentList}
                 </ul>
                 <ul>
-                <CommentForm dishId={dishId} addComment={addComment}/>
+                <CommentForm dishId={dishId} postComment={postComment}/>
                 </ul>
             </div>
         );
@@ -195,7 +195,7 @@ class CommentForm extends Component{
                     </div>
                     <div className="col-12 col-md-5 m-1">
                         <RenderComments comments={props.comments} 
-                        addComment = {props.addComment}
+                        postComment = {props.postComment}
                         dishId ={props.dish.id}
                         />
 

src/components/MainComponent.js

@@ -8,7 +8,7 @@ import Header from './HeaderComponent';
 import Footer from './FooterComponent';
 import { Switch, Route, Redirect, withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
-import { addComment, fetchDishes, fetchComments, fetchPromos } from '../redux/ActionCreators';
+import { postComment, fetchDishes, fetchComments, fetchPromos } from '../redux/ActionCreators';
 import { actions } from 'react-redux-form';
 
 const mapStateToProps = state =>{
@@ -20,7 +20,7 @@ const mapStateToProps = state =>{
     }
 }
 const mapDispatchToProps = (dispatch) => ({
-  addComment: (dishId, rating, author, comment ) => dispatch(addComment(dishId, rating, author, comment )),
+  postComment: (dishId, rating, author, comment ) => dispatch(postComment(dishId, rating, author, comment )),
   fetchDishes: () => {dispatch(fetchDishes())},
   resetFeedbackForm: () =>{dispatch(actions.reset('feedback'))},
   fetchComments: () => dispatch(fetchComments()),
@@ -60,7 +60,7 @@ class Main extends Component {
             errMess={this.props.dishes.errMess}
             comments={this.props.comments.comments.filter((comment) => comment.dishId === parseInt(match.params.dishId,10))}
             commentsErrMess={this.props.comments.errMess}
-            addComment={this.props.addComment}
+            postComment={this.props.postComment}
           />
         );
       };

src/redux/ActionCreators.js

@@ -2,15 +2,49 @@ import * as ActionTypes from './ActionTypes';
 //import { DISHES } from '../shared/dishes';
 import { baseUrl } from '../shared/baseUrl';
 
-export const addComment = (dishId, rating, author, comment) => ({
+export const addComment = (comment) => ({
     type: ActionTypes.ADD_COMMENT, 
-    payload : {
-        dishId: dishId,
-        rating: rating,
-        author: author,
-        comment: comment
-    }
+    payload : comment
 });
+
+export const postComment =(dishId, rating, author, comment) => (dispatch) => {
+
+    const newComment = {
+            dishId: dishId,
+            rating: rating,
+            author: author,
+            comment: comment
+    }
+    newComment.date = new Date().toISOString();
+
+    return fetch(baseUrl + 'comments', {
+        method: 'POST', 
+        body: JSON.stringify(newComment),
+        headers:{
+            'Content-Type':'application/json'
+        },
+        credentials: 'same-origin'
+    })
+        .then(response => {
+            if(response.ok){
+                return response;
+            }
+            else{
+                var error = new Error('Error ' + response.status + ':' + response.statusText);
+                error.response = response;
+                throw error;
+            }
+        },
+        error => {
+            var errmess = new Error(error.message);
+            throw errmess;
+        })
+        .then(response => response.json())
+        .then(response => dispatch(addComment(response)))
+        .catch(error =>  { console.log('post comments', error.message); 
+            alert('Your comment could not be posted\nError: '+error.message); });
+}
+
 export const fetchDishes = () => (dispatch) => {
 
     dispatch(dishesLoading(true));

src/redux/comment.js

@@ -15,8 +15,6 @@ export const Comments = (state = {
 
         case ActionTypes.ADD_COMMENT:
             var comment = action.payload;
-            comment.id = state.comments.length;
-            comment.date = new Date().toISOString();
             return {...state, comments: state.comments.concat(comment)};
         default: 
             return state;