From 10e5659e34184ad4318d0f91edf6b26e47a9aace Mon Sep 17 00:00:00 2001
From: selankon <selankon@selankon.xyz>
Date: Mon, 26 Aug 2024 12:43:57 +0200
Subject: [PATCH] Implement use filters hook

---
 src/components/Accounts/List.tsx          | 15 ++++------
 src/components/Pagination/use-filters.tsx | 18 ++++++++++++
 src/components/Process/ProcessList.tsx    | 35 +++++++----------------
 src/router/use-query-params.ts            |  4 ++-
 4 files changed, 36 insertions(+), 36 deletions(-)
 create mode 100644 src/components/Pagination/use-filters.tsx

diff --git a/src/components/Accounts/List.tsx b/src/components/Accounts/List.tsx
index cd56865..400ae2a 100644
--- a/src/components/Accounts/List.tsx
+++ b/src/components/Accounts/List.tsx
@@ -1,15 +1,14 @@
 import { keepPreviousData } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
-import { generatePath, useNavigate, useParams } from 'react-router-dom'
 import { InputSearch } from '~components/Layout/Inputs'
 import { LoadingCards } from '~components/Layout/Loading'
 import { AccountCard } from '~components/Accounts/Card'
 import { useRoutedPagination } from '~components/Pagination/PaginationProvider'
 import { RoutedPagination } from '~components/Pagination/RoutedPagination'
-import { RoutePath } from '~constants'
-import { useOrganizationCount, useOrganizationList } from '~queries/accounts'
+import { useOrganizationList } from '~queries/accounts'
 import { ContentError, NoResultsError } from '~components/Layout/ContentError'
 import useQueryParams from '~src/router/use-query-params'
+import useRoutedPaginationQueryParams from '~components/Pagination/use-filters'
 
 type FilterQueryParams = {
   accountId?: string
@@ -17,18 +16,14 @@ type FilterQueryParams = {
 
 export const AccountsFilter = () => {
   const { t } = useTranslation()
-  const { queryParams, getNewParams } = useQueryParams<FilterQueryParams>()
-  const { setPage } = useRoutedPagination()
-  const setFilters = (filters: Partial<FilterQueryParams>) => {
-    setPage(1, `?${getNewParams(filters).toString()}`)
-  }
+  const { queryParams, setQueryParams } = useRoutedPaginationQueryParams<FilterQueryParams>()
 
   return (
     <InputSearch
       maxW={'300px'}
       placeholder={t('accounts.search_by_org_id')}
       onChange={(value: string) => {
-        setFilters({ accountId: value })
+        setQueryParams({ accountId: value })
       }}
       debounceTime={500}
       initialValue={queryParams.accountId}
@@ -38,7 +33,7 @@ export const AccountsFilter = () => {
 
 export const AccountsList = () => {
   const { page }: { page?: number } = useRoutedPagination()
-  const { queryParams } = useQueryParams<FilterQueryParams>()
+  const { queryParams } = useRoutedPaginationQueryParams<FilterQueryParams>()
   const accountId = queryParams.accountId
 
   const {
diff --git a/src/components/Pagination/use-filters.tsx b/src/components/Pagination/use-filters.tsx
new file mode 100644
index 0000000..e60757f
--- /dev/null
+++ b/src/components/Pagination/use-filters.tsx
@@ -0,0 +1,18 @@
+import useQueryParams, { QueryParamsType } from '~src/router/use-query-params'
+import { useRoutedPagination } from '~components/Pagination/PaginationProvider'
+
+/**
+ * Hook to manage query params and pagination.
+ * When a query param is set, the page is reset to 1.
+ */
+const useRoutedPaginationQueryParams = <T extends QueryParamsType>() => {
+  const { queryParams, getNewParams } = useQueryParams<T>()
+  const { setPage } = useRoutedPagination()
+  const setQueryParams = (filters: Partial<T>) => {
+    setPage(1, `?${getNewParams(filters).toString()}`)
+  }
+
+  return { queryParams, setQueryParams }
+}
+
+export default useRoutedPaginationQueryParams
diff --git a/src/components/Process/ProcessList.tsx b/src/components/Process/ProcessList.tsx
index beafdf8..aba0f68 100644
--- a/src/components/Process/ProcessList.tsx
+++ b/src/components/Process/ProcessList.tsx
@@ -26,18 +26,14 @@ import { ElectionCard } from './Card'
 import { LuListFilter } from 'react-icons/lu'
 import { isValidPartialProcessId } from '~utils/strings'
 import { useState } from 'react'
+import useRoutedPaginationQueryParams from '~components/Pagination/use-filters'
 
 type FilterQueryParams = {
   [K in keyof Omit<FetchElectionsParameters, 'organizationId'>]: string
 }
 
 const PopoverFilter = () => {
-  const { queryParams, getNewParams } = useQueryParams<FilterQueryParams>()
-  const { setPage } = useRoutedPagination()
-
-  const setFilters = (filters: Partial<FilterQueryParams>) => {
-    setPage(1, `?${getNewParams(filters).toString()}`)
-  }
+  const { queryParams, setQueryParams } = useRoutedPaginationQueryParams<FilterQueryParams>()
 
   return (
     <Popover>
@@ -49,19 +45,19 @@ const PopoverFilter = () => {
           <Flex direction={'column'}>
             <Checkbox
               isChecked={queryParams.withResults === 'true'}
-              onChange={(e) => setFilters({ ...queryParams, withResults: e.target.checked ? 'true' : undefined })}
+              onChange={(e) => setQueryParams({ ...queryParams, withResults: e.target.checked ? 'true' : undefined })}
             >
               <Trans i18nKey='process.show_with_results'>Show only processes with results</Trans>
             </Checkbox>
             <Checkbox
               isChecked={queryParams.finalResults === 'true'}
-              onChange={(e) => setFilters({ ...queryParams, finalResults: e.target.checked ? 'true' : undefined })}
+              onChange={(e) => setQueryParams({ ...queryParams, finalResults: e.target.checked ? 'true' : undefined })}
             >
               <Trans i18nKey='process.final_results'>Final results</Trans>
             </Checkbox>
             <Checkbox
               isChecked={queryParams.manuallyEnded === 'true'}
-              onChange={(e) => setFilters({ ...queryParams, manuallyEnded: e.target.checked ? 'true' : undefined })}
+              onChange={(e) => setQueryParams({ ...queryParams, manuallyEnded: e.target.checked ? 'true' : undefined })}
             >
               <Trans i18nKey='process.manually_ended'>Manually ended</Trans>
             </Checkbox>
@@ -75,13 +71,7 @@ const PopoverFilter = () => {
 export const ProcessSearchBox = () => {
   const { t } = useTranslation()
   const [isInvalid, setIsInvalid] = useState(false)
-
-  const { queryParams, getNewParams } = useQueryParams<FilterQueryParams>()
-  const { setPage } = useRoutedPagination()
-
-  const setFilters = (filters: Partial<FilterQueryParams>) => {
-    setPage(1, `?${getNewParams(filters).toString()}`)
-  }
+  const { queryParams, setQueryParams } = useRoutedPaginationQueryParams<FilterQueryParams>()
 
   return (
     <FormControl isInvalid={isInvalid}>
@@ -95,7 +85,7 @@ export const ProcessSearchBox = () => {
               const isInvalid = value !== '' && !isValidPartialProcessId(value)
               setIsInvalid(isInvalid)
               if (!isInvalid) {
-                setFilters({ ...queryParams, electionId: value })
+                setQueryParams({ ...queryParams, electionId: value })
               }
             }}
             initialValue={queryParams.electionId}
@@ -111,12 +101,7 @@ export const ProcessSearchBox = () => {
 
 export const ProcessByTypeFilter = () => {
   const { t } = useTranslation()
-  const { queryParams, getNewParams } = useQueryParams<FilterQueryParams>()
-  const { setPage } = useRoutedPagination()
-
-  const setFilters = (filters: Partial<FilterQueryParams>) => {
-    setPage(1, `?${getNewParams(filters).toString()}`)
-  }
+  const { queryParams, setQueryParams } = useRoutedPaginationQueryParams<FilterQueryParams>()
 
   const currentStatus = queryParams.status
 
@@ -145,7 +130,7 @@ export const ProcessByTypeFilter = () => {
         <Button
           flex={{ base: 'none', md: '1' }}
           key={i}
-          onClick={() => setFilters({ ...queryParams, status: filter.value })}
+          onClick={() => setQueryParams({ ...queryParams, status: filter.value })}
           variant={currentStatus !== filter.value ? 'solid' : 'outline'}
         >
           {filter.label}
@@ -157,7 +142,7 @@ export const ProcessByTypeFilter = () => {
 
 export const ProcessList = () => {
   const { page }: { page?: number } = useRoutedPagination()
-  const { queryParams: processFilters } = useQueryParams<FilterQueryParams>()
+  const { queryParams: processFilters } = useRoutedPaginationQueryParams<FilterQueryParams>()
 
   const { data, isLoading, isFetching, isError, error } = useProcessList({
     filters: {
diff --git a/src/router/use-query-params.ts b/src/router/use-query-params.ts
index 8e96df4..6095ca6 100644
--- a/src/router/use-query-params.ts
+++ b/src/router/use-query-params.ts
@@ -1,7 +1,9 @@
 import { useMemo } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 
-const useQueryParams = <T extends Record<string, string>>() => {
+export type QueryParamsType = Record<string, string>
+
+const useQueryParams = <T extends QueryParamsType>() => {
   const { search } = useLocation()
   const navigate = useNavigate()
   const location = useLocation()