Enable sorting question list via Companies (#21)

The `Difficulty` filter is now hard-coded, as to avoid running into edge
cases using preFilteredRows/filteredRows (see
https://github.com/tannerlinsley/react-table/blob/master/docs/api/useFilters.md#column-properties).

All filters have been refactored out to a seperate file (filters.js), to
reduce code clutter in the Table component.

The question list is now sorted by difficulty by default when being
exported from src/data/index.js.

Fixes #13

src/components/Table/filters.js

@@ -0,0 +1,63 @@
+import React from 'react';
+
+function CreateDropDownListHelper(options, filterValue, setFilter) {
+  return (
+    <select
+      value={filterValue}
+      onChange={e => {
+        setFilter(e.target.value || '');
+      }}
+    >
+      <option value="">All</option>
+      {options.map((option, idx) => (
+        <option key={idx} value={option}>
+          {option}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+export function DefaultColumnFilter({
+  column: { filterValue, preFilteredRows, setFilter, id },
+}) {
+  const count = preFilteredRows.length;
+
+  return (
+    <input
+      value={filterValue || ''}
+      onChange={e => {
+        setFilter(e.target.value || '');
+      }}
+      placeholder={`Search ${count} questions`}
+    />
+  );
+}
+
+export function SelectDifficultyColumnFilter({
+  column: { filterValue, setFilter },
+}) {
+  const options = ['Easy', 'Medium', 'Hard'];
+
+  return CreateDropDownListHelper(options, filterValue, setFilter);
+}
+
+export function SelectColumnFilter({
+  column: { filterValue, setFilter, preFilteredRows, id },
+}) {
+  const options = React.useMemo(() => {
+    const set = new Set();
+
+    preFilteredRows.forEach(row => {
+      const values = String(row.values[id]).split(',');
+
+      values.forEach(value => {
+        set.add(value);
+      });
+    });
+
+    return [...set.values()].sort();
+  }, [id, preFilteredRows]);
+
+  return CreateDropDownListHelper(options, filterValue, setFilter);
+}

src/components/Table/index.js

@@ -9,30 +9,30 @@ import {
 import ReactTooltip from 'react-tooltip';
 import { useTable, useFilters, useSortBy } from 'react-table';
 import { FaQuestionCircle, FaLock } from 'react-icons/fa';
+import {
+  DefaultColumnFilter,
+  SelectDifficultyColumnFilter,
+  SelectColumnFilter,
+} from './filters';
 import { Event } from '../Shared/Tracking';
 
-import questionList from '../../data';
+import questions from '../../data';
 
 import './styles.scss';
 
 const images = require.context('../../icons', true);
 
-const sortByObject = { Easy: 0, Medium: 1, Hard: 2 };
-questionList.sort(
-  (a, b) => sortByObject[a.difficulty] - sortByObject[b.difficulty],
-);
-
 const Table = () => {
   const [checked, setChecked] = useState(
     JSON.parse(localStorage.getItem('checked')) ||
-      new Array(questionList.length).fill(false),
+      new Array(questions.length).fill(false),
   );
 
   useEffect(() => {
     window.localStorage.setItem('checked', JSON.stringify(checked));
   }, [checked]);
 
-  const data = React.useMemo(() => questionList, []);
+  const data = React.useMemo(() => questions, []);
 
   const defaultColumn = React.useMemo(
     () => ({
@@ -73,8 +73,8 @@ const Table = () => {
               return (
                 <span>
                   {cellInfo.row.original.premium ? (
-                    <span data-tip="Requires leetcode premium">
-                      <FaLock />{' '}
+                    <span data-tip="Requires leetcode premium to view">
+                      <FaLock />
                     </span>
                   ) : (
                     ''
@@ -123,7 +123,7 @@ const Table = () => {
                 {cellInfo.row.original.difficulty}
               </Badge>
             ),
-            Filter: SelectColumnFilter,
+            Filter: SelectDifficultyColumnFilter,
           },
           {
             Header: () => {
@@ -152,7 +152,7 @@ const Table = () => {
 
               return <Row className="companies">{companies}</Row>;
             },
-            disableFilters: true,
+            Filter: SelectColumnFilter,
           },
         ],
       },
@@ -161,56 +161,6 @@ 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]);
-      });
-
-      if (id === 'difficulty') {
-        return [...options.values()];
-      }
-
-      return [...options.values()].sort();
-    }, [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,
@@ -233,10 +183,10 @@ const Table = () => {
   return (
     <Container className="table">
       <ReactTooltip />
-      <ReactTable align="center" borderless striped hover {...getTableProps()}>
+      <ReactTable borderless striped hover {...getTableProps()}>
         <thead>
           {headerGroups.map(headerGroup => (
-            <tr className="sticky" {...headerGroup.getHeaderGroupProps()}>
+            <tr {...headerGroup.getHeaderGroupProps()}>
               {headerGroup.headers.map(column => (
                 <th {...column.getHeaderProps()}>
                   {column.render('Header')}

src/components/Table/styles.scss

@@ -3,14 +3,16 @@
     justify-content: center;
   }
 
-  thead > tr:first-child {
-    display: none;
-  }
+  thead {
+    > tr:first-child {
+      display: none;
+    }
 
-  tr.sticky th {
-    background: white;
-    position: sticky;
-    top: 0;
+    > tr th {
+      background: white;
+      position: sticky;
+      top: 0;
+    }
   }
 
   .nav-link {

src/data/index.js

@@ -1,4 +1,4 @@
-export default [
+const questions = [
   {
     id: 0,
     name: 'Contains Duplicate',
@@ -2056,3 +2056,9 @@ export default [
     companies: ['Oracle'],
   },
 ];
+
+const sortBy = { Easy: 0, Medium: 1, Hard: 2 };
+
+export default questions.sort(
+  (a, b) => sortBy[a.difficulty] - sortBy[b.difficulty],
+);