70 lines
1.7 KiB
JavaScript
70 lines
1.7 KiB
JavaScript
import React from 'react'
|
|
import { Form, Row, Col, Button } from 'react-bootstrap'
|
|
|
|
import uuid from 'uuid'
|
|
|
|
import socket from '../socket'
|
|
|
|
class Chat extends React.Component {
|
|
constructor() {
|
|
super()
|
|
this.state = { text: '', messages: [] }
|
|
this.handleSubmit = this.handleSubmit.bind(this)
|
|
this.handleChange = this.handleChange.bind(this)
|
|
}
|
|
|
|
componentDidMount() {
|
|
socket.on('message', message => {
|
|
this.addMessage(message)
|
|
})
|
|
}
|
|
|
|
handleChange(e) {
|
|
this.setState({ [e.target.name]: e.target.value })
|
|
}
|
|
addMessage(message) {
|
|
const messages = this.state.messages.concat(message)
|
|
this.setState({ messages })
|
|
}
|
|
handleSubmit(e) {
|
|
e.preventDefault()
|
|
const message = { userId: socket.id, id: uuid(), text: this.state.text }
|
|
const messages = this.state.messages.concat(message)
|
|
this.setState({ messages, text: '' })
|
|
socket.emit('message', message)
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div className="mt-5">
|
|
<div style={{ height: '30rem' }}>
|
|
{this.state.messages.map(msg => (
|
|
<div>
|
|
{msg.userId}: {msg.text}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<Form onSubmit={this.handleSubmit}>
|
|
<Form.Group as={Row}>
|
|
<Col xs={9} sm={10}>
|
|
<Form.Control
|
|
name="text"
|
|
autocomplete="off"
|
|
value={this.state.text}
|
|
onChange={this.handleChange}
|
|
/>
|
|
</Col>
|
|
<Col xs={1} sm={2}>
|
|
<Button type="submit" variant="dark" onSubmit={this.handleSubmit}>
|
|
Send
|
|
</Button>
|
|
</Col>
|
|
</Form.Group>
|
|
</Form>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default Chat
|