src/Components/Comments/SingleComment/ExpandedComment.js

@@ -1,45 +1,34 @@
 import React from 'react'
-
 const ExpandedComment = props => {
+  const { text } = props
   return (
-    <li
+    <li key={props.id}>
-      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 className="" href="#user">
+          <a href="#user">username</a>
-            username
+          <div>
-          </a>
+            <small>July 9 2019, 01:32:27 UTC</small>
-        </div>
+            {props.replies.length > 0 ? (
-        <div className="white">
+              <span
-          <small>{props.createdAt}</small>
+                className="a ml-3"
-          {props.replies.length > 0 ? (
+                style={{
-            <span
+                  fontVariant: 'small-caps',
-              className="a ml-3"
+                  color: 'blue',
-              style={{
+                  cursor: 'pointer',
-                fontVariant: 'small-caps',
+                }}
-                color: 'blue',
+                onClick={() => props.toggleCollapse(props.id)}
-                cursor: 'pointer',
+              >
-                display: props.displayCollapse || 'none',
+                collapse
-              }}
+              </span>
-              onClick={() => props.toggleCollapse(props.id, !props.collapsed)}
+            ) : (
-            >
+              ''
-              {props.collapsed ? 'expand' : 'collapse'}
+            )}
-            </span>
+          </div>
-          ) : (
-            ''
-          )}
-          <a className="float-right ml-2" href="#replies">
-            reply
-          </a>
         </div>
       </div>
-      <div className="">{props.text}</div>
+      <div>{text}</div>
+      <a href="#replies">reply</a>
     </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

@@ -6,42 +6,17 @@ class ThreadList extends React.Component {
   constructor() {
     super()
     this.toggleCollapse = this.toggleCollapse.bind(this)
-    this.showCollapseLink = this.showCollapseLink.bind(this)
   }
 
-  showCollapseLink(id, collapsed) {
+  toggleCollapse(id) {
-    this.setState({ displayCollapse: 'block' })
+    // select passed comment from the state, toggle it and put it all back
     const otherComments = this.props.comments.filter(c => c.id !== id)
     const comment = this.props.comments.find(c => c.id === id)
-    comment['displayCollapse'] = collapsed
+    comment['collapsed'] = !comment.collapsed
-    //console.log('displayed collapse for: ', comment)
+    console.log('toggled: ', 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['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
-    }
-    this.setState({ comments: otherComments.concat(parent) })
-    parent.replies.map(comment => this.toggleReplies(comment.id, collapsed))
-  }
-  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
-    this.setState({ comments: otherComments.concat(comment) })
-    if (comment.replies) {
-      comment.replies.map(c => this.toggleReplies(c.id, collapsed))
-    }
-  }
-
   render() {
     const comments = this.props.comments.filter(
       // only show comments for this parent / thread
@@ -49,20 +24,16 @@ 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 && comment.replies.length === 0) {
+          if (!comment.replies.length > 0) {
             return (
               <div className="ml-3" key={uuid()}>
                 <SingleComment
                   threadLevel={this.props.threadLevel}
-                  showCollapseLink={this.showCollapseLink}
                   toggleCollapse={this.toggleCollapse}
                   {...comment}
                 />
@@ -73,15 +44,15 @@ class ThreadList extends React.Component {
               <div className="ml-3" key={uuid()}>
                 <SingleComment
                   threadLevel={this.props.threadLevel}
-                  showCollapseLink={this.showCollapseLink}
                   toggleCollapse={this.toggleCollapse}
                   {...comment}
                 />
-                <ThreadList
+                {!comment.collapsed && (
-                  threadLevel={comment.id}
+                  <ThreadList
-                  showCollapseLink={this.showCollapseLink}
+                    threadLevel={comment.id}
-                  comments={this.props.comments}
+                    comments={this.props.comments}
-                />
+                  />
+                )}
               </div>
             )
           }