collapsible recursive comments

src/Components/AllComments/AllCommentsView.js

@@ -1,9 +1,12 @@
 import React from 'react'
 import CommentList from './CommentList'
+import { Container } from 'react-bootstrap'
 
-//this could probably be a stateful component
-// that way, we can add some controllers
 const AllCommentsView = props => {
-  return <CommentList {...props} />
+  return (
+    <Container className="mt-5">
+      <CommentList {...props} />
+    </Container>
+  )
 }
 export default AllCommentsView

src/Components/AllComments/CollapsedComment.js

@@ -0,0 +1,24 @@
+import React from 'react'
+
+export default props => {
+  return (
+    <li>
+      <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>
+        <small className="px-3">One day ago</small>
+        <span
+          className="a"
+          style={{
+            fontVariant: 'small-caps',
+            color: 'blue',
+            cursor: 'pointer',
+          }}
+          onClick={props.toggleCollapse}
+        >
+          expand
+        </span>
+      </div>
+    </li>
+  )
+}

src/Components/AllComments/CommentList.js

@@ -1,16 +1,14 @@
 import React from 'react'
 import CommentRow from './CommentRow'
-import { Container } from 'react-bootstrap'
 
 const CommentList = props => {
-  console.log('CommentList', props)
   const { comments } = props
   return (
-    <div>
+    <ul className="list-unstyled">
       {comments.map(comment => (
         <CommentRow key={comment.id} {...comment} />
       ))}
-    </div>
+    </ul>
   )
 }
 

src/Components/AllComments/CommentRow.js

@@ -1,18 +1,33 @@
 import React from 'react'
-import ParentComment from './ParentComment'
+import SingleComment from './SingleComment'
 import Replies from './Replies'
 
-const CommentRow = props => {
-  const { text, replies } = props
+//todo: rename to 'thread'
+class CommentRow extends React.Component {
+  constructor() {
+    super()
+    this.state = {}
+    this.toggleCollapse = this.toggleCollapse.bind(this)
+  }
 
-  const replyCount = replies.length
-  const parentId = props.id
-  return (
-    <div>
-      <ParentComment text={text} replyCount={replyCount} />
-      <Replies parentId={parentId} replies={replies} />
-    </div>
-  )
+  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

src/Components/AllComments/ExpandedComment.js

@@ -0,0 +1,32 @@
+import React from 'react'
+
+export default props => {
+  const { text } = props
+
+  return (
+    <li>
+      <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>
+          </div>
+        </div>
+      </div>
+      <div>{text}</div>
+      <a href="#replies">reply</a>
+    </li>
+  )
+}

src/Components/AllComments/ParentComment.js

@@ -1,36 +0,0 @@
-import React from 'react'
-import { Row, Col, Image } from 'react-bootstrap'
-
-export default props => {
-  const { replyCount, text } = props
-  return (
-    <Row id="parent-comment">
-      <Col
-        xs={2}
-        md={2}
-        lg={2}
-        xl={2}
-        id="image"
-        className="media border border-primary"
-      >
-        <Image src="holder.js/171x180" rounded />
-      </Col>
-      <Col
-        id="parent-comment-text"
-        className="media-body border border-primary"
-      >
-        <Row id="title">
-          <Col className="h6 mt-0 mb-1">Title</Col>
-        </Row>
-        <Row id="comment-text">
-          <Col className="p">{text}</Col>
-        </Row>
-        <Row id="comment-info">
-          <Col>
-            {replyCount} {replyCount === 1 ? 'comment' : 'comments'}
-          </Col>
-        </Row>
-      </Col>
-    </Row>
-  )
-}

src/Components/AllComments/Replies.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import CommentList from './CommentList'
-import { Row, Col } from 'react-bootstrap'
 
 class Replies extends React.Component {
   constructor() {
@@ -9,25 +8,11 @@ class Replies extends React.Component {
   }
 
   render() {
-    const { replies, parentId } = this.props
-
-    if (replies.length > 2) {
-      return (
-        <Row className="replies">
-          <Col>
-            <a href="#more">Read replies...</a>
-          </Col>
-        </Row>
-      )
-    }
+    const { replies } = this.props
     return (
-      <Row className="replies">
-        <Col>
-          {replies.map(reply => (
-            <CommentList key={parentId} comments={replies} />
-          ))}
-        </Col>
-      </Row>
+      <div className="ml-3">
+        <CommentList comments={replies} />
+      </div>
     )
   }
 }

src/Components/AllComments/SingleComment.js

@@ -0,0 +1,10 @@
+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} />
+}