Thread refactoring

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>
     )
   }