Lập trình

Tạo Pomodoro Timer bằng React

Written by huudoanh

Trước tiên chúng ta cần tạo một thư mục với tên Pomodoro ở bên trong thư mục components

Sau đó tạo các file Timer.js và Timer.css bên trong thư mục Pomodoro

//src/components/Pomodoro/Timer.js

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

class Timer extends Component {
  constructor() {
    super();
  }

  componentDidMount() {

  }

  render() {
    return (
      <div className="Pomodoro">

      </div>
    );
  }
}

export default Timer;

Tiếp theo khởi tạo local state trong constructor với các giá trị time and alert (cảnh báo khi hết thời gian)

constructor() {
    super();

    // Initial State
    this.state = {
      alert: {
        type: '',
        message: ''
      },
      time: 0
    };

    // Defined times for work, short break and long break...
    this.times = {
      defaultTime: 1500, // 25 min
      shortBreak: 300, // 5 min
      longBreak: 900 // 15 min
    };
  }

Phương thức componentDidMount được gọi khi component được gắn (mount) và nó chỉ thực thi một lần. Trong trường hợp này, khi component của chúng ta được gắn chúng ta cần cập nhật lại trạng thái thời gian (time state) với thời gian mặc định là 25 phút. Và để làm được điều này, chúng ta sẽ tạo một phương thức mới gọi là setDefaultTime bên trong phương thức componentDidMount

componentDidMount() {
    // Set default time when the component mounts
    this.setDefaultTime();
  }

  setDefaultTime = () => {
    // Default time is 25 min
    this.setState({
      time: this.times.defaultTime
    });
  }

Sau khi chúng ta định nghĩa thời gian mặc định cho time state, chúng ta sẽ xem làm sao để render  cho Pomodoro Timer:

render() {
    const { alert: { message, type }, time } = this.state;

    return (
      <div className="Pomodoro">
        <div className={`alert ${type}`}>
          {message}
        </div>

        <div className="timer">
          {this.displayTimer(time)}
        </div>

        <div className="types">
          <button 
            className="start" 
            onClick={this.setTimeForWork}
          >
            Start Working
          </button>
          <button 
            className="short" 
            onClick={this.setTimeForShortBreak}
          >
            Short Break
          </button>
          <button 
            className="long" 
            onClick={this.setTimeForLongBreak}
          >
            Long Break
          </button>
        </div>
      </div>
    );
  }

Bạn có thể thấy, JSX của chúng ta khá đơn giản, chúng ta sẽ nhận các giá trị từ local state (message, type và time) và hiển thị ra các cảnh báo (alert) trong thẻ div khi người dùng nhận được một thông điệp cảnh báo. Chúng ta cũng có một thẻ div khác hiển thị thời gian, và ở đây chúng ta truyền giá trị thời gian (time) hiện tại (thể hiện bằng giây) cho phương thức displayTimer, phương thức này sẽ chuyển đổi từ giây sang định dạng mm:ss.

setTimeForWork, setTimeForShortBreak và setTimeForLongBreak mục đích của ba hàm này là cập nhật thông điệp cảnh báo tùy thuộc vào loại bộ hẹn giờ (timer) và sau đó gọi gọi hàm setTime (có sẵn trong javascript) được truyền tham số thời gian cụ thể cho từng tùy chọn.

setTimeForWork = () => {
    this.setState({
      alert: {
        type: 'work',
        message: 'Working!'
      }
    });

    return this.setTime(this.times.defaultTime);
  }

  setTimeForShortBreak = () => {
    this.setState({
      alert: {
        type: 'shortBreak',
        message: 'Taking a Short Break!'
      }
    });

    return this.setTime(this.times.shortBreak);
  }

  setTimeForLongBreak = () => {
    this.setState({
      alert: {
        type: 'longBreak',
        message: 'Taking a Long Break!'
      }
    });

    return this.setTime(this.times.longBreak);
  }