diff options
author | 2019-04-17 16:30:29 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:54 +0300 | |
commit | 2f9a1f07798f2ed24993034012330ff7893c9716 (patch) | |
tree | 5987c11c5731ea218b935559252e76d15fa31d1c /vnext/src/components | |
parent | 24b390cc7b2fb675daaad9ba904cf87b201b0542 (diff) |
Fix EventSource
Diffstat (limited to 'vnext/src/components')
-rw-r--r-- | vnext/src/components/Chat.js | 16 | ||||
-rw-r--r-- | vnext/src/components/Thread.js | 32 |
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 }; |