chatz/src/components/Chat.js

import React from 'react'
import { Card } from 'react-bootstrap'

import Messages from './Messages'
import MessageEntry from './MessageEntry'
import ControlPanel from './ControlPanel'

import userImage from '../assets/default-user-image.png'

import uuid from 'uuid'
import socket from '../socket'

class Chat extends React.Component {
  constructor() {
    super()
    this.state = {
      text: '',
      messages: [],
      user: {},
    }
    this.handleSubmit = this.handleSubmit.bind(this)
    this.handleChange = this.handleChange.bind(this)
    this.handleKey = this.handleKey.bind(this)
    this.toggleNick = this.toggleNick.bind(this)
  }

  componentDidMount() {
    socket.on('typing', () => this.toggleTyping())
    socket.on('message', message => {
      this.addMessage(message)
    })
    socket.on('user connection', payload =>
      console.log('a user has logged in:', payload)
    )

    socket.on('connect', () => {
      console.log('Connected!')
      this.setState({
        user: { socketId: socket.id, userImage },
        userNick: socket.id,
      })
    })
  }

  handleKey(e) {
    socket.emit('typing')
  }

  handleChange(e) {
    this.setState({ [e.target.name]: e.target.value })
  }

  handleSubmit(e) {
    e.preventDefault()
    const message = { socketId: socket.id, id: uuid(), text: this.state.text }
    const messages = this.state.messages.concat(message)
    this.setState({ messages, text: '' })
    socket.emit('message', message)
  }

  toggleTyping() {
    if (this.state.typing) return
    this.setState({ typing: true })
    setTimeout(() => this.setState({ typing: false }), 2000)
  }

  addMessage(message) {
    const messages = this.state.messages.concat(message)
    this.setState({ messages })
  }

  toggleNick() {
    this.setState({ editNick: !this.state.editNick })
  }

  render() {
    return (
      <Card style={{ height: '90vh' }} className="mt-5">
        <Messages
          user={this.state.user}
          messages={this.state.messages}
          messagesEnd={this.messagesEnd}
        />
        <MessageEntry
          handleSubmit={this.handleSubmit}
          handleChange={this.handleChange}
          handleKey={this.handleKey}
          text={this.state.text}
        />
        <ControlPanel
          typing={this.state.typing}
          userNick={this.state.userNick}
          userImage={userImage}
          handleChange={this.handleChange}
          editNick={this.editNick}
          toggleNick={this.toggleNick}
        />
      </Card>
    )
  }
}

export default Chat