notnull/mwe-comments
1
0
Fork 1
Code Issues Pull Requests 1 Releases Wiki Activity

better property names for collapsed threads

Browse Source
This commit is contained in:
data 2019-07-14 14:46:22 +02:00
parent 2ae7ad948f
commit e212b52f9b
3 changed files with 9 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/Components/Comments/SingleComment/ExpandedComment.js
View File

@ -24,9 +24,11 @@ const ExpandedComment = props => {
fontVariant: 'small-caps', fontVariant: 'small-caps',
display: props.displayCollapse || 'none', display: props.displayCollapse || 'none',
}} }}
onClick={() => props.toggleCollapse(props.id, !props.collapsed)} onClick={() =>
props.toggleCollapse(props.id, !props.collapsedThread)
}
> >
{props.collapsed ? 'expand' : 'collapse'} {props.collapsedThread ? 'expand' : 'collapse'}
</a> </a>
) : ( ) : (
'' ''

2
src/Components/Comments/SingleComment/index.js
View File

@ -3,7 +3,7 @@ import ExpandedComment from './ExpandedComment'
import CollapsedComment from './CollapsedComment' import CollapsedComment from './CollapsedComment'
const SingleComment = props => { const SingleComment = props => {
if (props.hidden) return <CollapsedComment {...props} /> if (props.collapsed) return <CollapsedComment {...props} />
return <ExpandedComment {...props} /> return <ExpandedComment {...props} />
} }

9
src/Components/Comments/index.js
View File

@ -23,13 +23,12 @@ class ThreadList extends React.Component {
toggleCollapse(id, collapsed) { toggleCollapse(id, collapsed) {
const otherComments = this.props.comments.filter(c => c.id !== id) const otherComments = this.props.comments.filter(c => c.id !== id)
var parent = this.props.comments.find(c => c.id === id) var parent = this.props.comments.find(c => c.id === id)
//console.log('toggling', parent) parent['collapsedThread'] = collapsed
parent['collapsed'] = collapsed
if (!collapsed) { if (!collapsed) {
// when parent was a reply in a previously collapsed thread // when parent was a reply in a previously collapsed thread
// and is to be expanded it will be marked hidden // and is to be expanded it will be marked hidden
// and needs to be unhidden // and needs to be unhidden
parent['hidden'] = false parent['collapsed'] = false
} }
this.setState({ comments: otherComments.concat(parent) }) this.setState({ comments: otherComments.concat(parent) })
parent.replies.map(comment => this.toggleReplies(comment.id, collapsed)) parent.replies.map(comment => this.toggleReplies(comment.id, collapsed))
@ -37,12 +36,10 @@ class ThreadList extends React.Component {
toggleReplies(id, collapsed) { toggleReplies(id, collapsed) {
const otherComments = this.props.comments.filter(c => c.id !== id) const otherComments = this.props.comments.filter(c => c.id !== id)
var comment = this.props.comments.find(c => c.id === id) var comment = this.props.comments.find(c => c.id === id)
comment['hidden'] = collapsed comment['collapsed'] = collapsed
this.setState({ comments: otherComments.concat(comment) }) this.setState({ comments: otherComments.concat(comment) })
if (comment.replies) {
comment.replies.map(c => this.toggleReplies(c.id, collapsed)) comment.replies.map(c => this.toggleReplies(c.id, collapsed))
} }
}
handleChange(e) { handleChange(e) {
this.setState({ [e.target.name]: e.target.value }) this.setState({ [e.target.name]: e.target.value })