Pull from upstream repo

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 (

src/data/index.js

@@ -1592,7 +1592,7 @@ export default [
     id: 147,
     name: 'Implement Trie (Prefix Tree)',
     url: 'https://leetcode.com/problems/implement-trie-prefix-tree/',
-    pattern: 'DFS',
+    pattern: 'Trie',
     difficulty: 'Medium',
     companies: ['Amazon', 'Microsoft', 'Google', 'Facebook'],
   },
@@ -1626,7 +1626,7 @@ export default [
     id: 150,
     name: 'Word Search II',
     url: 'https://leetcode.com/problems/word-search-ii/',
-    pattern: 'DFS',
+    pattern: 'Trie',
     difficulty: 'Hard',
     companies: [
       'Amazon',
@@ -1820,4 +1820,68 @@ export default [
       'Bloomberg',
     ],
   },
+  {
+    id: 164,
+    name: 'Longest Word in Dictionary',
+    url: 'https://leetcode.com/problems/longest-word-in-dictionary/',
+    pattern: 'Trie',
+    difficulty: 'Easy',
+    companies: ['Goldman Sachs', 'Google'],
+  },
+  {
+    id: 165,
+    name: 'Index Pairs of a String',
+    url: 'https://leetcode.com/problems/index-pairs-of-a-string/',
+    pattern: 'Trie',
+    difficulty: 'Easy',
+    companies: ['Amazon'],
+  },
+  {
+    id: 166,
+    name: 'Maximum XOR of Two Numbers in an Array',
+    url: 'https://leetcode.com/problems/maximum-xor-of-two-numbers-in-an-array',
+    pattern: 'Trie',
+    difficulty: 'Medium',
+    companies: ['Google'],
+  },
+  {
+    id: 167,
+    name: 'Concatenated Words',
+    url: 'https://leetcode.com/problems/concatenated-words/',
+    pattern: 'Trie',
+    difficulty: 'Hard',
+    companies: ['Amazon', 'Apple', 'Facebook'],
+  },
+  {
+    id: 168,
+    name: 'Prefix and Suffix Search',
+    url: 'https://leetcode.com/problems/prefix-and-suffix-search/',
+    pattern: 'Trie',
+    difficulty: 'Hard',
+    companies: ['Facebook', 'Google', 'Uber'],
+  },
+  {
+    id: 169,
+    name: 'Palindrome Pairs',
+    url: 'https://leetcode.com/problems/palindrome-pairs/',
+    pattern: 'Trie',
+    difficulty: 'Hard',
+    companies: ['Airbnb', 'Amazon', 'Facebook', 'Google', 'Square'],
+  },
+  {
+    id: 170,
+    name: 'Design Search Autocomplete System',
+    url: 'https://leetcode.com/problems/design-search-autocomplete-system/',
+    pattern: 'Trie',
+    difficulty: 'Hard',
+    companies: ['Amazon', 'Google', 'Lyft', 'Microsoft', 'Uber'],
+  },
+  {
+    id: 171,
+    name: 'Word Squares',
+    url: 'https://leetcode.com/problems/word-squares/',
+    pattern: 'Trie',
+    difficulty: 'Hard',
+    companies: ['Oracle'],
+  },
 ];