Thread using hooks

1 files changed, 84 insertions, 98 deletions

diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js
index 6d8a5fd3..4946cf5f 100644
--- a/vnext/src/components/Thread.js
+++ b/vnext/src/components/Thread.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import ReactRouterPropTypes from 'react-router-prop-types';
 import { UserType } from './Types';
@@ -16,133 +16,119 @@ import { format } from '../utils/embed';
 
 import { getMessages, comment, markReadTracker } from '../api';
 
-export default class Thread extends React.Component {
-  constructor(props) {
-    super(props);
-    const { msg } = (this.props.location.state || {});
-    this.state = {
-      msg: msg || {},
-      replies: [],
-      loading: false,
-      active: 0
-    };
-  }
-  componentDidMount() {
-    this.loadReplies();
-  }
-  loadReplies() {
+export default function Thread(props) {
+  const [message, setMessage] = useState(props.location.state || {});
+  const [replies, setReplies] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [active, setActive] = useState(0);
+  useEffect(() => {
+    setActive(0);
+    loadReplies();
+  }, []);
+  let loadReplies = () => {
     document.body.scrollTop = 0;
     document.documentElement.scrollTop = 0;
-    this.setState({ replies: [], loading: true });
-    const { mid } = this.props.match.params;
+
+    setReplies([]);
+    setLoading(true);
+    const { mid } = props.match.params;
     let params = {
       mid: mid
     };
-    if (this.props.visitor && this.props.visitor.hash) {
-      params.hash = this.props.visitor.hash;
+    if (props.visitor && props.visitor.hash) {
+      params.hash = props.visitor.hash;
     }
     getMessages('/api/thread', params)
       .then(response => {
-        let msg = response.data.shift();
-        this.setState({
-          msg: { ...msg },
-          replies: response.data,
-          loading: false,
-          active: 0
-        });
+        setMessage(response.data.shift());
+        setReplies(response.data);
+        setLoading(false);
+        setActive(0);
       }
       ).catch(ex => {
         console.log(ex);
       });
   }
-  setActive(msg, event) {
-    this.setState({
-      active: msg.rid || 0
-    });
-  }
-  onReply = (msg) => {
-    if (msg.mid == this.state.msg.mid) {
+  let onReply = (msg) => {
+    if (msg.mid == message.mid) {
       this.setState({
         replies: [...this.state.replies, msg]
       });
     }
   }
-  postComment = (template) => {
+  let postComment = (template) => {
     const { mid, rid, body, attach } = template;
     comment(mid, rid, body, attach).then(res => {
-      this.loadReplies();
+      loadReplies();
     })
       .catch(console.log);
   }
 
-  render() {
-    const msg = this.state.msg;
-    const loaders = Math.min(msg.replies || 0, 10);
-    return (
-      <>
+  const loaders = Math.min(message.replies || 0, 10);
+  return (
+    <>
+      {
+        message.mid ? (
+          <Message data={message} visitor={props.visitor}>
+            {active === (message.rid || 0) && <MessageInput data={message} onSend={postComment}>Write a comment...</MessageInput>}
+          </Message>
+        ) : (
+            <Spinner />
+          )
+      }
+      <ul id="replies">
         {
-          msg.mid ? (
-            <Message data={msg} visitor={this.props.visitor}>
-              {this.state.active === (msg.rid || 0) && <MessageInput data={msg} onSend={this.postComment}>Write a comment...</MessageInput>}
-            </Message>
-          ) : (
-              <Spinner />
-            )
-        }
-        <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">
-                    <Avatar user={msg.user}>
-                      <div className="msg-ts">
-                        {msg.replyto > 0 &&
-                          (
-                            <a href={`#${msg.replyto}`} className="info-avatar"><img src={msg.to.avatar}/> {msg.to.uname}&nbsp;</a>
-                          )}
-                      </div>
-                    </Avatar>
-                  </div>
-                  {
-                     msg.html ? <div className="msg-txt" dangerouslySetInnerHTML={{__html: msg.body }}/>
-                  :
-                  <div className="msg-txt">
-                    <p dangerouslySetInnerHTML={{ __html: format(msg.body, msg.mid, (msg.tags || []).indexOf('code') >= 0) }} />
+          !loading ? replies.map((msg) => (
+            <li id={msg.rid} key={msg.rid} className="msg">
+              <div className="msg-cont">
+                <div className="msg-header">
+                  <Avatar user={msg.user}>
+                    <div className="msg-ts">
+                      {msg.replyto > 0 &&
+                        (
+                          <a href={`#${msg.replyto}`} className="info-avatar"><img src={msg.to.avatar} /> {msg.to.uname}&nbsp;</a>
+                        )}
                     </div>
-                  }
+                  </Avatar>
+                </div>
+                {
+                  msg.html ? <div className="msg-txt" dangerouslySetInnerHTML={{ __html: msg.body }} />
+                    :
+                    <div className="msg-txt">
+                      <p dangerouslySetInnerHTML={{ __html: format(msg.body, msg.mid, (msg.tags || []).indexOf('code') >= 0) }} />
+                    </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 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 src={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} alt="" /></a>
-                    </p>
-                  }
-                  <div className="msg-links">
-                    {
-                      this.props.visitor.uid > 0 ? (
+                    props.visitor.uid > 0 ? (
+                      <>
+                        {active === msg.rid || <span style={linkStyle} onClick={() => setActive(msg.rid)}>Reply</span>}
+                        {active === msg.rid && <MessageInput data={msg} onSend={postComment}>Write a comment...</MessageInput>}
+                      </>
+                    ) : (
                         <>
-                          {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>{active === msg.rid || <Button>Reply</Button>}
                         </>
-                      ) : (
-                          <>
-                            <span>&nbsp;&middot;&nbsp;</span>{this.state.active === msg.rid || <Button>Reply</Button>}
-                          </>
-                        )
-                    }
-                  </div>
+                      )
+                  }
                 </div>
-              </li>
-            )) : (
-                <>
-                  {Array(loaders).fill().map((it, i) => <Spinner key={i} />)}
-                </>
-              )
-          }
-        </ul>
-      </>
-    );
-  }
+              </div>
+            </li>
+          )) : (
+              <>
+                {Array(loaders).fill().map((it, i) => <Spinner key={i} />)}
+              </>
+            )
+        }
+      </ul>
+    </>
+  );
 }
 
 const linkStyle = {