aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'vnext/src/components')
-rw-r--r--vnext/src/components/Chat.js16
-rw-r--r--vnext/src/components/Thread.js32
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
};