import React from 'react'; import ReactRouterPropTypes from 'react-router-prop-types'; import { UserType } from './Types'; import moment from 'moment'; import PM from './PM'; import MessageInput from './MessageInput'; import { getChat, pm } from '../api'; export default class Chat extends React.Component { constructor(props) { super(props); this.state = { chats: [] }; } componentDidMount() { this.loadChat(this.props.match.params.user); } loadChat = (uname) => { const { hash } = this.props.visitor; this.setState({ chats: [] }); if (hash && uname) { getChat(uname) .then(response => { this.setState({ chats: response.data }); }); } } onMessage = (msg) => { if (msg.user.uname === this.props.match.params.user) { this.setState({ chats: [msg, ...this.state.chats] }); } } onSend = (template) => { pm(template.to.uname, template.body) .then(res => { this.loadChat(this.props.match.params.user); }).catch(console.log); } render() { const { chats } = this.state; const uname = this.props.match.params.user; return (
{uname ? (
    { chats.map((chat) => ) }
Reply...
) : (

No chat selected

) }
); } } Chat.propTypes = { visitor: UserType.isRequired, match: ReactRouterPropTypes.match.isRequired }; const chatStyle = { boxSizing: 'border-box', padding: '0 20px', overflowY: 'scroll', height: '450px', display: 'flex', flexDirection: 'column-reverse', width: '100%' };