Fix EventSource

3 files changed, 49 insertions, 34 deletions

diff --git a/vnext/src/App.js b/vnext/src/App.js
index 4e40f9f1..e461152b 100644
--- a/vnext/src/App.js
+++ b/vnext/src/App.js
@@ -39,25 +39,32 @@ export default function App() {
     });
   };
 
-  const [es, setEs] = useState();
+  const [es, setEs] = useState({});
+
   useEffect(() => {
     const { hash } = visitor;
     if (hash) {
       me().then(visitor => auth(visitor));
-    }
-    const eventParams = { hash: visitor.hash };
-    let url = new URL(`https://api.juick.com/events?${qs.stringify(eventParams)}`);
-    let es = new EventSource(url);
-    es.onopen = () => {
-      console.log('online');
-      es.addEventListener('read', updateStatus);
-    };
-    es.onerror = () => {
-      es.removeEventListener('read', updateStatus);
+      if ('EventSource' in window) {
+        const eventParams = { hash: hash };
+        let url = new URL(`https://juick.com/api/events?${qs.stringify(eventParams)}`);
+        let es = new EventSource(url);
+        es.onopen = () => {
+          console.log('online');
+        };
+        es.onerror = () => {
+          es.removeEventListener('read', updateStatus);
+        };
+        es.addEventListener('read', updateStatus);
+        setEs(es);
+      }
     };
-    setEs(es);
-  }, [visitor]);
-
+    return (() => {
+      if (es.removeEventListener) {
+        es.removeEventListener('read', updateStatus);
+      }
+    });
+  }, [visitor.hash]);
 
   let search = (history, pathname, searchString) => {
     let location = {};
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
 };