Show and load filters from URL (#23)

* Add param filter utils

* Use param filter utils

components/txs-table/index.tsx

@@ -2,6 +2,7 @@
 
 import { useTxs } from "@/hooks/api";
 import { useDebounce } from "@/hooks/use-debounce";
+import { getFiltersFromParams, setParamsFromFilters } from "@/lib/params";
 import { Span, Tx } from "@/types/txs";
 import {
   ColumnDef,
@@ -16,6 +17,7 @@ import {
   getSortedRowModel,
   useReactTable,
 } from "@tanstack/react-table";
+import { useSearchParams } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
 import { DataTable } from "../data-table";
 import { DataTableColumnHeader } from "../data-table/data-table-column-header";
@@ -25,10 +27,13 @@ import { txsColumns } from "./txs-columns";
 import { DataTableToolbar } from "./txs-table-toolbar";
 
 export function TxsTable() {
+  const params = useSearchParams();
   const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({
     tags: false,
   });
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>(
+    getFiltersFromParams(params),
+  );
   const [sorting, setSorting] = useState<SortingState>([]);
 
   const operationNameValue = columnFilters.find(
@@ -101,6 +106,10 @@ export function TxsTable() {
     table.setPageSize(15);
   }, [table]);
 
+  useEffect(() => {
+    setParamsFromFilters(columnFilters);
+  }, [columnFilters]);
+
   return (
     <div className="space-y-4">
       <DataTableToolbar table={table} />

lib/params.ts

@@ -0,0 +1,42 @@
+import { ColumnFiltersState } from "@tanstack/react-table";
+import { ReadonlyURLSearchParams } from "next/navigation";
+
+export const getFiltersFromParams = (params: ReadonlyURLSearchParams) => {
+  let filters: ColumnFiltersState = [];
+
+  const operationName = params.get("operationName");
+  operationName && filters.push({ id: "operationName", value: operationName });
+
+  const tags = params.get("tags");
+  if (tags) {
+    try {
+      const tagsMap: Map<string, string> = new Map(JSON.parse(tags));
+      filters.push({ id: "tags", value: tagsMap });
+    } catch {}
+  }
+
+  return filters;
+};
+
+export const setParamsFromFilters = (filters: ColumnFiltersState) => {
+  const params = new URLSearchParams();
+
+  const operationName =
+    (filters.find((filter) => filter.id === "operationName")?.value as
+      | string
+      | undefined) ?? undefined;
+
+  const tags =
+    (filters.find((filter) => filter.id === "tags")?.value as
+      | Map<string, string>
+      | undefined) ?? undefined;
+
+  operationName
+    ? params.set("operationName", operationName)
+    : params.delete("operationName");
+  tags
+    ? params.set("tags", JSON.stringify(Array.from(tags)))
+    : params.delete("tags");
+
+  window.history.replaceState(null, "", `?${params.toString()}`);
+};