Added comment replies

server/api/comments.js

@@ -10,3 +10,13 @@ router.get('/', async (req, res, next) => {
     next(err)
   }
 })
+
+router.post('/', async (req, res, next) => {
+  try {
+    const comment = await Comment.create({ text: req.body.text })
+    await comment.setParent(req.body.parentId)
+    res.send(comment)
+  } catch (err) {
+    next(err)
+  }
+})

server/db/seed.js

@@ -1,31 +1,14 @@
 const db = require('../db')
 const { Comment } = require('./models')
 
-const tc1 = { text: 'c1' }
-const tc2 = { text: 'c2' }
-const tc3 = { text: 'c3' }
-const tc4 = { text: 'c4' }
-const tc5 = { text: 'c5' }
-const tc6 = { text: 'c6' }
+const tc1 = { text: 'FIRST' }
 
 async function runSeed() {
   await db.sync({ force: true })
   console.log('db synced!')
   console.log('seeding...')
   try {
-    const c1 = await Comment.create(tc1)
-    const c2 = await Comment.create(tc2)
-    const c3 = await Comment.create(tc3)
-    const c4 = await Comment.create(tc4)
-    const c5 = await Comment.create(tc5)
-    const c6 = await Comment.create(tc6)
-
-    await c1.addReply(2)
-
-    await c2.addReplies([c3, c4])
-    await c5.setParent(c4)
-
-    await c6.setParent(c1)
+    await Comment.create(tc1)
 
     console.log('seeded successfully')
   } catch (err) {

src/App.js

@@ -9,6 +9,7 @@ class App extends React.Component {
   constructor() {
     super()
     this.state = { loading: true }
+    this.submitComment = this.submitComment.bind(this)
   }
 
   componentDidMount() {
@@ -35,6 +36,11 @@ class App extends React.Component {
     }
   }
 
+  async submitComment(submittedData) {
+    await axios.post(API + '/api/comments', submittedData)
+    await this.fetchData()
+  }
+
   renderLoading() {
     return <div>loading...</div>
   }
@@ -47,7 +53,7 @@ class App extends React.Component {
     return (
       <div>
         <Navbar {...this.state} />
-        <Comments {...this.state} />
+        <Comments submitComment={this.submitComment} {...this.state} />
       </div>
     )
   }

src/Components/Comments/SingleComment/CommentReply.js

@@ -0,0 +1,35 @@
+import React from 'react'
+
+class CommentReply extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = { parentId: props.id, text: '' }
+    this.handleSubmit = this.handleSubmit.bind(this)
+    this.handleChange = this.handleChange.bind(this)
+  }
+  handleChange(e) {
+    this.setState({ [e.target.name]: e.target.value })
+  }
+
+  handleSubmit(e) {
+    e.preventDefault()
+    this.props.submitComment(this.state)
+    this.props.showReply(null)
+  }
+  render() {
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <textarea
+          name="text"
+          onChange={this.handleChange}
+          value={this.state.text}
+        />
+        <button className="btn btn-dark" onClick={this.handleSubmit}>
+          Submit
+        </button>
+      </form>
+    )
+  }
+}
+
+export default CommentReply

src/Components/Comments/SingleComment/ExpandedComment.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import CommentReply from './CommentReply'
 
 const ExpandedComment = props => {
   return (
@@ -38,10 +39,20 @@ const ExpandedComment = props => {
       {props.collapsed ? (
         <div />
       ) : (
-        <a className="" href="#replies">
+        <a className="" href="#reply" onClick={() => props.showReply(props.id)}>
           reply
         </a>
       )}
+      {props.id === props.activeReplyId ? (
+        <CommentReply
+          id={props.id}
+          submitComment={props.submitComment}
+          showReply={props.showReply}
+          {...props}
+        />
+      ) : (
+        <div />
+      )}
     </li>
   )
 }

src/Components/Comments/index.js

@@ -5,8 +5,10 @@ import uuid from 'uuid'
 class ThreadList extends React.Component {
   constructor() {
     super()
+    this.state = { activeReplyId: null }
     this.toggleCollapse = this.toggleCollapse.bind(this)
     this.showCollapseLink = this.showCollapseLink.bind(this)
+    this.showReply = this.showReply.bind(this)
   }
 
   showCollapseLink(id, collapsed) {
@@ -21,7 +23,7 @@ class ThreadList extends React.Component {
   toggleCollapse(id, collapsed) {
     const otherComments = this.props.comments.filter(c => c.id !== id)
     var parent = this.props.comments.find(c => c.id === id)
-    console.log('toggling', parent)
+    //console.log('toggling', parent)
     parent['collapsed'] = collapsed
     if (!collapsed) {
       // when parent was a reply in a previously collapsed thread
@@ -42,6 +44,15 @@ class ThreadList extends React.Component {
     }
   }
 
+  handleChange(e) {
+    this.setState({ [e.target.name]: e.target.value })
+  }
+
+  showReply(id) {
+    console.log('show ', id, this.state.activeReplyId, this.state)
+    this.setState({ activeReplyId: id })
+  }
+
   render() {
     const comments = this.props.comments.filter(
       // only show comments for this parent / thread
@@ -52,39 +63,33 @@ class ThreadList extends React.Component {
     if (comments.length === 0) {
       return ''
     }
-    console.log('showing comments for thread', this.props.threadLevel, comments)
+    //console.log('showing comments for thread', this.props.threadLevel, comments)
     return (
       <ul className="list-unstyled">
         {comments.map(comment => {
           // TODO comments aren't sorted by time
-          if (comment.replies && comment.replies.length === 0) {
-            return (
-              <div className="ml-3" key={uuid()}>
-                <SingleComment
-                  threadLevel={this.props.threadLevel}
-                  showCollapseLink={this.showCollapseLink}
-                  toggleCollapse={this.toggleCollapse}
-                  {...comment}
-                />
-              </div>
-            )
-          } else {
-            return (
-              <div className="ml-3" key={uuid()}>
-                <SingleComment
-                  threadLevel={this.props.threadLevel}
-                  showCollapseLink={this.showCollapseLink}
-                  toggleCollapse={this.toggleCollapse}
-                  {...comment}
-                />
+
+          return (
+            <div className="ml-3" key={uuid()}>
+              <SingleComment
+                threadLevel={this.props.threadLevel}
+                showCollapseLink={this.showCollapseLink}
+                toggleCollapse={this.toggleCollapse}
+                showReply={this.showReply}
+                submitComment={this.props.submitComment}
+                activeReplyId={this.state.activeReplyId}
+                {...comment}
+              />
+              {comment.replies && (
                 <ThreadList
                   threadLevel={comment.id}
                   showCollapseLink={this.showCollapseLink}
                   comments={this.props.comments}
+                  submitComment={this.props.submitComment}
                 />
-              </div>
-            )
-          }
+              )}
+            </div>
+          )
         })}
       </ul>
     )