From 072550cd96336188be64ca85e7360d82fecbe379 Mon Sep 17 00:00:00 2001
From: data <data@devnull>
Date: Fri, 12 Jul 2019 12:56:40 +0200
Subject: [PATCH] fix toggling and thread view

- pass all comments to ThreadList
- filter comments based on threadLevel === parentId
- pass comment id to toggleCollapse()
---
 server/db/seed.js                             |  3 +-
 src/App.js                                    | 12 ----
 .../SingleComment/CollapsedComment.js         |  4 +-
 .../Comments/SingleComment/ExpandedComment.js | 29 +++++----
 .../Comments/SingleComment/index.js           |  4 +-
 src/Components/Comments/index.js              | 64 ++++++++++++-------
 6 files changed, 62 insertions(+), 54 deletions(-)

diff --git a/server/db/seed.js b/server/db/seed.js
index 35380f8..73b8769 100755
--- a/server/db/seed.js
+++ b/server/db/seed.js
@@ -22,7 +22,8 @@ async function runSeed() {
 
     await c1.addReply(2)
 
-    await c2.addReplies([c3, c4, c5])
+    await c2.addReplies([c3, c4])
+    await c5.setParent(c4)
 
     await c6.setParent(c1)
 
diff --git a/src/App.js b/src/App.js
index dd2d6b7..4629786 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,18 +5,6 @@ import axios from 'axios'
 const API = 'http://localhost:5555'
 console.log('Using API at ' + API)
 
-const comments = [
-  { id: 1, text: 'c1', replies: [] },
-  {
-    id: 2,
-    text: 'c2',
-    replies: [
-      { id: 3, text: 'c3', replies: [] },
-      { id: 4, text: 'c4', replies: [] },
-    ],
-  },
-]
-
 class App extends React.Component {
   constructor() {
     super()
diff --git a/src/Components/Comments/SingleComment/CollapsedComment.js b/src/Components/Comments/SingleComment/CollapsedComment.js
index f6ff902..cc712fb 100644
--- a/src/Components/Comments/SingleComment/CollapsedComment.js
+++ b/src/Components/Comments/SingleComment/CollapsedComment.js
@@ -2,7 +2,7 @@ import React from 'react'
 
 const CollapsedComment = props => {
   return (
-    <li>
+    <li key={props.id}>
       <div className="media-body ml-3 py-2 my-auto">
         <img className="px-2" alt="profile" src="anon.jpeg" height={16} />
         <a href="#user">username</a>
@@ -14,7 +14,7 @@ const CollapsedComment = props => {
             color: 'blue',
             cursor: 'pointer',
           }}
-          onClick={props.toggleCollapse}
+          onClick={() => props.toggleCollapse(props.id)}
         >
           expand
         </span>
diff --git a/src/Components/Comments/SingleComment/ExpandedComment.js b/src/Components/Comments/SingleComment/ExpandedComment.js
index 92f8c83..6954424 100644
--- a/src/Components/Comments/SingleComment/ExpandedComment.js
+++ b/src/Components/Comments/SingleComment/ExpandedComment.js
@@ -1,26 +1,29 @@
 import React from 'react'
 const ExpandedComment = props => {
   const { text } = props
-
   return (
-    <li>
+    <li key={props.id}>
       <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>
-            <span
-              className="a ml-3"
-              style={{
-                fontVariant: 'small-caps',
-                color: 'blue',
-                cursor: 'pointer',
-              }}
-              onClick={props.toggleCollapse}
-            >
-              collapse
-            </span>
+            {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>
         </div>
       </div>
diff --git a/src/Components/Comments/SingleComment/index.js b/src/Components/Comments/SingleComment/index.js
index d6738f2..1b4417b 100644
--- a/src/Components/Comments/SingleComment/index.js
+++ b/src/Components/Comments/SingleComment/index.js
@@ -3,9 +3,7 @@ import ExpandedComment from './ExpandedComment'
 import CollapsedComment from './CollapsedComment'
 
 const SingleComment = props => {
-  console.log(props)
-  const { collapsed } = props
-  if (collapsed) return <CollapsedComment {...props} />
+  if (props.collapsed) return <CollapsedComment {...props} />
   return <ExpandedComment {...props} />
 }
 
diff --git a/src/Components/Comments/index.js b/src/Components/Comments/index.js
index 90fbe6e..a15cfe0 100644
--- a/src/Components/Comments/index.js
+++ b/src/Components/Comments/index.js
@@ -5,39 +5,57 @@ import uuid from 'uuid'
 class ThreadList extends React.Component {
   constructor() {
     super()
-    this.state = { collapsed: false }
     this.toggleCollapse = this.toggleCollapse.bind(this)
   }
 
-  toggleCollapse() {
-    this.setState({ collapsed: !this.state.collapsed })
+  toggleCollapse(id) {
+    // 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['collapsed'] = !comment.collapsed
+    console.log('toggled: ', comment)
+    this.setState({ comments: otherComments.concat(comment) })
   }
 
   render() {
-    const { comments } = this.props
-    console.log(comments)
-
+    const comments = this.props.comments.filter(
+      // only show comments for this parent / thread
+      c =>
+        (!c.parentId && !this.props.threadLevel) ||
+        c.parentId === this.props.threadLevel
+    )
+    console.log('showing comments for thread', this.props.threadLevel, comments)
     return (
       <ul className="list-unstyled">
         {comments.map(comment => {
-          return (
-            <div className="ml-3">
-              <SingleComment
-                threadLevel={this.props.threadLevel}
-                collapsed={this.state.collapsed}
-                toggleCollapse={this.toggleCollapse}
-                key={uuid()}
-                {...comment}
-              />
-
-              {comment.replies && (
-                <ThreadList
-                  threadLevel={comment.parentId}
-                  comments={comment.replies}
+          // TODO comments aren't sorted by time
+          if (!comment.replies.length > 0) {
+            return (
+              <div className="ml-3" key={uuid()}>
+                <SingleComment
+                  threadLevel={this.props.threadLevel}
+                  toggleCollapse={this.toggleCollapse}
+                  {...comment}
                 />
-              )}
-            </div>
-          )
+              </div>
+            )
+          } else {
+            return (
+              <div className="ml-3" key={uuid()}>
+                <SingleComment
+                  threadLevel={this.props.threadLevel}
+                  toggleCollapse={this.toggleCollapse}
+                  {...comment}
+                />
+                {!comment.collapsed && (
+                  <ThreadList
+                    threadLevel={comment.id}
+                    comments={this.props.comments}
+                  />
+                )}
+              </div>
+            )
+          }
         })}
       </ul>
     )