diff options
author | 2019-04-08 15:42:24 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:54 +0300 | |
commit | fccc23c05712b0b54e77daefd4b74855e52f08b6 (patch) | |
tree | e42ce2dc6595efb036b809f4a730160bbf3ec8d5 /vnext/src/components | |
parent | bbfb81c2bc8d6afba550299e7138eeb2c58956d3 (diff) |
App, Chat, Thread using hooks
Diffstat (limited to 'vnext/src/components')
-rw-r--r-- | vnext/src/components/Chat.js | 98 | ||||
-rw-r--r-- | vnext/src/components/Thread.js | 12 |
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]); } |