Update Fork | Resolve conflicts

Author: mm1705

package-lock.json

@@ -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/components/Table/index.js

@@ -1826,91 +1826,62 @@ export default [
     url: 'https://leetcode.com/problems/longest-word-in-dictionary/',
     pattern: 'Trie',
     difficulty: 'Easy',
-    companies: [
-      'Goldman Sachs',
-      'Google',
-    ],
+    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',
-    ],
+    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',
-    ],
+    companies: ['Google'],
   },
   {
     id: 167,
     name: 'Concatenated Words',
     url: 'https://leetcode.com/problems/concatenated-words/',
     pattern: 'Trie',
     difficulty: 'Hard',
-    companies: [
-      'Amazon',
-      'Apple',
-      'Facebook',
-    ],
+    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',
-    ],
+    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',
-    ],
+    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',
-    ],
+    companies: ['Amazon', 'Google', 'Lyft', 'Microsoft', 'Uber'],
   },
   {
     id: 171,
     name: 'Word Squares',
     url: 'https://leetcode.com/problems/word-squares/',
     pattern: 'Trie',
     difficulty: 'Hard',
-    companies: [
-      'Oracle',
-    ],
+    companies: ['Oracle'],
   },
 ];