From 6a7be37d0e6ad2dbec60247dadc4bfc30e078362 Mon Sep 17 00:00:00 2001
From: Vasily Zubarev <me@vas3k.ru>
Date: Tue, 18 Mar 2025 18:27:39 +0100
Subject: [PATCH] fix: useTransactionFilters now respect other params

---
 app/transactions/page.tsx         |  5 ++++-
 hooks/use-transaction-filters.tsx | 22 +++++++++++++++++-----
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/app/transactions/page.tsx b/app/transactions/page.tsx
index 24922ce..4ef44b7 100644
--- a/app/transactions/page.tsx
+++ b/app/transactions/page.tsx
@@ -26,7 +26,10 @@ export default async function TransactionsPage({ searchParams }: { searchParams:
   return (
     <>
       <header className="flex flex-wrap items-center justify-between gap-2 mb-8">
-        <h2 className="text-3xl font-bold tracking-tight">Transactions</h2>
+        <h2 className="flex flex-row gap-3 md:gap-5">
+          <span className="text-3xl font-bold tracking-tight">Transactions</span>
+          <span className="text-3xl tracking-tight opacity-20">{transactions.length}</span>
+        </h2>
         <div className="flex gap-2">
           <ExportTransactionsDialog fields={fields} categories={categories} projects={projects}>
             <Button variant="outline">
diff --git a/hooks/use-transaction-filters.tsx b/hooks/use-transaction-filters.tsx
index aa5dbc2..997f125 100644
--- a/hooks/use-transaction-filters.tsx
+++ b/hooks/use-transaction-filters.tsx
@@ -3,7 +3,7 @@ import { format } from "date-fns"
 import { useRouter, useSearchParams } from "next/navigation"
 import { useEffect, useState } from "react"
 
-const filters = ["search", "dateFrom", "dateTo", "ordering", "categoryCode", "projectCode"]
+const filterKeys = ["search", "dateFrom", "dateTo", "ordering", "categoryCode", "projectCode"]
 
 export function useTransactionFilters(defaultFilters?: TransactionFilters) {
   const router = useRouter()
@@ -14,7 +14,7 @@ export function useTransactionFilters(defaultFilters?: TransactionFilters) {
   })
 
   useEffect(() => {
-    const newSearchParams = filtersToSearchParams(filters)
+    const newSearchParams = filtersToSearchParams(filters, searchParams)
     router.push(`?${newSearchParams.toString()}`)
   }, [filters])
 
@@ -26,14 +26,26 @@ export function useTransactionFilters(defaultFilters?: TransactionFilters) {
 }
 
 export function searchParamsToFilters(searchParams: URLSearchParams) {
-  return filters.reduce((acc, filter) => {
+  return filterKeys.reduce((acc, filter) => {
     acc[filter] = searchParams.get(filter) || ""
     return acc
-  }, {} as Record<string, string>)
+  }, {} as Record<string, string>) as TransactionFilters
 }
 
-export function filtersToSearchParams(filters: TransactionFilters): URLSearchParams {
+export function filtersToSearchParams(
+  filters: TransactionFilters,
+  currentSearchParams?: URLSearchParams
+): URLSearchParams {
+  // Copy of all non-filter parameters back to the URL
   const searchParams = new URLSearchParams()
+  if (currentSearchParams) {
+    currentSearchParams.forEach((value, key) => {
+      if (!filterKeys.includes(key)) {
+        searchParams.set(key, value)
+      }
+    })
+  }
+
   if (filters.search) {
     searchParams.set("search", filters.search)
   } else {