1 files changed, 34 insertions, 30 deletions

diff --git a/vnext/src/ui/Thread.js b/vnext/src/ui/Thread.js
index ae5e4f3c..cae60139 100644
--- a/vnext/src/ui/Thread.js
+++ b/vnext/src/ui/Thread.js
@@ -17,6 +17,17 @@ import './Thread.css';
 
 let isMounted;
 
+/**
+ * @param {{
+    msg: import('../api').Message,
+    draft: string,
+    visitor: import('../api').User,
+    active: number,
+    setActive: function,
+    onStartEditing: function,
+    postComment: function
+  }} props
+ */
 function Comment({ msg, draft, visitor, active, setActive, onStartEditing, postComment }) {
   const embedRef = useRef();
   const msgRef = useRef();
@@ -58,7 +69,7 @@ function Comment({ msg, draft, visitor, active, setActive, onStartEditing, postC
         msg.body &&
         <div style={bubbleStyle(visitor, msg)}>
           <div ref={msgRef}>
-            <p dangerouslySetInnerHTML={{ __html: format(msg.body, msg.mid, (msg.tags || []).indexOf('code') >= 0) }} />
+            <p dangerouslySetInnerHTML={{ __html: format(msg.body, msg.mid.toString(), (msg.tags || []).indexOf('code') >= 0) }} />
           </div>
         </div>
       }
@@ -97,40 +108,38 @@ function Comment({ msg, draft, visitor, active, setActive, onStartEditing, postC
     </div>
   );
 }
-/*
-Comment.propTypes = {
-  msg: MessageType.isRequired,
-  draft: PropTypes.string.isRequired,
-  visitor: UserType.isRequired,
-  active: PropTypes.number.isRequired,
-  setActive: PropTypes.func.isRequired,
-  onStartEditing: PropTypes.func.isRequired,
-  postComment: PropTypes.func.isRequired
-};*/
 
+/**
+ * @param {{
+     match: import('react-router').match,
+     location: import('history').Location,
+     visitor: import('../api').SecureUser
+     connection: EventSource
+  }} props
+ */
 export default function Thread(props) {
   const [message, setMessage] = useState((props.location.state || {}).msg || {});
   const [replies, setReplies] = useState([]);
   const [loading, setLoading] = useState(false);
   const [active, setActive] = useState(0);
   const [editing, setEditing] = useState({});
+  const [hash, setHash] = useState(props.visitor.hash);
+  const { mid } = props.match.params;
 
-  let loadReplies = () => {
+  let loadReplies = useCallback(() => {
     document.body.scrollTop = 0;
     document.documentElement.scrollTop = 0;
-
     setReplies([]);
     setLoading(true);
-    const { mid } = props.match.params;
     let params = {
       mid: mid
     };
-    if (props.visitor && props.visitor.hash) {
-      params.hash = props.visitor.hash;
-    }
+    params.hash = hash;
     getMessages('/api/thread', params)
       .then(response => {
-        setMessage(response.data.shift());
+        if (!message.mid) {
+          setMessage(response.data.shift());
+        }
         setReplies(response.data);
         setLoading(false);
         setActive(0);
@@ -138,7 +147,7 @@ export default function Thread(props) {
       ).catch(ex => {
         console.log(ex);
       });
-  };
+  }, [hash, message.mid, mid]);
   let onReply = useCallback((json) => {
     const msg = JSON.parse(json.data);
     if (msg.mid == message.mid) {
@@ -148,7 +157,7 @@ export default function Thread(props) {
     }
   }, [message]);
 
-  let postComment = (template) => {
+  let postComment = useCallback((template) => {
     const { mid, rid, body, attach } = template;
     let commentAction = editing.rid ? update(mid, editing.rid, body) : comment(mid, rid, body, attach);
     commentAction.then(res => {
@@ -156,7 +165,7 @@ export default function Thread(props) {
       loadReplies();
     })
       .catch(console.log);
-  };
+  }, [editing.rid, loadReplies]);
 
   let startEditing = (reply) => {
     setActive(reply.replyto);
@@ -166,7 +175,7 @@ export default function Thread(props) {
   useEffect(() => {
     setActive(0);
     loadReplies();
-  }, []);
+  }, [loadReplies]);
   useEffect(() => {
     if (props.connection.addEventListener && message.mid) {
       props.connection.addEventListener('msg', onReply);
@@ -209,14 +218,9 @@ export default function Thread(props) {
   );
 }
 
+/**
+ * @type React.CSSProperties
+ */
 const linkStyle = {
   cursor: 'pointer'
 };
-/*
-Thread.propTypes = {
-  location: ReactRouterPropTypes.location,
-  history: ReactRouterPropTypes.history,
-  match: ReactRouterPropTypes.match,
-  visitor: UserType.isRequired,
-  connection: PropTypes.object.isRequired,
-};*/