view changes to ExpendedComments.js, show Collapse/Expand on hover

src/Components/Comments/SingleComment/ExpandedComment.js

@@ -1,14 +1,23 @@
 import React from 'react'
+
 const ExpandedComment = props => {
-  const { text } = props
   return (
-    <li key={props.id}>
+    <li
+      className=""
+      key={props.id}
+      onMouseEnter={() => props.showCollapseLink(props.id, true)}
+      onMouseLeave={() => props.showCollapseLink(props.id, false)}
+    >
       <div className="media bg bg-dark">
         <img alt="profile" src="anon.jpeg" height={64} />
+
         <div className="media-body ml-3 my-auto">
-          <a href="#user">username</a>
+          <a className="" href="#user">
-          <div>
+            username
-            <small>July 9 2019, 01:32:27 UTC</small>
+          </a>
+        </div>
+        <div className="white">
+          <small>{props.createdAt}</small>
           {props.replies.length > 0 ? (
             <span
               className="a ml-3"
@@ -16,6 +25,7 @@ const ExpandedComment = props => {
                 fontVariant: 'small-caps',
                 color: 'blue',
                 cursor: 'pointer',
+                display: props.displayCollapse || 'none',
               }}
               onClick={() => props.toggleCollapse(props.id)}
             >
@@ -24,11 +34,16 @@ const ExpandedComment = props => {
           ) : (
             ''
           )}
+          <a
+            className="float-right ml-2"
+            href="#replies"
+            onClick={props.replyToComment}
+          >
+            reply
+          </a>
         </div>
       </div>
-      </div>
+      <div className="">{props.text}</div>
-      <div>{text}</div>
-      <a href="#replies">reply</a>
     </li>
   )
 }

src/Components/Comments/index.js

@@ -6,6 +6,16 @@ class ThreadList extends React.Component {
   constructor() {
     super()
     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) })
   }
 
   toggleCollapse(id) {
@@ -24,18 +34,23 @@ class ThreadList extends React.Component {
         (!c.parentId && !this.props.threadLevel) ||
         c.parentId === this.props.threadLevel
     )
+    if (comments.length === 0) {
+      return ''
+    }
     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.length > 0) {
+          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 {
@@ -43,12 +58,14 @@ class ThreadList extends React.Component {
               <div className="ml-3" key={uuid()}>
                 <SingleComment
                   threadLevel={this.props.threadLevel}
+                  showCollapseLink={this.showCollapseLink}
                   toggleCollapse={this.toggleCollapse}
                   {...comment}
                 />
                 {!comment.collapsed && (
                   <ThreadList
                     threadLevel={comment.id}
+                    showCollapseLink={this.showCollapseLink}
                     comments={this.props.comments}
                   />
                 )}