don't rerender on hover for collapse/expand link

public/custom.css

@@ -1,3 +1,15 @@
 .replies {
   margin-left: 1em;
 }
+a:hover {
+  text-decoration: none;
+  color: #007bff;
+}
+.comment-meta a {
+  display: none;
+}
+.comment-meta:hover a {
+  display: inline;
+  text-decoration: none;
+  color: #007bff;
+}

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/CollapsedComment.js

@@ -7,17 +7,15 @@ const CollapsedComment = props => {
         <img className="px-2" alt="profile" src="anon.jpeg" height={16} />
         <a href="#user">username</a>
         <small className="px-3">One day ago</small>
-        <span
-          className="a"
+        <a
+          href="#toggle"
           style={{
             fontVariant: 'small-caps',
-            color: 'blue',
-            cursor: 'pointer',
           }}
           onClick={() => props.toggleCollapse(props.id)}
         >
           expand
-        </span>
+        </a>
       </div>
     </li>
   )

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,45 +1,54 @@
 import React from 'react'
+import CommentReply from './CommentReply'
 
 const ExpandedComment = props => {
   return (
-    <li
-      className=""
-      key={props.id}
-      onMouseEnter={() => props.showCollapseLink(props.id, true)}
-      onMouseLeave={() => props.showCollapseLink(props.id, false)}
-    >
-      <div className="media bg bg-dark">
+    <li key={props.id}>
+      <div id="media-image" className="media bg bg-dark">
         <img alt="profile" src="anon.jpeg" height={64} />
 
-        <div className="media-body ml-3 my-auto">
-          <a className="" href="#user">
-            username
-          </a>
-        </div>
-        <div className="white">
-          <small>{props.createdAt}</small>
-          {props.replies.length > 0 ? (
-            <span
-              className="a ml-3"
-              style={{
-                fontVariant: 'small-caps',
-                color: 'blue',
-                cursor: 'pointer',
-                display: props.displayCollapse || 'none',
-              }}
-              onClick={() => props.toggleCollapse(props.id, !props.collapsed)}
-            >
-              {props.collapsed ? 'expand' : 'collapse'}
-            </span>
-          ) : (
-            ''
-          )}
-          <a className="float-right ml-2" href="#replies">
-            reply
-          </a>
+        <div id="media-body" className="media-body ml-3 my-auto">
+          <a href="#user">username</a>
+          <div className="comment-meta text-white-50">
+            <small>{props.createdAt}</small>
+            {props.replies.length > 0 ? (
+              <a
+                href="#toggle"
+                className="ml-3"
+                style={{
+                  fontVariant: 'small-caps',
+                }}
+                onClick={() =>
+                  props.toggleCollapse(props.id, !props.collapsedThread)
+                }
+              >
+                {props.collapsedThread ? 'expand' : 'collapse'}
+              </a>
+            ) : (
+              ''
+            )}
+          </div>
         </div>
       </div>
       <div className="">{props.text}</div>
+
+      {props.collapsed ? (
+        <div />
+      ) : (
+        <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/SingleComment/index.js

@@ -3,7 +3,7 @@ import ExpandedComment from './ExpandedComment'
 import CollapsedComment from './CollapsedComment'
 
 const SingleComment = props => {
-  if (props.hidden) return <CollapsedComment {...props} />
+  if (props.collapsed) return <CollapsedComment {...props} />
   return <ExpandedComment {...props} />
 }
 

src/Components/Comments/index.js

@@ -5,29 +5,20 @@ 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)
-  }
-
-  showCollapseLink(id, collapsed) {
-    this.setState({ displayCollapse: 'block' })
-    const otherComments = this.props.comments.filter(c => c.id !== id)
-    const comment = this.props.comments.find(c => c.id === id)
-    comment['displayCollapse'] = collapsed
-    //console.log('displayed collapse for: ', comment)
-    this.setState({ comments: otherComments.concat(comment) })
+    this.showReply = this.showReply.bind(this)
   }
 
   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)
-    parent['collapsed'] = collapsed
+    parent['collapsedThread'] = collapsed
     if (!collapsed) {
       // when parent was a reply in a previously collapsed thread
       // and is to be expanded it will be marked hidden
       // and needs to be unhidden
-      parent['hidden'] = false
+      parent['collapsed'] = false
     }
     this.setState({ comments: otherComments.concat(parent) })
     parent.replies.map(comment => this.toggleReplies(comment.id, collapsed))
@@ -35,11 +26,18 @@ class ThreadList extends React.Component {
   toggleReplies(id, collapsed) {
     const otherComments = this.props.comments.filter(c => c.id !== id)
     var comment = this.props.comments.find(c => c.id === id)
-    comment['hidden'] = collapsed
+    comment['collapsed'] = collapsed
     this.setState({ comments: otherComments.concat(comment) })
-    if (comment.replies) {
-      comment.replies.map(c => this.toggleReplies(c.id, collapsed))
-    }
+    comment.replies.map(c => this.toggleReplies(c.id, collapsed))
+  }
+
+  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() {
@@ -52,39 +50,31 @@ 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}
+                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>
     )