Merge branch 'toggle' of tsr/mwe-comments into master

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+old

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)
 

src/App.js

@@ -1,31 +1,10 @@
 import React from 'react'
-import { NavbarView, CommentsView } from './Components'
+import { Navbar, Comments } from './Components'
 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: [] },
-      { id: 5, text: 'c5', replies: [] },
-    ],
-  },
-  {
-    id: 6,
-    text: 'c6',
-    replies: [
-      { id: 7, text: 'c7', replies: [] },
-      { id: 8, text: 'c8', replies: [] },
-    ],
-  },
-]
-
 class App extends React.Component {
   constructor() {
     super()
@@ -37,14 +16,14 @@ class App extends React.Component {
   }
 
   async fetchComments() {
-    // try {
+    try {
-    //   const { data } = await axios.get(API + '/api/comments')
+      const { data } = await axios.get(API + '/api/comments')
-    //   return data
+      return data
-    // } catch (error) {
+    } catch (error) {
-    //   console.log(error)
+      console.log(error)
-    //   this.setState({ error })
+      this.setState({ error })
-    // }
+    }
-    return comments
+    //return comments
   }
 
   async fetchData() {
@@ -67,8 +46,8 @@ class App extends React.Component {
   renderApp() {
     return (
       <div>
-        <NavbarView {...this.state} />
+        <Navbar {...this.state} />
-        <CommentsView {...this.state} />
+        <Comments {...this.state} />
       </div>
     )
   }

src/Components/AllComments/AllCommentsView.js

@@ -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

src/Components/AllComments/CommentList.js

@@ -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

src/Components/AllComments/CommentRow.js

@@ -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

src/Components/AllComments/ExpandedComment.js

@@ -1,32 +0,0 @@
-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/Replies.js

@@ -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

src/Components/AllComments/SingleComment.js

@@ -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} />
-}

src/Components/Comments/SingleComment/CollapsedComment.js

@@ -1,8 +1,8 @@
 import React from 'react'
 
-export default props => {
+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 @@ export default props => {
             color: 'blue',
             cursor: 'pointer',
           }}
-          onClick={props.toggleCollapse}
+          onClick={() => props.toggleCollapse(props.id)}
         >
           expand
         </span>
@@ -22,3 +22,5 @@ export default props => {
     </li>
   )
 }
+
+export default CollapsedComment

src/Components/Comments/SingleComment/ExpandedComment.js

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

src/Components/Comments/SingleComment/index.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import ExpandedComment from './ExpandedComment'
+import CollapsedComment from './CollapsedComment'
+
+const SingleComment = props => {
+  if (props.hidden) return <CollapsedComment {...props} />
+  return <ExpandedComment {...props} />
+}
+
+export default SingleComment

src/Components/Comments/index.js

@@ -0,0 +1,94 @@
+import React from 'react'
+import SingleComment from './SingleComment'
+import uuid from 'uuid'
+
+class ThreadList extends React.Component {
+  constructor() {
+    super()
+    this.toggleCollapse = this.toggleCollapse.bind(this)
+    this.showCollapseLink = this.showCollapseLink.bind(this)
+  }
+
+  showCollapseLink(id, collapsed) {
+    this.setState({ displayCollapse: 'block' })
+    const otherComments = this.props.comments.filter(c => c.id !== id)
+    const comment = this.props.comments.find(c => c.id === id)
+    comment['displayCollapse'] = collapsed
+    //console.log('displayed collapse for: ', 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
+      c =>
+        (!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) {
+            return (
+              <div className="ml-3" key={uuid()}>
+                <SingleComment
+                  threadLevel={this.props.threadLevel}
+                  showCollapseLink={this.showCollapseLink}
+                  toggleCollapse={this.toggleCollapse}
+                  {...comment}
+                />
+              </div>
+            )
+          } else {
+            return (
+              <div className="ml-3" key={uuid()}>
+                <SingleComment
+                  threadLevel={this.props.threadLevel}
+                  showCollapseLink={this.showCollapseLink}
+                  toggleCollapse={this.toggleCollapse}
+                  {...comment}
+                />
+                <ThreadList
+                  threadLevel={comment.id}
+                  showCollapseLink={this.showCollapseLink}
+                  comments={this.props.comments}
+                />
+              </div>
+            )
+          }
+        })}
+      </ul>
+    )
+  }
+}
+
+export default ThreadList

src/Components/index.js

@@ -1,2 +1,2 @@
-export { default as NavbarView } from './Navbar/NavbarView'
+export { default as Navbar } from './Navbar'
-export { default as CommentsView } from './AllComments/AllCommentsView'
+export { default as Comments } from './Comments'