refactoring

by Vladymyr Shevchuk

JavaScript

import React, { Component } from "react";

class Table extends Component {
  state = {
    sortOrder: 'asc',
    sortColumn: -1
  };ч

  makeSorting(type = 'ask', columnIndex) {
    return (column1, column2) => {
      const {value: a} = column1[columnIndex];
      const {value: b} = column2[columnIndex];

      return type === 'ask'
        ? a - b
        : b - a;
    }
  }

  columnClickHandler(e, i) {
    const { columns } = this.props;
    const { sortOrder } = this.state;

    e.preventDefault();

    if (!this.isColumnSortable(columns[i])) {
      return false;
    }

    this.setState({
      sortColumn: i,
      sortOrder: sortOrder === "asc" ? "desc" : "asc"
    })
  }

  isColumnSortable (col) {
    return col && col.sortable
  }

  get head () {
    const { columns } = this.props;

    return columns.map((col, i) =>
      <th
        key={i}
        onClick={(e) => this.columnClickHandler(e, i)}
        className={this.isColumnSortable(col) ? "sort-btn" : ""}>
        {
          typeof col === "object" ? col.title : col
        }
      </th>
    );
  }

  get body () {
    const { sortColumn, sortOrder } = this.state;
    const { columns, rows } = this.props;

    const sortedRows = sortColumn < -1
      ? rows
      : rows.slice().sort(this.makeSorting(sortOrder, sortColumn));

    return sortedRows.map((row, index) =>
      <tr key={index}>
        {columns.map((col, i) => <td key={i}>{row[i].el}</td>)}
      </tr>
    )
  }

  render() {
    return (
      <table className="table table-striped borderless">
        <thead>
        <tr>{ this.head }</tr>
        </thead>
        <tbody>{ this.body }</tbody>
      </table>
    )
  }
}

export default Table;