comments data shows up

b-bly · Apr 3, 2018 · ac9c564 · ac9c564
1 parent 21894e2
commit ac9c564
Show file tree

Hide file tree

Showing 10 changed files with 199 additions and 32 deletions.
diff --git a/server/routes/comments.js b/server/routes/comments.js
@@ -0,0 +1,29 @@
+const express = require('express')
+const router = express.Router()
+const passport = require('../passport')
+const Comment = require('../database/models/comments')
+
+router.put('/', (req, res) => {
+
+    const id = req.body.id;
+    const comment = {
+        text: req.body.comment
+    }
+
+    Comment.findByIdAndUpdate(
+        { _id: id },
+        { $set: comment },
+        (err, data) => {
+            if (err) {
+                console.log('put error: ', err);
+                res.sendStatus(500);
+            } else {
+                console.log('comments update success: ');
+                console.log(data);              
+                res.sendStatus(200);
+            }
+        }
+    );
+});
+
+module.exports = router;
diff --git a/server/routes/injury.js b/server/routes/injury.js
@@ -108,7 +108,7 @@ router.put('/update', function (req, res) {
     Injury.findByIdAndUpdate(
         { _id: id },
         { $set: injury },
-        function (err, data) {
+        (err, data) => {
             if (err) {
                 console.log('put error: ', err);
                 res.sendStatus(500);

diff --git a/server/server.js b/server/server.js
@@ -8,7 +8,8 @@ const dbConnection = require('./database')
 const passport = require('./passport');
 // ROUTES
 const user = require('./routes/user');
-const injury = require('./routes/injury')
+const injury = require('./routes/injury');
+const comment = require('./routes/comments');
 
 const PORT = 8080
 
@@ -38,6 +39,7 @@ app.use(passport.session())
 //routing
 app.use('/user', user);
 app.use('/injury', injury);
+app.use('/comment', comment);
 
 // Starting Server 
 app.listen(PORT, () => {

diff --git a/src/actions/delete-injury.js b/src/actions/delete-injury.js
@@ -28,7 +28,7 @@ export default function deleteInjury(id) {
                       }
                     });
 
-        }).catch(function (error) {
+        }).catch( (error) => {
             console.log('error deleteInjury : ');
             console.log(error);
             dispatch(deleteInjuryAsync('fail'));

diff --git a/src/actions/delete-treatment.js b/src/actions/delete-treatment.js
@@ -26,7 +26,7 @@ export default function deleteTreatment(treatmentId, injuryId) {
                       }
                     });
 
-        }).catch(function (error) {
+        }).catch((error) => {
             console.log('error deleteTreatment : ');
             console.log(error);
             dispatch(deleteTreatmentAsync('fail'));

diff --git a/src/actions/edit-comment.js b/src/actions/edit-comment.js
@@ -0,0 +1,40 @@
+import axios from 'axios';
+const url = '/comment/edit';
+
+export default function editComment(commentObj) {
+    return dispatch => {
+        console.log('editComment action comment: ');
+        console.log(commentObj);
+        axios.put(url, commentObj).then(res => {
+            console.log('editComment action res.data');
+            console.log(res.data);
+
+            axios.get('/injury/info', {
+                params: {
+                    id: commentObj.injuryId
+                }
+            }).then(res => {
+                console.log('editComment get action res.data');
+                console.log(res.data);
+
+                dispatch(editCommentAsync(res.data));
+            }).catch(function (error) {
+                console.log('error editComment get : ');
+                console.log(error);
+            });
+
+            dispatch(editCommentAsync(res.data));
+        }).catch((error) => {
+            console.log('error editComment : ');
+            console.log(error);
+            dispatch(editCommentAsync('fail'));
+        });
+    }
+}
+
+function editCommentAsync(payload) {
+    return {
+        type: 'GET_INJURY_INFO',
+        payload: payload
+    }
+}
diff --git a/src/index.css b/src/index.css
@@ -94,6 +94,12 @@ body {
   margin-top: auto;
 }
 
+.list-links {
+    font-size: 0.8rem;
+    font-weight: 300;
+
+}
+
 .register {
   margin: 10px;
 }

diff --git a/src/scenes/injury-info/add-reply.js b/src/scenes/injury-info/add-reply.js
@@ -13,26 +13,41 @@ export default class Reply extends Component {
         super(props)
         this.state = {
             comment: '',
-            
+
         }
         this.handleSubmit = this.handleSubmit.bind(this);
         this.handleChange = this.handleChange.bind(this);
         this.cancel = this.cancel.bind(this);
     }
 
+    componentWillMount () {
+        if (this.mode === 'edit') {       
+        this.setState({
+            comment: this.props.comment.text
+        })
+    }
+    }
+
     handleChange(event) {
         this.setState({
             [event.target.name]: event.target.value
-        })
+        });
     }
 
     handleSubmit(event) {
         event.preventDefault()
         console.log('reply component, state: ');
         console.log(this.state);
+
+        if (this.props.mode === 'add') {
+            this.props.addReply(this.state.comment);
+        } else if (this.props.mode === 'edit') {
+            this.props.editReply(this.state.comment, this.props.comment._id);
+        }
+
         //need to figure out how to get access to injury and treatment ids
 
-        this.props.addReply(this.state.comment);
+
     }
 
     cancel() {
@@ -66,6 +81,7 @@ export default class Reply extends Component {
                                     onClick={this.cancel}
                                 ></input>
                                 &nbsp;
+
 								<input
                                     className="btn btn-primary col-1 col-mr-auto"
                                     type="submit"

diff --git a/src/scenes/injury-info/comments.js b/src/scenes/injury-info/comments.js
@@ -1,11 +1,42 @@
 import React, { Component } from 'react';
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+//components
+import Reply from './add-reply';
+//actions
+import editComment from '../../actions/edit-comment';
 
-export default class Comments extends Component {
+class Comments extends Component {
     constructor(props) {
         super(props);
         this.state = {
-
+            showForm: '',
         }
+        this.showForm = this.showForm.bind(this);
+    }
+
+    showForm(id) {
+        this.setState({
+            showForm: id
+        });
+    }
+
+    editReply(comment, commentId) {
+        console.log('comments.js, editReply, comment, id: ');
+        console.log(comment);
+        console.log(commentId);
+
+        this.props.editReply({
+            comment: comment,
+            commentId: commentId,
+            injuryId: this.props.injuryId
+        });
+    }
+
+    cancelReply() {
+        this.setState({
+            showForm: '',
+        })
     }
 
     render() {
@@ -16,31 +47,79 @@ export default class Comments extends Component {
         console.log(commentsCopy[0].text);
 
         const comments = commentsCopy.map((commentObj, j) =>
+
             <div className="columns" key={j.toString()}>
-                <div className="column col-5"></div>
                 <div className="column col-6 col-mr-auto">
-                    <div className="">
-                        <div className="card-bdy">
-                            <div className="card-title-line">
-                                <p className="upvotes">{commentObj.text}
-                                    &nbsp;
-
-            <span className="upvotes">Upvotes: {commentObj.upvotes} &nbsp;</span></p>
-                            </div>
-                            <div className="card-title-line">
-                                <button className="btn btn-sm" aria-label="up vote"><i className="icon icon-upward"></i></button>
-                            </div>
+
+                    {/* {this.state.showForm === commentObj._id ?
+
+            <Reply
+                                editReply={this.editReply}
+                                cancelReply={this.cancelReply}
+                                mode={'edit'}
+                                comment={commentObj}
+            />
+                            : */}
+                    <div className="card-bdy">
+                        <div className="">
+                            <p>
+                                {
+                                    this.state.showForm !== '' ?
+                                    <div className="upvotes">{commentObj.text}
+                                        &nbsp;
+                                    </div>
+
+                                    :
+
+                                    <div>
+                                        <Reply
+                                            addReply={this.addReply}
+                                            cancelReply={this.cancelReply}
+                                            mode={'add'} />
+                                    </div>
+                                }
+
+                                <span className="upvotes">Upvotes: {commentObj.upvotes} &nbsp;
+                        </span>
+                            </p>
                         </div>
 
+                        <p>
+                            <span className="list-links"
+                                onClick={() => this.showForm(commentObj._id)}
+                            >Edit &nbsp;</span>
+                            <span className="list-links">Delete &nbsp;
+                            </span>
+                        </p>
+                    </div>
+                    <div className="card-title-line">
+                        <button className="btn btn-sm" aria-label="up vote"><i className="icon icon-upward"></i></button>
                     </div>
                 </div>
             </div>
-        );
+        )
+
 
         return (
             <div>
                 {comments}
-            </div>
+            </div >
         );
     }
-}
+}
+
+function mapStateToProps(state) {
+    console.log('Comments mapStateToProps called, state: ');
+    console.log(state);
+    return {
+
+    };
+}
+
+function mapDispatchToProps(dispatch) {
+    return bindActionCreators({
+        editComment: editComment
+    }, dispatch);
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Comments);
diff --git a/src/scenes/injury-info/treatment.js b/src/scenes/injury-info/treatment.js
@@ -15,7 +15,7 @@ class Treatment extends Component {
             treatmentId: '', //selected treatment
             commentId: '',
             commentParentId: '', //will need eventually for nested comments
-            showComments: false
+            showComments: true
         }
         this.showForm = this.showForm.bind(this);
         this.cancelReply = this.cancelReply.bind(this);
@@ -104,13 +104,7 @@ class Treatment extends Component {
                             </p>
                         </div>
                         {/* ************************************************************ */}
-                        {this.state.treatmentId !== '' &&
-                            <div>
-                                <Reply
-                                    addReply={this.addReply}
-                                    cancelReply={this.cancelReply} />
-                            </div>
-                        }
+
 
                     </div>
                     <div>
@@ -119,6 +113,7 @@ class Treatment extends Component {
                             <Comments
                                 comments={this.props.comments}
                                 toggleComments={this.toggleComments}
+                                injuryId={this.props.injuryId}
                             />
                         }