show Collapse button on hover

src/components/Comments/SingleComment/ExpandedComment.js

@@ -2,7 +2,12 @@ import React from 'react'
 
 const ExpandedComment = props => {
   return (
-    <li className="" key={props.id}>
+    <li
+      className=""
+      key={props.id}
+      onMouseEnter={() => props.showCollapse(props.id, true)}
+      onMouseLeave={() => props.showCollapse(props.id, false)}
+    >
       <div className="media bg bg-dark">
         <img alt="profile" src={props.user.avatar} height={64} />
 
@@ -20,6 +25,7 @@ const ExpandedComment = props => {
                 fontVariant: 'small-caps',
                 color: 'blue',
                 cursor: 'pointer',
+                display: props.displayCollapse || 'none',
               }}
               onClick={() => props.toggleCollapse(props.id)}
             >

src/components/Comments/index.js

@@ -6,6 +6,16 @@ class ThreadList extends React.Component {
   constructor() {
     super()
     this.toggleCollapse = this.toggleCollapse.bind(this)
+    this.showCollapse = this.showCollapse.bind(this)
+  }
+
+  showCollapse(id, state) {
+    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'] = state
+    //console.log('displayed collapse for: ', comment)
+    this.setState({ comments: otherComments.concat(comment) })
   }
 
   toggleCollapse(id) {
@@ -37,6 +47,7 @@ class ThreadList extends React.Component {
               <div className="ml-3" key={uuid()}>
                 <SingleComment
                   threadLevel={this.props.threadLevel}
+                  showCollapse={this.showCollapse}
                   toggleCollapse={this.toggleCollapse}
                   {...comment}
                 />
@@ -47,16 +58,16 @@ class ThreadList extends React.Component {
               <div className="ml-3" key={uuid()}>
                 <SingleComment
                   threadLevel={this.props.threadLevel}
+                  showCollapse={this.showCollapse}
                   toggleCollapse={this.toggleCollapse}
                   {...comment}
                 />
-                {!comment.collapsed ? (
+                {!comment.collapsed && (
                   <ThreadList
                     threadLevel={comment.id}
+                    showCollapse={this.showCollapse}
                     comments={this.props.comments}
                   />
-                ) : (
-                  ''
                 )}
               </div>
             )