page.borrow.list.js

import React from 'react';
import {connect} from 'react-redux';
import * as allAction from '../actions';
import MyNav from '../components/component.mynav';
import Message from '../components/component.message';
import styles from './pages.module.scss';
import {config} from 'rxjs';

class BorrowList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {currentItem: null};
  }

  componentDidMount() {
    this.init();
  }

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

  async init() {
    await this.props.borrowMyList();
    this.update();
  }

  buildRowHtml() {
    const {mylist} = this.props.borrow;
    if (!allAction.Utility.IsArray(mylist)) {
      return (
        <tr>
          <td></td>
        </tr>
      );
    }
    return mylist.map((item, index) => {
      const stateMap = {1: 'Normal', 2: 'Confirm', 3: 'Refuse', 4: 'Return'};
      return (
        <tr key={item.id}>
          <td>{item.book_username}</td>
          <td>{item.book_name}</td>
          <td>${item.book_price}</td>
          <td>{item.book_address}</td>
          <td>{stateMap[item.state] || stateMap['1']}</td>
          <td>
            <button
              onClick={async () => {
                if (item.state === 2) {
                  const isReturn = confirm('do you really want to return it');
                  if (!isReturn) {
                    return;
                  }
                  await this.props.borrowReturn(item.id, index);
                  this.update();
                  return;
                }
                const isDelete = confirm('do you really want to delete it?');
                if (!isDelete) {
                  return;
                }
                await this.props.borrowDelete(item.id, index);
                this.update();
              }}
            >
              {item.state === 2 ? 'Return' : 'Delete'}
            </button>
            <button onClick={() => this.setState({currentItem: item})}>Message</button>
          </td>
        </tr>
      );
    });
  }

  render() {
    return (
      <div className={styles.borrowCss}>
        <MyNav {...this.props} />
        <div className={styles.row}>
          <div className={styles.col}>
            <table>
              <thead>
                <tr>
                  <th> Username </th>
                  <th> BookName </th>
                  <th> Price </th>
                  <th> Address </th>
                  <th> State </th>
                  <th> </th>
                </tr>
              </thead>
              <tbody>{this.buildRowHtml()}</tbody>
            </table>
          </div>

          <div className={styles.message}>{this.state.currentItem && <Message item={this.state.currentItem} isRequest={false} />}</div>
        </div>
      </div>
    );
  }
}

export default connect((state) => ({...state}), {...allAction})(BorrowList);