From 5576bf2251e97b1db8f33dba130e8bbccea370ac Mon Sep 17 00:00:00 2001
From: notnull <notnull@anarchyplanet.org>
Date: Sat, 13 Jul 2019 07:56:55 -0400
Subject: [PATCH] WIP recursion

---
 .gitignore                                    |  2 +
 src/App.js                                    | 31 +++++-------
 src/Components/AllComments/AllCommentsView.js | 12 -----
 src/Components/AllComments/CommentList.js     | 15 ------
 src/Components/AllComments/CommentRow.js      | 33 -------------
 src/Components/AllComments/Replies.js         | 20 --------
 src/Components/AllComments/SingleComment.js   | 10 ----
 .../SingleComment}/CollapsedComment.js        |  4 +-
 .../SingleComment}/ExpandedComment.js         |  5 +-
 .../Comments/SingleComment/index.js           | 12 +++++
 src/Components/Comments/index.js              | 47 +++++++++++++++++++
 .../Navbar/{NavbarView.js => index.js}        |  0
 src/Components/index.js                       |  4 +-
 13 files changed, 80 insertions(+), 115 deletions(-)
 delete mode 100644 src/Components/AllComments/AllCommentsView.js
 delete mode 100644 src/Components/AllComments/CommentList.js
 delete mode 100644 src/Components/AllComments/CommentRow.js
 delete mode 100644 src/Components/AllComments/Replies.js
 delete mode 100644 src/Components/AllComments/SingleComment.js
 rename src/Components/{AllComments => Comments/SingleComment}/CollapsedComment.js (88%)
 rename src/Components/{AllComments => Comments/SingleComment}/ExpandedComment.js (91%)
 create mode 100644 src/Components/Comments/SingleComment/index.js
 create mode 100644 src/Components/Comments/index.js
 rename src/Components/Navbar/{NavbarView.js => index.js} (100%)

diff --git a/.gitignore b/.gitignore
index 4d29575..56e27d6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+old
diff --git a/src/App.js b/src/App.js
index 7aed175..dd2d6b7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { NavbarView, CommentsView } from './Components'
+import { Navbar, Comments } from './Components'
 import axios from 'axios'
 
 const API = 'http://localhost:5555'
@@ -13,15 +13,6 @@ const comments = [
     replies: [
       { id: 3, text: 'c3', replies: [] },
       { id: 4, text: 'c4', replies: [] },
-      { id: 5, text: 'c5', replies: [] },
-    ],
-  },
-  {
-    id: 6,
-    text: 'c6',
-    replies: [
-      { id: 7, text: 'c7', replies: [] },
-      { id: 8, text: 'c8', replies: [] },
     ],
   },
 ]
@@ -37,14 +28,14 @@ class App extends React.Component {
   }
 
   async fetchComments() {
-    // try {
-    //   const { data } = await axios.get(API + '/api/comments')
-    //   return data
-    // } catch (error) {
-    //   console.log(error)
-    //   this.setState({ error })
-    // }
-    return comments
+    try {
+      const { data } = await axios.get(API + '/api/comments')
+      return data
+    } catch (error) {
+      console.log(error)
+      this.setState({ error })
+    }
+    //return comments
   }
 
   async fetchData() {
@@ -67,8 +58,8 @@ class App extends React.Component {
   renderApp() {
     return (
       <div>
-        <NavbarView {...this.state} />
-        <CommentsView {...this.state} />
+        <Navbar {...this.state} />
+        <Comments {...this.state} />
       </div>
     )
   }
diff --git a/src/Components/AllComments/AllCommentsView.js b/src/Components/AllComments/AllCommentsView.js
deleted file mode 100644
index 6b0947a..0000000
--- a/src/Components/AllComments/AllCommentsView.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react'
-import CommentList from './CommentList'
-import { Container } from 'react-bootstrap'
-
-const AllCommentsView = props => {
-  return (
-    <Container className="mt-5">
-      <CommentList {...props} />
-    </Container>
-  )
-}
-export default AllCommentsView
diff --git a/src/Components/AllComments/CommentList.js b/src/Components/AllComments/CommentList.js
deleted file mode 100644
index 2026fc7..0000000
--- a/src/Components/AllComments/CommentList.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react'
-import CommentRow from './CommentRow'
-
-const CommentList = props => {
-  const { comments } = props
-  return (
-    <ul className="list-unstyled">
-      {comments.map(comment => (
-        <CommentRow key={comment.id} {...comment} />
-      ))}
-    </ul>
-  )
-}
-
-export default CommentList
diff --git a/src/Components/AllComments/CommentRow.js b/src/Components/AllComments/CommentRow.js
deleted file mode 100644
index 003d810..0000000
--- a/src/Components/AllComments/CommentRow.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react'
-import SingleComment from './SingleComment'
-import Replies from './Replies'
-
-//todo: rename to 'thread'
-class CommentRow extends React.Component {
-  constructor() {
-    super()
-    this.state = {}
-    this.toggleCollapse = this.toggleCollapse.bind(this)
-  }
-
-  toggleCollapse() {
-    this.setState({ collapsed: !this.state.collapsed })
-  }
-
-  render() {
-    const { text, replies } = this.props
-
-    return (
-      <div>
-        <SingleComment
-          toggleCollapse={this.toggleCollapse}
-          collapsed={this.state.collapsed}
-          text={text}
-        />
-        <Replies collapsed={this.state.collapsed} replies={replies} />
-      </div>
-    )
-  }
-}
-
-export default CommentRow
diff --git a/src/Components/AllComments/Replies.js b/src/Components/AllComments/Replies.js
deleted file mode 100644
index 9622cd4..0000000
--- a/src/Components/AllComments/Replies.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react'
-import CommentList from './CommentList'
-
-class Replies extends React.Component {
-  constructor() {
-    super()
-    this.state = {}
-  }
-
-  render() {
-    const { replies } = this.props
-    return (
-      <div className="ml-3">
-        <CommentList comments={replies} />
-      </div>
-    )
-  }
-}
-
-export default Replies
diff --git a/src/Components/AllComments/SingleComment.js b/src/Components/AllComments/SingleComment.js
deleted file mode 100644
index 6b88047..0000000
--- a/src/Components/AllComments/SingleComment.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react'
-import ExpandedComment from './ExpandedComment'
-import CollapsedComment from './CollapsedComment'
-
-export default props => {
-  const { text, collapsed, toggleCollapse } = props
-  if (collapsed)
-    return <CollapsedComment toggleCollapse={toggleCollapse} text={text} />
-  return <ExpandedComment toggleCollapse={toggleCollapse} text={text} />
-}
diff --git a/src/Components/AllComments/CollapsedComment.js b/src/Components/Comments/SingleComment/CollapsedComment.js
similarity index 88%
rename from src/Components/AllComments/CollapsedComment.js
rename to src/Components/Comments/SingleComment/CollapsedComment.js
index 8f02b22..f6ff902 100644
--- a/src/Components/AllComments/CollapsedComment.js
+++ b/src/Components/Comments/SingleComment/CollapsedComment.js
@@ -1,6 +1,6 @@
 import React from 'react'
 
-export default props => {
+const CollapsedComment = props => {
   return (
     <li>
       <div className="media-body ml-3 py-2 my-auto">
@@ -22,3 +22,5 @@ export default props => {
     </li>
   )
 }
+
+export default CollapsedComment
diff --git a/src/Components/AllComments/ExpandedComment.js b/src/Components/Comments/SingleComment/ExpandedComment.js
similarity index 91%
rename from src/Components/AllComments/ExpandedComment.js
rename to src/Components/Comments/SingleComment/ExpandedComment.js
index dfdd36f..92f8c83 100644
--- a/src/Components/AllComments/ExpandedComment.js
+++ b/src/Components/Comments/SingleComment/ExpandedComment.js
@@ -1,6 +1,5 @@
 import React from 'react'
-
-export default props => {
+const ExpandedComment = props => {
   const { text } = props
 
   return (
@@ -30,3 +29,5 @@ export default props => {
     </li>
   )
 }
+
+export default ExpandedComment
diff --git a/src/Components/Comments/SingleComment/index.js b/src/Components/Comments/SingleComment/index.js
new file mode 100644
index 0000000..d6738f2
--- /dev/null
+++ b/src/Components/Comments/SingleComment/index.js
@@ -0,0 +1,12 @@
+import React from 'react'
+import ExpandedComment from './ExpandedComment'
+import CollapsedComment from './CollapsedComment'
+
+const SingleComment = props => {
+  console.log(props)
+  const { collapsed } = props
+  if (collapsed) return <CollapsedComment {...props} />
+  return <ExpandedComment {...props} />
+}
+
+export default SingleComment
diff --git a/src/Components/Comments/index.js b/src/Components/Comments/index.js
new file mode 100644
index 0000000..90fbe6e
--- /dev/null
+++ b/src/Components/Comments/index.js
@@ -0,0 +1,47 @@
+import React from 'react'
+import SingleComment from './SingleComment'
+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 })
+  }
+
+  render() {
+    const { comments } = this.props
+    console.log(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}
+                />
+              )}
+            </div>
+          )
+        })}
+      </ul>
+    )
+  }
+}
+
+export default ThreadList
diff --git a/src/Components/Navbar/NavbarView.js b/src/Components/Navbar/index.js
similarity index 100%
rename from src/Components/Navbar/NavbarView.js
rename to src/Components/Navbar/index.js
diff --git a/src/Components/index.js b/src/Components/index.js
index 6f8970f..aa234d8 100644
--- a/src/Components/index.js
+++ b/src/Components/index.js
@@ -1,2 +1,2 @@
-export { default as NavbarView } from './Navbar/NavbarView'
-export { default as CommentsView } from './AllComments/AllCommentsView'
+export { default as Navbar } from './Navbar'
+export { default as Comments } from './Comments'