Clean up search code

compass/components/Table/Index.tsx

@@ -3,14 +3,11 @@
 import usersImport from "./users.json";
 import {
   ColumnDef,
-  ColumnFiltersState,
-  GlobalFilterTableState,
   Row,
   createColumnHelper,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
-  getSortedRowModel,
   sortingFns,
   useReactTable,
 } from "@tanstack/react-table";
@@ -19,7 +16,7 @@ import { RowOptionMenu } from "./RowOptionMenu";
 import { RowOpenAction } from "./RowOpenAction";
 import { TableAction } from "./TableAction";
 import { Bars2Icon, AtSymbolIcon, HashtagIcon, ArrowDownCircleIcon } from "@heroicons/react/24/solid";
-import { compareItems, rankItem } from "@tanstack/match-sorter-utils";
+import { rankItem } from "@tanstack/match-sorter-utils";
 
 const usersExample = usersImport as unknown as User[];
 
@@ -34,6 +31,7 @@ type User = {
   group?: string;
 };
 
+// For search
 const fuzzyFilter = (row: Row<any>, columnId: string, value: any, addMeta: (meta: any) => void) => {
   // Rank the item
   const itemRank = rankItem(row.getValue(columnId), value)
@@ -45,21 +43,6 @@ const fuzzyFilter = (row: Row<any>, columnId: string, value: any, addMeta: (meta
   return itemRank.passed
 }
 
-const fuzzySort = (rowA, rowB, columnId) => {
-  let dir = 0
-
-  // Only sort by rank if the column has ranking information
-  if (rowA.columnFiltersMeta[columnId]) {
-    dir = compareItems(
-      rowA.columnFiltersMeta[columnId]!,
-      rowB.columnFiltersMeta[columnId]!
-    )
-  }
-  // Provide an alphanumeric fallback for when the item ranks are equal
-  return dir === 0 ? sortingFns.alphanumeric(rowA, rowB, columnId) : dir
-}
-
-
 export const Table = () => {
   const columnHelper = createColumnHelper<User>();
 
@@ -71,7 +54,6 @@ export const Table = () => {
     columnHelper.accessor("username", {
       header: () => <><Bars2Icon className="inline align-top h-4" /> Username</>,
       cell: (info) => <RowOpenAction title={info.getValue()} />,
-      sortingFn: fuzzySort,
     }),
     columnHelper.accessor("role", {
       header: () => <><ArrowDownCircleIcon className="inline align-top h-4" /> Role</>,
@@ -88,21 +70,12 @@ export const Table = () => {
   ];
 
   const [data, setData] = useState<User[]>([...usersExample]);
-  // const [globalFilter, setGlobalFilter] = useState<GlobalFilterTableState>();
 
   // Searching
   const [query, setQuery] = useState("");
   const handleSearchChange = (e: ChangeEvent) => {
     const target = e.target as HTMLInputElement;
     setQuery(String(target.value));
-    console.log(query);
-
-    // setColumnFilters([
-    //   {
-    //     id: "username",
-    //     value: query
-    //   }
-    // ])
   }
 
   // TODO: Filtering
@@ -121,8 +94,6 @@ export const Table = () => {
     globalFilterFn: fuzzyFilter,
     getCoreRowModel: getCoreRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    // onColumnFiltersChange: setColumnFilters,
   });
 
   return (

compass/components/Table/TableAction.tsx

@@ -38,7 +38,7 @@ export const TableAction: FunctionComponent<TableActionProps> = ({query, handleC
         type="text"
         name="search"
         placeholder="Type to search..."
-        value={query}
+        value={query ?? ""}
         onChange={handleChange}
         />
     </div>