page.book.detail.js

import React from 'react';
import {connect} from 'react-redux';
import styles from './pages.module.scss';
import {ApiService, borrowAdd, bookDetail} from '../actions';
import Confirm from '../components/component.confirm';

class PageBookDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showConfirmDialog: false};
  }

  componentDidMount() {
    this.getDetail();
  }

  update() {
    this.setState({ts: new Date()});
  }

  async getDetail() {
    const id = this.props.match.params.id;
    await this.props.bookDetail(id);
    this.update();
  }

  setShowConfirm(val) {
    this.state.showConfirmDialog = val;
    this.update();
  }

  render() {
    const {image, book_name, price, ISBN, author, category, describe, is_borrow = false} = this.props.book.detail || {};
    
    return (
      <div className={styles.row + ' ' + styles.detail}>
        <div className={styles.left}>
          <div className={styles.image} style={{backgroundImage: `url('${ApiService}${image}')`}}></div>
        </div>
        <div className={styles.right}>
          <div className={styles.row}>
            <div className={styles.detailLabel}>Category:</div>
            <div className={styles.detailValue}>{category}</div>
          </div>
          <div className={styles.row}>
            <div className={styles.detailLabel}>Name:</div>
            <div className={styles.detailValue}>{book_name}</div>
          </div>
          <div className={styles.row}>
            <div className={styles.detailLabel}>Price:</div>
            <div className={styles.detailValue}>${price}</div>
          </div>
          <div className={styles.row}>
            <div className={styles.detailLabel}>ISBN:</div>
            <div className={styles.detailValue}>{ISBN}</div>
          </div>
          <div className={styles.row}>
            <div className={styles.detailLabel}>Author:</div>
            <div className={styles.detailValue}>{author}</div>
          </div>
          <div className={styles.row}>
            <div className={styles.detailLabel}>Describe:</div>
            <div className={styles.describe}>{describe}</div>
          </div>

          <div className={styles.row}>
            <div className={styles.detailLabel}> </div>
            <div className={styles.describe}>
              <button disabled={is_borrow} onClick={() => this.setShowConfirm(true)}>
                Borrow
              </button>
            </div>
          </div>
        </div>
        <div className="col0">
          <div onClick={() => this.props.history.goBack()}>back</div>

          {this.state.showConfirmDialog && (
            <Confirm
              onCancel={() => this.setShowConfirm(false)}
              onConfirm={async (message) => {
                if (!message) {
                  alert('Please fill in the reason for borrowing the book');
                  return;
                }
                const data = {...this.props.book.detail, message};
                await this.props.borrowAdd(data);
                this.setShowConfirm(false);
                alert('add success');
              }}
            />
          )}
        </div>
      </div>
    );
  }
}

export default connect((state) => ({...state}), {bookDetail, borrowAdd})(PageBookDetail);