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

src/Components/Comments/SingleComment/ExpandedComment.js

@@ -1,34 +1,49 @@
 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>
-          <div>
-            <small>July 9 2019, 01:32:27 UTC</small>
-            {props.replies.length > 0 ? (
-              <span
-                className="a ml-3"
-                style={{
-                  fontVariant: 'small-caps',
-                  color: 'blue',
-                  cursor: 'pointer',
-                }}
-                onClick={() => props.toggleCollapse(props.id)}
-              >
-                collapse
-              </span>
-            ) : (
-              ''
-            )}
-          </div>
+          <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)}
+            >
+              collapse
+            </span>
+          ) : (
+            ''
+          )}
+          <a
+            className="float-right ml-2"
+            href="#replies"
+            onClick={props.replyToComment}
+          >
+            reply
+          </a>
         </div>
       </div>
-      <div>{text}</div>
-      <a href="#replies">reply</a>
+      <div className="">{props.text}</div>
     </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}
                   />
                 )}