diff options
Diffstat (limited to 'vnext/src/components/Thread.js')
| -rw-r--r-- | vnext/src/components/Thread.js | 114 |
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} </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} </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> · </span>{this.state.active === msg.rid || <Button className="a-login">Reply</Button>} </React.Fragment> - ) : ( - <React.Fragment> - <span> · </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> ) } |