0_react_component_lifecycle_example.md

react_component_lifecycle_example

1_OrderHistoryPage.jsx

import { connect } from 'react-redux'

class OrderHistoryPage extends React.Component {
  render() {
    return (
      <div className="mpl-order-history-page">        
        <h1 className="mpl-heading">Order History</h1>
        <div className="orders-grid">
          <Mpl.OrderHistoryFilters
            dispatch={this.props.dispatch}
            recordTypeFilter={this.props.recordTypeFilter}
            statusFilter={this.props.statusFilter}
          />
          <Mpl.OrdersTable
            list={this.props.list}
            recordTypeFilter={this.props.recordTypeFilter}
            statusFilter={this.props.statusFilter}
          />
        </div>
      </div>
      );
  }
}

const mapStateToProps = (state) => ({
  list: state.orders.list,
  recordTypeFilter: state.orders.recordTypeFilter,
  statusFilter: state.orders.statusFilter,
})

export default connect(mapStateToProps)(OrderHistoryPage)

2_OrderHistoryFilters.jsx

export default class OrderHistoryFilters extends React.Component {
  render() {
    return (
      <div className="mpl-orders-search-filters">
        <div className="well">
          <div className="container">
            <div className="row mpl-m-b-10">
              <label className="radio-inline">
                Showing records:
              </label>
              <label className="radio-inline">
                <input type="radio" onChange={() => this._handleFiltersChange('record-type-filter', 'all')} value="all" checked={this.props.recordTypeFilter === 'all'} /> All
              </label>
              <label className="radio-inline">
                <input type="radio" onChange={() => this._handleFiltersChange('record-type-filter', 'domestic')} value="domestic" checked={this.props.recordTypeFilter === 'domestic'} /> Domestic
              </label>
              <label className="radio-inline">
                <input type="radio" onChange={() => this._handleFiltersChange('record-type-filter', 'international')} value="international" checked={this.props.recordTypeFilter === 'international'} /> International
              </label>
            </div>

            <div className="row mpl-m-b-10">
              <label className="radio-inline">
                Status:
              </label>
              <label className="radio-inline">
                <input type="radio" onChange={() => this._handleFiltersChange('status-filter', 'all')} value="all" checked={this.props.statusFilter === 'all'} /> All
              </label>
              <label className="radio-inline">
                <input type="radio" onChange={() => this._handleFiltersChange('status-filter', 'processed')} value="processed" checked={this.props.statusFilter === 'processed'} /> Processed
              </label>
              <label className="radio-inline">
                <input type="radio" onChange={() => this._handleFiltersChange('status-filter', 'unprocessed')} value="unprocessed" checked={this.props.statusFilter === 'unprocessed'} /> Unprocessed
              </label>
            </div>
          </div>
        </div>
      </div>
      )
  }

  _handleFiltersChange(name, value) {
    this.props.dispatch({ type: `order-history/${name}/CHANGE`, payload: value })
  }
}

2_OrdersTable.jsx

export default class OrdersTable extends React.Component {
  constructor() {
    super();
    this.state = {
      selectedIds: [],
    }
  }

  render() {
    return (
      <div className="mpl-orders-table">
        <table className="table table-bordered table-striped">
          <thead>
            <tr>
              <th><input type="checkbox" checked={this.state.selectedIds.length === this.props.list.length} onChange={this._toggleSelectAll.bind(this)} /></th>
              <th>Order</th>
              <th>Name</th>
              <th>Service</th>
            </tr>
          </thead>
          <tbody>
            {this._getRows()}
          </tbody>
        </table>
        
        <Mpl.OrderActions
          selectedIds={this.state.selectedIds}
          list={this.props.list}
        />
      </div>
    )
  }

  componentDidMount() {
    // we want all orders to be selected by default
    this._selectAll()
  }

  componentDidUpdate(prevProps) {
    let shouldUpdateSelected = (prevProps.recordTypeFilter !== this.props.recordTypeFilter) ||
      (prevProps.statusFilter !== this.props.statusFilter) ||
      (prevProps.list !== this.props.list)

    if (shouldUpdateSelected) { this._selectAll() }
  }

  _getFilteredOrders() {
    let filteredOrders = this.props.list

    // recordTypeFilter
    let recordTypeFilter = this.props.recordTypeFilter
    filteredOrders = _.filter(filteredOrders, (order) => {
      if (recordTypeFilter === 'domestic' && order.is_domestic === false) { return }
      if (recordTypeFilter === 'international' && order.is_domestic === true) { return }
      return order
    })

    // statusFilter
    let statusFilter = this.props.statusFilter
    filteredOrders = _.filter(filteredOrders, (order) => {
      if (statusFilter === 'unprocessed' && order.status === 'processed') { return }
      if (statusFilter === 'processed' && order.status === 'unprocessed') { return }
      return order
    })

    return filteredOrders
  }

  _getRows() {
    return _.map(this._getFilteredOrders(), (order) => {
      return (
        <Mpl.OrdersTableRow
          key={order.id}
          order={order}
          selectedIds={this.state.selectedIds}
          toggleSelected={this._toggleSelected.bind(this)}
        />
        )
    });
  }

   _toggleSelected(orderId) {
    let newSelectedIds = [...this.state.selectedIds]
    let index = newSelectedIds.indexOf(orderId)

    if (index !== -1) {
      newSelectedIds.splice(index, 1)
    } else {
      newSelectedIds.push(orderId)
    }

    this.setState({
      selectedIds: newSelectedIds,
    })
  }

  _toggleSelectAll() {
    if (this.state.selectedIds.length === 0) {
      this._selectAll()
    } else {
      this._unselectAll()
    }
  }

  _selectAll() {
    this.setState({ selectedIds: this._getFilteredOrders().map((order) => ( order.id )) })
  }

  _unselectAll() {
    this.setState({ selectedIds: [] })
  }
}

3_OrderActions.jsx

export default class OrderActions extends React.Component {
  render () {
    return (
      <div className="mpl-order-actions">
        <form method="get" action="/orders/export">
          <div className="form-actions">
            <button type="submit" name="report" value="eparcels-csv" className="btn btn-info"><strong>Export for eParcels (CSV)</strong></button> &nbsp;&nbsp;
            <input type="hidden" name="order_ids" value={this.props.selectedIds} />
          </div>
        </form>
      </div>
      );
  }
}

3_OrdersTableRow.jsx

export default class OrdersTableRow extends React.Component {
  render () {
    return (
      <tr>
        <td onClick={(event) => event.stopPropagation()}>
          <input
            type="checkbox"
            value={this.props.order.id}
            onChange={() => this.props.toggleSelected(this.props.order.id)}
            checked={this.props.selectedIds.includes(this.props.order.id)}
          />
        </td>
        <td>{this.props.order.sales_record_number}</td>
        <td>{this.props.order.shipping_contact_name}</td>
        <td>{this.props.order.shipping_service}</td>
      </tr>
      );
  }
}