fix: useTransactionFilters now respect other params

This commit is contained in:
Vasily Zubarev
2025-03-18 18:27:39 +01:00
parent e7e05ea534
commit 6a7be37d0e
2 changed files with 21 additions and 6 deletions

View File

@@ -26,7 +26,10 @@ export default async function TransactionsPage({ searchParams }: { searchParams:
return ( return (
<> <>
<header className="flex flex-wrap items-center justify-between gap-2 mb-8"> <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"> <div className="flex gap-2">
<ExportTransactionsDialog fields={fields} categories={categories} projects={projects}> <ExportTransactionsDialog fields={fields} categories={categories} projects={projects}>
<Button variant="outline"> <Button variant="outline">

View File

@@ -3,7 +3,7 @@ import { format } from "date-fns"
import { useRouter, useSearchParams } from "next/navigation" import { useRouter, useSearchParams } from "next/navigation"
import { useEffect, useState } from "react" 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) { export function useTransactionFilters(defaultFilters?: TransactionFilters) {
const router = useRouter() const router = useRouter()
@@ -14,7 +14,7 @@ export function useTransactionFilters(defaultFilters?: TransactionFilters) {
}) })
useEffect(() => { useEffect(() => {
const newSearchParams = filtersToSearchParams(filters) const newSearchParams = filtersToSearchParams(filters, searchParams)
router.push(`?${newSearchParams.toString()}`) router.push(`?${newSearchParams.toString()}`)
}, [filters]) }, [filters])
@@ -26,14 +26,26 @@ export function useTransactionFilters(defaultFilters?: TransactionFilters) {
} }
export function searchParamsToFilters(searchParams: URLSearchParams) { export function searchParamsToFilters(searchParams: URLSearchParams) {
return filters.reduce((acc, filter) => { return filterKeys.reduce((acc, filter) => {
acc[filter] = searchParams.get(filter) || "" acc[filter] = searchParams.get(filter) || ""
return acc 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() const searchParams = new URLSearchParams()
if (currentSearchParams) {
currentSearchParams.forEach((value, key) => {
if (!filterKeys.includes(key)) {
searchParams.set(key, value)
}
})
}
if (filters.search) { if (filters.search) {
searchParams.set("search", filters.search) searchParams.set("search", filters.search)
} else { } else {