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;
+}

src/Components/Comments/SingleComment/ExpandedComment.js

@@ -3,18 +3,13 @@ import CommentReply from './CommentReply'
 
 const ExpandedComment = props => {
   return (
-    <li
+    <li key={props.id}>
-      className=""
-      key={props.id}
-      onMouseEnter={() => props.showCollapseLink(props.id, true)}
-      onMouseLeave={() => props.showCollapseLink(props.id, false)}
-    >
       <div id="media-image" className="media bg bg-dark">
         <img alt="profile" src="anon.jpeg" height={64} />
 
         <div id="media-body" className="media-body ml-3 my-auto">
           <a href="#user">username</a>
-          <div className="text-white-50">
+          <div className="comment-meta text-white-50">
             <small>{props.createdAt}</small>
             {props.replies.length > 0 ? (
               <a
@@ -22,11 +17,12 @@ const ExpandedComment = props => {
                 className="ml-3"
                 style={{
                   fontVariant: 'small-caps',
-                  display: props.displayCollapse || 'none',
                 }}
-                onClick={() => props.toggleCollapse(props.id, !props.collapsed)}
+                onClick={() =>
+                  props.toggleCollapse(props.id, !props.collapsedThread)
+                }
               >
-                {props.collapsed ? 'expand' : 'collapse'}
+                {props.collapsedThread ? 'expand' : 'collapse'}
               </a>
             ) : (
               ''

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

@@ -7,29 +7,18 @@ class ThreadList extends React.Component {
     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) {
-    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) })
-  }
-
   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['collapsedThread'] = collapsed
-    parent['collapsed'] = 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))
@@ -37,11 +26,9 @@ 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) {
@@ -73,7 +60,6 @@ class ThreadList extends React.Component {
             <div className="ml-3" key={uuid()}>
               <SingleComment
                 threadLevel={this.props.threadLevel}
-                showCollapseLink={this.showCollapseLink}
                 toggleCollapse={this.toggleCollapse}
                 showReply={this.showReply}
                 submitComment={this.props.submitComment}
@@ -83,7 +69,6 @@ class ThreadList extends React.Component {
               {comment.replies && (
                 <ThreadList
                   threadLevel={comment.id}
-                  showCollapseLink={this.showCollapseLink}
                   comments={this.props.comments}
                   submitComment={this.props.submitComment}
                 />