Implement useRoutedPaginationQueryParams hook

vocdoni · Aug 26, 2024 · 06167aa · 06167aa
1 parent 580709e
commit 06167aa
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 38 deletions.
diff --git a/src/components/Accounts/List.tsx b/src/components/Accounts/List.tsx
@@ -1,34 +1,28 @@
 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 '~src/router/use-query-params'
 
 type FilterQueryParams = {
   accountId?: string
 }
 
 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 +32,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/Process/ProcessList.tsx b/src/components/Process/ProcessList.tsx
@@ -20,24 +20,19 @@ import { ContentError, NoResultsError } from '~components/Layout/ContentError'
 import { useRoutedPagination } from '~components/Pagination/PaginationProvider'
 import { RoutedPagination } from '~components/Pagination/RoutedPagination'
 import { useProcessList } from '~queries/processes'
-import useQueryParams from '~src/router/use-query-params'
 import { isEmpty } from '~utils/objects'
 import { ElectionCard } from './Card'
 import { LuListFilter } from 'react-icons/lu'
 import { isValidPartialProcessId } from '~utils/strings'
 import { useState } from 'react'
+import { useRoutedPaginationQueryParams } from '~src/router/use-query-params'
 
 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 +44,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 +70,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 +84,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 +100,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 +129,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 +141,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
@@ -1,7 +1,10 @@
 import { useMemo } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
+import { useRoutedPagination } from '~components/Pagination/PaginationProvider'
 
-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()
@@ -35,4 +38,18 @@ const useQueryParams = <T extends Record<string, string>>() => {
   return { queryParams, setQueryParams, getNewParams }
 }
 
+/**
+ * Hook to manage query params and pagination.
+ * When a query param is set, the page is reset to 1.
+ */
+export 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 useQueryParams