viam-compliance-deposit-ui/src/core/utils/Table/sort.js

A React component for deposit sar alerts.

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { FaSort, FaSortUp, FaSortDown } from 'react-icons/fa';

const SORT = <FaSort />;
const SORT_UP = <FaSortUp />;
const SORT_DOWN = <FaSortDown />;

const sort = ({ title, id, sortData, headThClass, style, sortInfo }) => {
  let sortIni = SORT;

  if (sortInfo?.id === id) {
    switch (sortInfo.sort) {
      case 'up':
        sortIni = SORT_UP;
        break;
      case 'down':
        sortIni = SORT_DOWN;
        break;

      default:
        sortIni = SORT;
        break;
    }
  }

  const [typeOfIcon, setTypeOfIcon] = useState(sortIni);

  const sortConfiguration = () => {
    let newTypeOfIcon = SORT;
    let indicator = 'sort';
    switch (typeOfIcon) {
      case SORT:
        newTypeOfIcon = SORT_UP;
        indicator = 'up';
        break;
      case SORT_UP:
        newTypeOfIcon = SORT_DOWN;
        indicator = 'down';
        break;
      case SORT_DOWN:
        newTypeOfIcon = SORT;
        break;
      default:
        newTypeOfIcon = SORT;
        break;
    }
    setTypeOfIcon(newTypeOfIcon);
    sortData(id, indicator);
  };

  return (
    <th className={headThClass} onClick={sortConfiguration} style={style}>
      {typeOfIcon}
      {title}
    </th>
  );
};

sort.propTypes = {
  title: PropTypes.string,
  id: PropTypes.string,
  sortData: PropTypes.func,
  headThClass: PropTypes.string
};

sort.defaultProps = {
  title: null,
  id: null,
  sortData: null,
  headThClass: null
};

export default sort;