2 files changed, 28 insertions, 20 deletions

diff --git a/vnext/src/components/Chat.js b/vnext/src/components/Chat.js
index 9ac2f2e5..0742b7fb 100644
--- a/vnext/src/components/Chat.js
+++ b/vnext/src/components/Chat.js
@@ -14,18 +14,18 @@ import './Chat.css';
 
 export default function Chat(props) {
     const [chats, setChats] = useState([]);
-    useEffect(() => {
-        console.log(props.connection);
-        if (props.connection) {
+    useEffect(() => {        
+        if (props.connection.addEventListener) {
             props.connection.addEventListener('msg', onMessage);
         }
         loadChat(props.match.params.user);
+        console.log(props.connection);
         return () => {
-            if (props.connection) {
+            if (props.connection.removeEventListener) {
                 props.connection.removeEventListener('msg', onMessage);
             }
         };
-    }, [props.connection]);
+    }, [props.connection.readyState]);
 
     let loadChat = (uname) => {
         const { hash } = props.visitor;
@@ -41,7 +41,9 @@ export default function Chat(props) {
     let onMessage = (json) => {
         const msg = JSON.parse(json.data);
         if (msg.user.uname === props.match.params.user) {
-            setChats([msg, ...chats]);
+            setChats((oldChat) => {
+                return [msg, ...oldChat];
+            });
         }
     };
 
@@ -79,5 +81,5 @@ export default function Chat(props) {
 Chat.propTypes = {
     visitor: UserType.isRequired,
     match: ReactRouterPropTypes.match.isRequired,
-    connection: PropTypes.shape.isRequired
+    connection: PropTypes.object.isRequired
 };
diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js
index 87babc1a..912f808f 100644
--- a/vnext/src/components/Thread.js
+++ b/vnext/src/components/Thread.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
 
 import ReactRouterPropTypes from 'react-router-prop-types';
@@ -85,18 +85,22 @@ export default function Thread(props) {
   const [loading, setLoading] = useState(false);
   const [active, setActive] = useState(0);
   useEffect(() => {
-    if (props.connection) {
-      props.connection.addEventListener('msg', onReply);
-    }
     setActive(0);
     loadReplies();
+  }, []);
+  useEffect(() => {    
+    if (props.connection.addEventListener && message.mid) {
+      props.connection.addEventListener('msg', onReply);
+    };
+    
     return () => {
-      if (props.connection) {
+      if (props.connection.removeEventListener && message.mid) {
         props.connection.removeEventListener('msg', onReply);
       }
-    };
-  }, [props.connection]);
-  let loadReplies = () => {
+    }
+  }, [props.connection, message.mid]);
+
+  let loadReplies = useCallback(() => {
     document.body.scrollTop = 0;
     document.documentElement.scrollTop = 0;
 
@@ -119,13 +123,15 @@ export default function Thread(props) {
       ).catch(ex => {
         console.log(ex);
       });
-  };
-  let onReply = (json) => {
+  }, []);
+  let onReply = useCallback((json) => {
     const msg = JSON.parse(json.data);
     if (msg.mid == message.mid) {
-      setReplies([...this.state.replies, msg]);
+      setReplies(oldReplies => {
+        return [...oldReplies, msg];
+      });
     }
-  };
+  }, [message]);
   let postComment = (template) => {
     const { mid, rid, body, attach } = template;
     comment(mid, rid, body, attach).then(res => {
@@ -172,5 +178,5 @@ Thread.propTypes = {
   history: ReactRouterPropTypes.history,
   match: ReactRouterPropTypes.match,
   visitor: UserType.isRequired,
-  connection: PropTypes.shape.isRequired
+  connection: PropTypes.object.isRequired
 };