Add buttons to collapse / expand comments

This commit is contained in:
Tanner Collin 2020-10-26 21:57:10 +00:00
parent 992c1c1233
commit b82095ca7a
2 changed files with 48 additions and 5 deletions

View File

@ -18,6 +18,8 @@ class Article extends React.Component {
this.state = {
story: cache[id] || false,
error: false,
collapsed: [],
expanded: [],
};
}
@ -49,22 +51,54 @@ class Article extends React.Component {
);
}
collapseComment(cid) {
this.setState(prevState => ({
...prevState,
collapsed: [...prevState.collapsed, cid],
expanded: prevState.expanded.filter(x => x !== cid),
}));
}
expandComment(cid) {
this.setState(prevState => ({
...prevState,
collapsed: prevState.collapsed.filter(x => x !== cid),
expanded: [...prevState.expanded, cid],
}));
}
countComments(c) {
return c.comments.reduce((sum, x) => sum + this.countComments(x), 1);
}
displayComment(story, c, level) {
const cid = c.author+c.date;
const collapsed = this.state.collapsed.includes(cid);
const expanded = this.state.expanded.includes(cid);
const hidden = collapsed || (level == 4 && !expanded);
const hasChildren = c.comments.length !== 0;
return (
<div className={level ? 'comment lined' : 'comment'} key={c.author+c.date}>
<div className={level ? 'comment lined' : 'comment'} key={cid}>
<div className='info'>
<p>
{c.author === story.author ? '[OP]' : ''} {c.author || '[Deleted]'}
&#8203; | <HashLink to={'#'+c.author+c.date} id={c.author+c.date}>{moment.unix(c.date).fromNow()}</HashLink>
{' '} | <HashLink to={'#'+cid} id={cid}>{moment.unix(c.date).fromNow()}</HashLink>
{hidden || hasChildren &&
<span className='collapser pointer' onClick={() => this.collapseComment(cid)}></span>
}
</p>
</div>
<div className='text' dangerouslySetInnerHTML={{ __html: c.text }} />
{level < 5 ?
c.comments.map(i => this.displayComment(story, i, level + 1))
{hidden && hasChildren ?
<div className='comment lined info pointer' onClick={() => this.expandComment(cid)}>[show {this.countComments(c)-1} more]</div>
:
<div className='info'><p>[replies snipped]</p></div>
c.comments.map(i => this.displayComment(story, i, level + 1))
}
</div>
);

View File

@ -197,3 +197,12 @@ span.source {
.search form {
display: inline;
}
.collapser {
padding-left: 0.5rem;
padding-right: 1.5rem;
}
.pointer {
cursor: pointer;
}