Hướng dẫn tạo ứng dụng chat trong React kết hợp với Firebase - Phần 2

Xin chào các bạn, bây giờ tiếp tục với bài viết ở phần 1, hôm nay mình sẽ tiếp tục với phần 2, để xử lí các sự kiện khi người dùng nhập message vào, lưu message cũng như tên user vào firebase. Ở phần trước mình chỉ làm phần thô khi cho hiển thị message cũng như user ra, giao diện ở phần 1 sẽ như sau: Bây giờ chúng ta sẽ bắt đầu từ việc nhập và lưu message mà người dùng nhập vào, như các bạn đã biết thường để kết thúc một đoạn chat các bạn thường ấn enter phải ko nhỉ?. Ở đây chúng ta sẽ dùng sự kiện onKeyUp để kết thúc đoạn chat bằng key mà mình muốn, mình vẫn sẽ dùng phím enter nhé. Các bạn thêm đoạn code này vào file index.js trong thư mục components/MessageInput

  onKeyUp = (event) => {
    if(event.keyCode === 13){
      event.stopPropagation();
      this.props.onSubmit(this.state.value);
      this.setState({value: ''});
    }
  };

Và đoạn code hoàn thiện của file index như sau:

import React, { Component, PropTypes } from 'react';
import './style.css';

export default class MessageInput extends Component {

  state = {
    value: '',
  };

  onChange = event => this.setState({ value: event.target.value }); 

  onKeyUp = (event) => {
    if(event.keyCode === 13){
      event.stopPropagation();
      this.props.onSubmit(this.state.value);
      this.setState({value: ''});
    }
  };

  render() {
    return (
      <input
        type="text"
        placeholder="Type your message"
        className="message-input"
        onChange={this.onChange}
        onKeyUp={this.onKeyUp}
        value={this.state.value}
      />
    );
  }
}

Đến đây là đã xong việc xử lí các sự kiện nhập vào, tuy nhiên nó vẫn chưa được lưu và firebase nên giù bạn có chat bao nhiêu lần nó cũng không thể hiện thị ra được. Giờ mình sẽ xử lý một chút ở trong file index.js của thư mục containers/Chat nhé. Ở containers này sẽ xử lý việc lưu message, lưu tên người dùng.

import React, { PureComponent } from 'react';
import MessageList from 'containers/MessageList';
import MessageInput from 'components/MessageInput';
import User from 'components/User';
import './style.css';

export default class Chat extends PureComponent {
  state = {
    user: `User${~~(Math.random()*10000)}`,
  }

  onUserUpdate = user => this.setState({ user });

  onMessageSend = (text) => {
    const { user } = this.state;

    window.firebase.database().ref('messages').push({
      id: Date.now(),
      user,
      text,
    }, () => document.body.scrollTop += 100);
    debugger;
  };


  render() {
    return (
      <main>
        <MessageList />
        <div className="chat-input-area">
          <User onUpdate={this.onUserUpdate} user={this.state.user} />
          <MessageInput onSubmit={this.onMessageSend}/>
        </div>
      </main>
    );
  }
}

Ở đây chúng ta tạo một phương thức onUserUpdate nhằm để lưu giá trị user vào state khi người dùng thay đổi tên. Tiếp theo mình sẽ tạo thêm phương thức onMessageSend, phương thức này sẽ thực thi ngay khi bạn bấm phím Enter mà mình đã setup ở đoạn code trước, trong phương thức này nó sẽ lưu một ID mới, với việc sử dụng Date.now() thì không lo việc ID trùng lặp nhau, và tiếp theo sẽ lưu lại tên user cũng như đoạn chat vào firebase. Ok, giờ nhìn lại cũng ổn ổn đấy nhỉ. Giờ bạn thử chat xem nào. Nếu thành công khi click vào link sau https://chat-d4243.firebaseapp.com/ thì đoạn chat mà bạn vừa nhập sẽ hiển thị lên.

Ở phần tiếp theo, chúng ta sẽ tiếp tục xử lý một số tác vụ như sửa, xóa các đoạn chat nhé. Vì mình mới tìm hiểu React có gì thiếu sót mong các bạn góp ý. Hẹn các bạn ở phần sau!!!