aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'vnext/src/components')
-rw-r--r--vnext/src/components/Chat.js98
-rw-r--r--vnext/src/components/Thread.js12
2 files changed, 54 insertions, 56 deletions
diff --git a/vnext/src/components/Chat.js b/vnext/src/components/Chat.js
index 57415d29..e2b8d2f1 100644
--- a/vnext/src/components/Chat.js
+++ b/vnext/src/components/Chat.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
import ReactRouterPropTypes from 'react-router-prop-types';
import { UserType } from './Types';
import moment from 'moment';
@@ -11,74 +11,68 @@ import { getChat, pm } from '../api';
import './Chat.css';
-export default class Chat extends React.Component {
- constructor(props) {
- super(props);
-
- this.state = {
- chats: []
+export default function Chat(props) {
+ const [chats, setChats] = useState([]);
+ useEffect(() => {
+ console.log(props.connection);
+ if (props.connection) {
+ props.connection.addEventListener('msg', onMessage);
+ }
+ loadChat(props.match.params.user);
+ return () => {
+ if (props.connection) {
+ props.connection.removeEventListener('msg', onMessage);
+ }
};
- }
- componentDidMount() {
- this.loadChat(this.props.match.params.user);
- }
+ }, [props.connection]);
- loadChat = (uname) => {
- const { hash } = this.props.visitor;
- this.setState({
- chats: []
- });
+ let loadChat = (uname) => {
+ const { hash } = props.visitor;
+ setChats([]);
if (hash && uname) {
getChat(uname)
.then(response => {
- this.setState({
- chats: response.data
- });
+ setChats(response.data);
});
}
}
- onMessage = (msg) => {
- if (msg.user.uname === this.props.match.params.user) {
- this.setState({
- chats: [msg, ...this.state.chats]
- });
+ let onMessage = (json) => {
+ const msg = JSON.parse(json.data);
+ if (msg.user.uname === props.match.params.user) {
+ setChats([msg, ...chats]);
}
}
- onSend = (template) => {
+ let onSend = (template) => {
pm(template.to.uname, template.body)
.then(res => {
- this.loadChat(this.props.match.params.user);
+ loadChat(props.match.params.user);
}).catch(console.log);
}
-
- render() {
- const { chats } = this.state;
- const uname = this.props.match.params.user;
- return (
- <div className="msg-cont">
- <UserInfo user={uname} />
- {uname ? (
- <div className="chatroom">
- <ul className="Chat_messages">
- {
- chats.map((chat) =>
- <PM key={moment.utc(chat.timestamp).valueOf()} chat={chat} {...this.props} />
- )
- }
- </ul>
- <MessageInput data={{ mid: 0, timestamp: '0', to: { uname: uname } }} onSend={this.onSend}>
- Reply...
+ const uname = props.match.params.user;
+ return (
+ <div className="msg-cont">
+ <UserInfo user={uname} />
+ {uname ? (
+ <div className="chatroom">
+ <ul className="Chat_messages">
+ {
+ chats.map((chat) =>
+ <PM key={moment.utc(chat.timestamp).valueOf()} chat={chat} {...props} />
+ )
+ }
+ </ul>
+ <MessageInput data={{ mid: 0, timestamp: '0', to: { uname: uname } }} onSend={onSend}>
+ Reply...
</MessageInput>
- </div>
- ) : (
- <div className="chatroom no-selection"><p>No chat selected</p></div>
- )
- }
- </div>
- );
- }
+ </div>
+ ) : (
+ <div className="chatroom no-selection"><p>No chat selected</p></div>
+ )
+ }
+ </div>
+ );
}
Chat.propTypes = {
diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js
index d61fd87f..c1dc915b 100644
--- a/vnext/src/components/Thread.js
+++ b/vnext/src/components/Thread.js
@@ -22,13 +22,17 @@ export default function Thread(props) {
const [loading, setLoading] = useState(false);
const [active, setActive] = useState(0);
useEffect(() => {
- props.connection.addEventListener('msg', onReply);
+ if (props.connection) {
+ props.connection.addEventListener('msg', onReply);
+ }
setActive(0);
loadReplies();
return () => {
- props.connection.removeEventListener('msg', onReply);
+ if (props.connection) {
+ props.connection.removeEventListener('msg', onReply);
+ }
}
- }, []);
+ }, [props.connection]);
let loadReplies = () => {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
@@ -54,7 +58,7 @@ export default function Thread(props) {
});
}
let onReply = (json) => {
- const msg = JSON.parse(json);
+ const msg = JSON.parse(json.data);
if (msg.mid == message.mid) {
setReplies([...this.state.replies, msg]);
}