Compare commits

..

2 Commits

Author SHA1 Message Date
b82095ca7a Add buttons to collapse / expand comments 2020-10-26 21:57:10 +00:00
992c1c1233 Monkeypatch earlier 2020-10-24 22:30:00 +00:00
3 changed files with 53 additions and 11 deletions

View File

@ -3,6 +3,11 @@ logging.basicConfig(
format='%(asctime)s - %(name)s - %(levelname)s - %(message)s', format='%(asctime)s - %(name)s - %(levelname)s - %(message)s',
level=logging.INFO) level=logging.INFO)
import gevent
from gevent import monkey
monkey.patch_all()
from gevent.pywsgi import WSGIServer
import copy import copy
import json import json
import threading import threading
@ -19,12 +24,6 @@ from flask import abort, Flask, request, render_template, stream_with_context, R
from werkzeug.exceptions import NotFound from werkzeug.exceptions import NotFound
from flask_cors import CORS from flask_cors import CORS
import gevent
from gevent import monkey
from gevent.pywsgi import WSGIServer
monkey.patch_all()
database.init() database.init()
search.init() search.init()

View File

@ -18,6 +18,8 @@ class Article extends React.Component {
this.state = { this.state = {
story: cache[id] || false, story: cache[id] || false,
error: 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) { 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 ( return (
<div className={level ? 'comment lined' : 'comment'} key={c.author+c.date}> <div className={level ? 'comment lined' : 'comment'} key={cid}>
<div className='info'> <div className='info'>
<p> <p>
{c.author === story.author ? '[OP]' : ''} {c.author || '[Deleted]'} {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> </p>
</div> </div>
<div className='text' dangerouslySetInnerHTML={{ __html: c.text }} /> <div className='text' dangerouslySetInnerHTML={{ __html: c.text }} />
{level < 5 ? {hidden && hasChildren ?
c.comments.map(i => this.displayComment(story, i, level + 1)) <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> </div>
); );

View File

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