Allow sorting by most asked companies to less asked companies (seanprashad#104)

Co-authored-by: Zhongou ZHENG <zhongou.zheng@gmail.com>

Author: hiromik

src/components/Table/index.js

@@ -160,6 +160,7 @@ const Table = () => {
  {
  Header: 'Questions',
  accessor: 'questions',
+ disableSortBy: true,
  Cell: cellInfo => {
  return (
  <NavLink
@@ -189,6 +190,7 @@ const Table = () => {
  {
  Header: 'Solutions',
  accessor: 'solutions',
+ disableSortBy: true,
  Cell: cellInfo => {
  const url = cellInfo.row.original.premium
  ? `${cellInfo.row.original.url}/`
@@ -234,6 +236,7 @@ const Table = () => {
  );
  },
  accessor: 'pattern',
+ disableSortBy: true,
  Cell: cellInfo => {
  const patterns = `${cellInfo.row.original.pattern}`
  .split(',')
@@ -261,6 +264,7 @@ const Table = () => {
  {
  Header: 'Difficulty',
  accessor: 'difficulty',
+ disableSortBy: true,
  Cell: cellInfo => (
  <Row>
  <Badge
@@ -276,15 +280,27 @@ const Table = () => {
  {
  Header: () => {
  return (
- <div style={{ whiteSpace: 'nowrap' }}>
- Companies{' '}
- <span data-tip="Companies retrieved from Leetcode Premium (May 2021)">
- <FaQuestionCircle />
- </span>
- </div>
+ <>
+ <div
+ style={{ whiteSpace: 'nowrap', display: 'inline-block' }}
+ >
+ Companies{' '}
+ <span data-tip="Companies retrieved from Leetcode Premium (May 2021)">
+ <FaQuestionCircle />
+ </span>
+ </div>
+ </>
  );
  },
  accessor: 'companies',
+ sortType: (a, b) => {
+ if (a.original.companies.length === b.original.companies.length) {
+ return 0;
+ }
+ return a.original.companies.length > b.original.companies.length
+ ? 1
+ : -1;
+ },
  Cell: cellInfo => {
  const companies = cellInfo.row.original.companies.map(company => {
  return (
@@ -333,7 +349,15 @@ const Table = () => {
  <tr {...headerGroup.getHeaderGroupProps()}>
  {headerGroup.headers.map(column => (
  <th {...column.getHeaderProps()}>
- {column.render('Header')}
+ <div {...column.getSortByToggleProps({ title: null })}>
+ {column.render('Header')}
+ {/* eslint-disable-next-line no-nested-ternary */}
+ {column.isSorted
+ ? column.isSortedDesc
+ ? ' 🔽'
+ : ' 🔼'
+ : ''}
+ </div>
  <div>{column.canFilter ? column.render('Filter') : null}</div>
  </th>
  ))}