aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/components
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2018-06-29 12:57:34 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:53 +0300
commitfd7dd62c2f08ec993ac2c30f537a53d8e37cff24 (patch)
treea50833158e92d1de6932c08bab236bfe61319fe9 /vnext/src/components
parent782c7cf77b5ba3da5360cc11c85d1399efbee438 (diff)
Thread refactoring
Diffstat (limited to 'vnext/src/components')
-rw-r--r--vnext/src/components/Thread.js114
1 files changed, 58 insertions, 56 deletions
diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js
index 2d161621..63359ce0 100644
--- a/vnext/src/components/Thread.js
+++ b/vnext/src/components/Thread.js
@@ -24,7 +24,9 @@ export default class Thread extends React.Component {
};
}
componentDidMount() {
- this.loadReplies();
+ if (this.state.msg.replies > 0) {
+ this.loadReplies();
+ }
}
loadReplies() {
this.setState({ replies: [], loading: true })
@@ -64,6 +66,7 @@ export default class Thread extends React.Component {
render() {
const msg = this.state.msg;
+ const loaders = Math.min(msg.replies || 0, 10);
return (
<React.Fragment>
<ul id="0">
@@ -80,67 +83,66 @@ export default class Thread extends React.Component {
}
</li>
</ul>
- {!this.state.loading ? (
- <ul id="replies">
- {
- this.state.replies.map((msg) => (
- <li id={msg.rid} key={msg.rid} className="msg">
- <div className="msg-cont">
- <div className="msg-header">
- {!msg.user.banned ? (
+ <ul id="replies">
+ {
+ !this.state.loading ? this.state.replies.map((msg) => (
+ <li id={msg.rid} key={msg.rid} className="msg">
+ <div className="msg-cont">
+ <div className="msg-header">
+ {!msg.user.banned ? (
+ <React.Fragment>
+ <span itemProp="author" itemScope="" itemType="http://schema.org/Person">
+ <Link to={`/${msg.user.uname}/`} itemProp="url" rel="author"><span itemProp="name">{msg.user.uname}</span></Link>
+ </span><Avatar user={msg.user} />
+ </React.Fragment>) : (
<React.Fragment>
- <span itemProp="author" itemScope="" itemType="http://schema.org/Person">
- <Link to={`/${msg.user.uname}/`} itemProp="url" rel="author"><span itemProp="name">{msg.user.uname}</span></Link>
- </span><Avatar user={msg.user} />
- </React.Fragment>) : (
- <React.Fragment>
- <span>[удалено]:</span><Avatar user={{ uid: 0 }} />
- </React.Fragment>
- )
- }
- <div className="msg-ts">
- <a href={`/${msg.user.uname}/${msg.mid}`}>
- <time itemProp="datePublished dateModified" itemType="http://schema.org/Date" dateTime={msg.timestamp}
- title={moment.utc(msg.timestamp).local().format('lll')}>
- {moment.utc(msg.timestamp).fromNow()}
- </time>
- </a>
- {msg.replyto > 0 &&
- (
- <a href={`#${msg.replyto}`}> in reply to {msg.to.uname}&nbsp;</a>
- )}
- </div>
+ <span>[удалено]:</span><Avatar user={{ uid: 0 }} />
+ </React.Fragment>
+ )
+ }
+ <div className="msg-ts">
+ <a href={`/${msg.user.uname}/${msg.mid}`}>
+ <time itemProp="datePublished dateModified" itemType="http://schema.org/Date" dateTime={msg.timestamp}
+ title={moment.utc(msg.timestamp).local().format('lll')}>
+ {moment.utc(msg.timestamp).fromNow()}
+ </time>
+ </a>
+ {msg.replyto > 0 &&
+ (
+ <a href={`#${msg.replyto}`}> in reply to {msg.to.uname}&nbsp;</a>
+ )}
</div>
- <div className="msg-txt"><p dangerouslySetInnerHTML={{ __html: format(msg.body, msg.mid, (msg.tags || []).indexOf('code') >= 0) }}></p></div>
+ </div>
+ <div className="msg-txt"><p dangerouslySetInnerHTML={{ __html: format(msg.body, msg.mid, (msg.tags || []).indexOf('code') >= 0) }}></p></div>
+ {
+ msg.photo &&
+ <p className="ir"><a href={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} data-fname={`${msg.mid}-${msg.rid}.${msg.attach}`}>
+ <img itemProp="image" src={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} alt="" /></a>
+ </p>
+ }
+ <div className="msg-links">
{
- msg.photo &&
- <p className="ir"><a href={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} data-fname={`${msg.mid}-${msg.rid}.${msg.attach}`}>
- <img itemProp="image" src={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} alt="" /></a>
- </p>
- }
- <div className="msg-links">
- {
- this.props.visitor.uid > 0 ? (
+ this.props.visitor.uid > 0 ? (
+ <React.Fragment>
+ {this.state.active === msg.rid || <span style={linkStyle} onClick={() => this.setActive(msg)}>Reply</span>}
+ {this.state.active === msg.rid && <MessageInput data={msg} onSend={this.postComment}>Write a comment...</MessageInput>}
+ </React.Fragment>
+ ) : (
<React.Fragment>
- {this.state.active === msg.rid || <span style={linkStyle} onClick={() => this.setActive(msg)}>Reply</span>}
- {this.state.active === msg.rid && <MessageInput data={msg} onSend={this.postComment}>Write a comment...</MessageInput>}
+ <span>&nbsp;&middot;&nbsp;</span>{this.state.active === msg.rid || <Button className="a-login">Reply</Button>}
</React.Fragment>
- ) : (
- <React.Fragment>
- <span>&nbsp;&middot;&nbsp;</span>{this.state.active === msg.rid || <Button className="a-login">Reply</Button>}
- </React.Fragment>
- )
- }
- </div>
+ )
+ }
</div>
- </li>
- ))
- }
- </ul>) : (
- <React.Fragment>
- <Spinner /><Spinner /><Spinner />
- </React.Fragment>
- )}
+ </div>
+ </li>
+ )) : (
+ <React.Fragment>
+ {Array(loaders).fill().map((it, i) => <Spinner key={i} />)}
+ </React.Fragment>
+ )
+ }
+ </ul>
</React.Fragment>
)
}