From 0cf3c2e58b9799d789a7b9ad4ff3fa6f71823bf1 Mon Sep 17 00:00:00 2001
From: data <data@devnull>
Date: Sat, 13 Jul 2019 20:24:49 +0200
Subject: [PATCH] show nested collapsed comments

---
 .../Comments/SingleComment/ExpandedComment.js |  4 +--
 .../Comments/SingleComment/index.js           |  2 +-
 src/components/Comments/index.js              | 35 ++++++++++++-------
 3 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/src/components/Comments/SingleComment/ExpandedComment.js b/src/components/Comments/SingleComment/ExpandedComment.js
index b43e88e..ef302b0 100644
--- a/src/components/Comments/SingleComment/ExpandedComment.js
+++ b/src/components/Comments/SingleComment/ExpandedComment.js
@@ -27,9 +27,9 @@ const ExpandedComment = props => {
                 cursor: 'pointer',
                 display: props.displayCollapse || 'none',
               }}
-              onClick={() => props.toggleCollapse(props.id)}
+              onClick={() => props.toggleCollapse(props.id, !props.collapsed)}
             >
-              collapse
+              {props.collapsed ? 'expand' : 'collapse'}
             </span>
           ) : (
             ''
diff --git a/src/components/Comments/SingleComment/index.js b/src/components/Comments/SingleComment/index.js
index 1b4417b..fd1ba90 100644
--- a/src/components/Comments/SingleComment/index.js
+++ b/src/components/Comments/SingleComment/index.js
@@ -3,7 +3,7 @@ import ExpandedComment from './ExpandedComment'
 import CollapsedComment from './CollapsedComment'
 
 const SingleComment = props => {
-  if (props.collapsed) return <CollapsedComment {...props} />
+  if (props.hidden) return <CollapsedComment {...props} />
   return <ExpandedComment {...props} />
 }
 
diff --git a/src/components/Comments/index.js b/src/components/Comments/index.js
index dd63956..a3315e5 100644
--- a/src/components/Comments/index.js
+++ b/src/components/Comments/index.js
@@ -18,13 +18,26 @@ class ThreadList extends React.Component {
     this.setState({ comments: otherComments.concat(comment) })
   }
 
-  toggleCollapse(id) {
-    // select passed comment from the state, toggle it and put it all back
+  toggleCollapse(id, state) {
     const otherComments = this.props.comments.filter(c => c.id !== id)
-    const comment = this.props.comments.find(c => c.id === id)
-    comment['collapsed'] = !comment.collapsed
-    console.log('toggled: ', comment)
+    var parent = this.props.comments.find(c => c.id === id)
+    console.log('toggling', parent)
+    parent['collapsed'] = state
+    if (!state) {
+      // unhide parent when unhiding thread
+      parent['hidden'] = false
+    }
+    this.setState({ comments: otherComments.concat(parent) })
+    parent.replies.map(comment => this.toggleReplies(comment.id, state))
+  }
+  toggleReplies(id, state) {
+    const otherComments = this.props.comments.filter(c => c.id !== id)
+    var comment = this.props.comments.find(c => c.id === id)
+    comment['hidden'] = state
     this.setState({ comments: otherComments.concat(comment) })
+    if (comment.replies) {
+      comment.replies.map(c => this.toggleReplies(c.id, state))
+    }
   }
 
   render() {
@@ -62,13 +75,11 @@ class ThreadList extends React.Component {
                   toggleCollapse={this.toggleCollapse}
                   {...comment}
                 />
-                {!comment.collapsed && (
-                  <ThreadList
-                    threadLevel={comment.id}
-                    showCollapse={this.showCollapse}
-                    comments={this.props.comments}
-                  />
-                )}
+                <ThreadList
+                  threadLevel={comment.id}
+                  showCollapse={this.showCollapse}
+                  comments={this.props.comments}
+                />
               </div>
             )
           }