From b82095ca7af02e0f8cb1f1673d06e7716b3ee09d Mon Sep 17 00:00:00 2001 From: Tanner Collin Date: Mon, 26 Oct 2020 21:57:10 +0000 Subject: [PATCH] Add buttons to collapse / expand comments --- webclient/src/Comments.js | 44 +++++++++++++++++++++++++++++++---- webclient/src/Style-light.css | 9 +++++++ 2 files changed, 48 insertions(+), 5 deletions(-) diff --git a/webclient/src/Comments.js b/webclient/src/Comments.js index 152585a..7d8f6ef 100644 --- a/webclient/src/Comments.js +++ b/webclient/src/Comments.js @@ -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 ( -
+

{c.author === story.author ? '[OP]' : ''} {c.author || '[Deleted]'} - ​ | {moment.unix(c.date).fromNow()} + {' '} | {moment.unix(c.date).fromNow()} + + {hidden || hasChildren && + this.collapseComment(cid)}>– + }

- {level < 5 ? - c.comments.map(i => this.displayComment(story, i, level + 1)) + {hidden && hasChildren ? +
this.expandComment(cid)}>[show {this.countComments(c)-1} more]
: -

[replies snipped]

+ c.comments.map(i => this.displayComment(story, i, level + 1)) }
); diff --git a/webclient/src/Style-light.css b/webclient/src/Style-light.css index 18e999e..e436126 100644 --- a/webclient/src/Style-light.css +++ b/webclient/src/Style-light.css @@ -197,3 +197,12 @@ span.source { .search form { display: inline; } + +.collapser { + padding-left: 0.5rem; + padding-right: 1.5rem; +} + +.pointer { + cursor: pointer; +}