95 lines
3.1 KiB
JavaScript
95 lines
3.1 KiB
JavaScript
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
|