Pass EventSource connection to child components

2 files changed, 9 insertions, 9 deletions

diff --git a/vnext/src/App.js b/vnext/src/App.js
index 54326220..7978abe5 100644
--- a/vnext/src/App.js
+++ b/vnext/src/App.js
@@ -69,9 +69,6 @@ export default class App extends React.Component {
         if (!jsonMsg.mid) {
           this.pm.current.onMessage(jsonMsg);
         }
-        if (jsonMsg.rid && this.thread.current) {
-          this.thread.current.onReply(jsonMsg);
-        }
       } catch (err) {
         console.log(err);
       }
@@ -151,12 +148,12 @@ export default class App extends React.Component {
               } />
               <Route exact path="/post" render={(props) => <Post visitor={user} {...props} />} />
               <Route exact path="/pm" render={(props) => <Contacts visitor={user} {...props} />} />
-              <Route exact path="/pm/:user" render={(props) => <Chat ref={this.pm} visitor={user} {...props} />} />
+              <Route exact path="/pm/:user" render={(props) => <Chat connection={this.es} visitor={user} {...props} />} />
               <Route exact path="/:user/friends" render={(props) => <Friends user={props.match.params.user} {...props} />} />
               <Route exact path="/:user/readers" render={(props) => <Readers user={props.match.params.user} {...props} />} />
               <Route exact path="/:user" render={(props) => <Blog key={props.match.params.user} visitor={user} {...props} />} />
               <Route exact path="/tag/:tag" render={(props) => <Tag visitor={user} {...props} />} />
-              <Route exact path="/:user/:mid" render={(props) => <Thread ref={this.thread} visitor={user} {...props} />} />
+              <Route exact path="/:user/:mid" render={(props) => <Thread connection={this.es} visitor={user} {...props} />} />
             </Switch>
           </section>
           {
diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js
index 4946cf5f..d61fd87f 100644
--- a/vnext/src/components/Thread.js
+++ b/vnext/src/components/Thread.js
@@ -22,8 +22,12 @@ export default function Thread(props) {
   const [loading, setLoading] = useState(false);
   const [active, setActive] = useState(0);
   useEffect(() => {
+    props.connection.addEventListener('msg', onReply);
     setActive(0);
     loadReplies();
+    return () => {
+      props.connection.removeEventListener('msg', onReply);
+    }
   }, []);
   let loadReplies = () => {
     document.body.scrollTop = 0;
@@ -49,11 +53,10 @@ export default function Thread(props) {
         console.log(ex);
       });
   }
-  let onReply = (msg) => {
+  let onReply = (json) => {
+    const msg = JSON.parse(json);
     if (msg.mid == message.mid) {
-      this.setState({
-        replies: [...this.state.replies, msg]
-      });
+      setReplies([...this.state.replies, msg]);
     }
   }
   let postComment = (template) => {