From 8d35bf7620c03dec95a0fae0b6bd888b3ceda687 Mon Sep 17 00:00:00 2001 From: data Date: Sat, 13 Jul 2019 13:12:27 +0200 Subject: [PATCH] comment threading --- package.json | 3 +- public/css/custom.css | 3 + public/index.html | 3 +- .../SingleComment/CollapsedComment.js | 26 +++++++ .../Comments/SingleComment/ExpandedComment.js | 41 +++++++++++ .../Comments/SingleComment/index.js | 10 +++ src/components/Comments/index.js | 70 +++++++++++++++++++ src/components/article.js | 11 +-- src/components/index.js | 1 + 9 files changed, 157 insertions(+), 11 deletions(-) create mode 100644 public/css/custom.css create mode 100644 src/components/Comments/SingleComment/CollapsedComment.js create mode 100644 src/components/Comments/SingleComment/ExpandedComment.js create mode 100644 src/components/Comments/SingleComment/index.js create mode 100644 src/components/Comments/index.js diff --git a/package.json b/package.json index d5156d0..1f050ea 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,8 @@ "http-proxy-middleware": "^0.19.1", "react": "^16.8.6", "react-dom": "^16.8.6", - "react-scripts": "3.0.1" + "react-scripts": "3.0.1", + "uuid": "^3.3.2" }, "scripts": { "start": "react-scripts start", diff --git a/public/css/custom.css b/public/css/custom.css new file mode 100644 index 0000000..31e6086 --- /dev/null +++ b/public/css/custom.css @@ -0,0 +1,3 @@ +.replies { + margin-left: 1em; +} diff --git a/public/index.html b/public/index.html index 26ac62f..0387674 100644 --- a/public/index.html +++ b/public/index.html @@ -25,7 +25,8 @@ integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" /> - React App + + Anarchy Planet diff --git a/src/components/Comments/SingleComment/CollapsedComment.js b/src/components/Comments/SingleComment/CollapsedComment.js new file mode 100644 index 0000000..cc712fb --- /dev/null +++ b/src/components/Comments/SingleComment/CollapsedComment.js @@ -0,0 +1,26 @@ +import React from 'react' + +const CollapsedComment = props => { + return ( +
  • +
    + profile + username + One day ago + props.toggleCollapse(props.id)} + > + expand + +
    +
    • + ) +} + +export default CollapsedComment diff --git a/src/components/Comments/SingleComment/ExpandedComment.js b/src/components/Comments/SingleComment/ExpandedComment.js new file mode 100644 index 0000000..f325948 --- /dev/null +++ b/src/components/Comments/SingleComment/ExpandedComment.js @@ -0,0 +1,41 @@ +import React from 'react' +const ExpandedComment = props => { + const { text } = props + return ( +
  • +
    + profile + +
    + + {props.user.name} + +
    +
    + July 9 2019, 01:32:27 UTC + {props.replies.length > 0 ? ( + props.toggleCollapse(props.id)} + > + collapse + + ) : ( + '' + )} + + reply + +
    +
    +
    {text}
    +
    • + ) +} + +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..1b4417b --- /dev/null +++ b/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.collapsed) return + return +} + +export default SingleComment diff --git a/src/components/Comments/index.js b/src/components/Comments/index.js new file mode 100644 index 0000000..c6c79e0 --- /dev/null +++ b/src/components/Comments/index.js @@ -0,0 +1,70 @@ +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) + } + + 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.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 ( +
      + {comments.map(comment => { + // TODO comments aren't sorted by time + if (comment.replies && comment.replies.length === 0) { + return ( +
      + +
      + ) + } else { + return ( +
      + + {!comment.collapsed ? ( + + ) : ( + '' + )} +
      + ) + } + })} +
    + ) + } +} + +export default ThreadList diff --git a/src/components/article.js b/src/components/article.js index 2dc797e..7f27469 100644 --- a/src/components/article.js +++ b/src/components/article.js @@ -1,5 +1,6 @@ import React from 'react' import Tags from './tags' +import Comments from './Comments' class Article extends React.Component { constructor(props) { @@ -29,15 +30,7 @@ class Article extends React.Component {

    Comments

    -
      - {this.props.comments - ? this.props.comments.map(comment => ( -
    • - {comment.text} -
      • - )) - : 'No comments yet.'} -
    + ) } diff --git a/src/components/index.js b/src/components/index.js index 6602ecc..9e3a0f8 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -9,3 +9,4 @@ export { default as UpdateTask } from './update-task' export { default as Profile } from './profile' export { default as Projects } from './projects' export { default as Project } from './project' +export { default as Comments } from './Comments'