From 2f9a1f07798f2ed24993034012330ff7893c9716 Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Wed, 17 Apr 2019 16:30:29 +0300 Subject: Fix EventSource --- vnext/src/components/Thread.js | 32 +++++++++++++++++++------------- 1 file changed, 19 insertions(+), 13 deletions(-) (limited to 'vnext/src/components/Thread.js') 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 }; -- cgit v1.2.3