Add default sort for question list

When the page is loaded, the data set will now be sorted automatically according to difficulty then pattern, irregardless of the order that questions are added to /src/data/index.js.

Author: Sean Prashad

src/components/Table/index.js

@@ -7,7 +7,7 @@ import {
  NavLink,
 } from 'reactstrap';
 import ReactTooltip from 'react-tooltip';
-import { useTable, useFilters } from 'react-table';
+import { useTable, useFilters, useSortBy } from 'react-table';
 import { FaQuestionCircle } from 'react-icons/fa';
 import { Event } from '../Shared/Tracking';
 
@@ -17,49 +17,10 @@ import './styles.scss';
 
 const images = require.context('../../icons', true);
 
-function DefaultColumnFilter({
- column: { filterValue, preFilteredRows, setFilter },
-}) {
- const count = preFilteredRows.length;
-
- return (
- <input
- value={filterValue || ''}
- onChange={e => {
- setFilter(e.target.value || undefined); // Set undefined to remove the filter entirely
- }}
- placeholder={`Search ${count} questions...`}
- />
- );
-}
-
-function SelectColumnFilter({
- column: { filterValue, setFilter, preFilteredRows, id },
-}) {
- const options = React.useMemo(() => {
- const options = new Set();
- preFilteredRows.forEach(row => {
- options.add(row.values[id]);
- });
- return [...options.values()];
- }, [id, preFilteredRows]);
-
- return (
- <select
- value={filterValue}
- onChange={e => {
- setFilter(e.target.value || undefined);
- }}
- >
- <option value="">All</option>
- {options.map((option, i) => (
- <option key={i} value={option}>
- {option}
- </option>
- ))}
- </select>
- );
-}
+const sortByObject = { Easy: 0, Medium: 1, Hard: 2 };
+questionList.sort(
+ (a, b) => sortByObject[a.difficulty] - sortByObject[b.difficulty],
+);
 
 const Table = () => {
  const [checked, setChecked] = useState(
@@ -71,21 +32,21 @@ const Table = () => {
  window.localStorage.setItem('checked', JSON.stringify(checked));
  }, [checked]);
 
+ const data = React.useMemo(() => questionList, []);
+
  const defaultColumn = React.useMemo(
  () => ({
  Filter: DefaultColumnFilter,
  minWidth: 30,
- maxWidth: 10,
+ maxWidth: 30,
  }),
  [],
  );
 
- const data = React.useMemo(() => questionList, []);
-
  const columns = React.useMemo(
  () => [
  {
- Header: 'Sort questions by name or pattern!',
+ Header: 'Leetcode Patterns',
  columns: [
  {
  id: 'Checkbox',
@@ -138,7 +99,6 @@ const Table = () => {
  {
  Header: 'Difficulty',
  accessor: 'difficulty',
- Filter: SelectColumnFilter,
  Cell: cellInfo => (
  <Badge
  className={cellInfo.row.original.difficulty.toLowerCase()}
@@ -147,6 +107,7 @@ const Table = () => {
  {cellInfo.row.original.difficulty}
  </Badge>
  ),
+ Filter: SelectColumnFilter,
  },
  {
  Header: () => {
@@ -184,6 +145,50 @@ const Table = () => {
  [],
  );
 
+ function DefaultColumnFilter({
+ column: { filterValue, preFilteredRows, setFilter },
+ }) {
+ const count = preFilteredRows.length;
+
+ return (
+ <input
+ value={filterValue || ''}
+ onChange={e => {
+ setFilter(e.target.value || undefined); // Set undefined to remove the filter entirely
+ }}
+ placeholder={`Search ${count} questions...`}
+ />
+ );
+ }
+
+ function SelectColumnFilter({
+ column: { filterValue, setFilter, preFilteredRows, id },
+ }) {
+ const options = React.useMemo(() => {
+ const options = new Set();
+ preFilteredRows.forEach(row => {
+ options.add(row.values[id]);
+ });
+ return [...options.values()];
+ }, [id, preFilteredRows]);
+
+ return (
+ <select
+ value={filterValue}
+ onChange={e => {
+ setFilter(e.target.value || undefined);
+ }}
+ >
+ <option value="">All</option>
+ {options.map((option, i) => (
+ <option key={i} value={option}>
+ {option}
+ </option>
+ ))}
+ </select>
+ );
+ }
+
  const {
  getTableProps,
  getTableBodyProps,
@@ -195,8 +200,12 @@ const Table = () => {
  columns,
  data,
  defaultColumn,
+ initialState: {
+ sortBy: [{ id: 'pattern' }],
+ },
  },
  useFilters,
+ useSortBy,
  );
 
  return (