82 lines
3.1 KiB
JavaScript
82 lines
3.1 KiB
JavaScript
import React from 'react'
|
|
import Page from './page';
|
|
import { connect } from 'react-redux';
|
|
import { fetchMessages, sendMessage, streamEvents } from '../actions/chat';
|
|
|
|
export class ChatPage extends React.Component {
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
message: ''
|
|
}
|
|
this.handleSendMessage = this.handleSendMessage.bind(this);
|
|
this.handleKeyDown = this.handleKeyDown.bind(this);
|
|
}
|
|
|
|
render() {
|
|
const channel = "default";
|
|
const { chat } = this.props;
|
|
const messages = channel in chat.messagesByChannel ? chat.messagesByChannel[channel] : [];
|
|
const users = [];
|
|
return (
|
|
<Page>
|
|
<div className="columns">
|
|
<div className="column is-8 is-offset-2">
|
|
<div className="box">
|
|
<div className="tile">
|
|
<div className="tile is-parent is-vertical is-10">
|
|
<div className="tile is-child">
|
|
<b>Chat</b>
|
|
<ul>
|
|
{
|
|
messages.map(msg => {
|
|
return (
|
|
<li key={msg.ID}><span className="is-uppercase">[{msg.Username}]</span> <span>{msg.Text}</span></li>
|
|
)
|
|
})
|
|
}
|
|
</ul>
|
|
<div className="field">
|
|
<div className="control">
|
|
<input className="input" type="text" placeholder="Hello everyone !"
|
|
value={this.state.message}
|
|
onChange={this.handleSendMessage}
|
|
onKeyDown={this.handleKeyDown} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="tile is-parent is-2">
|
|
<b>Utilisateurs</b>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Page>
|
|
);
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.props.dispatch(fetchMessages("default"));
|
|
this.props.dispatch(streamEvents("default"));
|
|
}
|
|
|
|
handleSendMessage(evt) {
|
|
this.setState({ message: evt.target.value });
|
|
}
|
|
|
|
handleKeyDown(evt) {
|
|
if (evt.keyCode !== 13) return;
|
|
this.props.dispatch(sendMessage("default", this.state.message));
|
|
this.setState({message: ""});
|
|
}
|
|
|
|
}
|
|
|
|
export default connect(state => {
|
|
return {
|
|
chat: state.chat
|
|
}
|
|
})(ChatPage) |