refactor: filter hooks

SiaFoundation · Feb 21, 2024 · 94e5160 · 94e5160
1 parent f01c2e9
commit 94e5160
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 51 deletions.
diff --git a/libs/design-system/src/hooks/useClientFilters.ts b/libs/design-system/src/hooks/useClientFilters.ts
@@ -1,7 +1,7 @@
 'use client'
 
-import { usePagesRouter } from '@siafoundation/next'
 import { useCallback, useState } from 'react'
+import { useResetPagination } from './useResetPagination'
 
 export type ClientFilterItem<Datum> = {
   id: string
@@ -11,52 +11,40 @@ export type ClientFilterItem<Datum> = {
 }
 
 export function useClientFilters<Datum>() {
-  const router = usePagesRouter()
   const [filters, _setFilters] = useState<ClientFilterItem<Datum>[]>([])
+  const resetPaginationParams = useResetPagination()
 
   const setFilter = useCallback(
     (item: ClientFilterItem<Datum>) => {
       _setFilters((filters) => {
         const nextFilters = filters.filter((f) => f.id !== item.id)
         return nextFilters.concat(item)
       })
-      // remove any limit and offset
-      router.replace({
-        query: {},
-      })
+      resetPaginationParams()
     },
-    [router, _setFilters]
+    [_setFilters, resetPaginationParams]
   )
 
   const resetFilters = useCallback(() => {
     _setFilters([])
-    // remove any limit and offset
-    router.replace({
-      query: {},
-    })
-  }, [router, _setFilters])
+    resetPaginationParams()
+  }, [_setFilters, resetPaginationParams])
 
   const removeFilter = useCallback(
     (id: string) => {
       _setFilters((filters) => filters.filter((f) => f.id !== id))
-      // remove any limit and offset
-      router.replace({
-        query: {},
-      })
+      resetPaginationParams()
     },
-    [router, _setFilters]
+    [_setFilters, resetPaginationParams]
   )
 
   const removeLastFilter = useCallback(() => {
     if (!filters.length) {
       return
     }
     _setFilters((filters) => filters.slice(0, -1))
-    // remove any limit and offset
-    router.replace({
-      query: {},
-    })
-  }, [router, _setFilters, filters])
+    resetPaginationParams()
+  }, [_setFilters, filters, resetPaginationParams])
 
   return {
     filters,

diff --git a/libs/design-system/src/hooks/useResetPagination.ts b/libs/design-system/src/hooks/useResetPagination.ts
@@ -0,0 +1,37 @@
+'use client'
+
+import { useAppRouter, usePathname, useSearchParams } from '@siafoundation/next'
+import { useCallback } from 'react'
+
+export type ServerFilterItem = {
+  id: string
+  label: string
+  value?: string
+  values?: string[]
+  bool?: boolean
+}
+
+export function useResetPagination() {
+  const router = useAppRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  return useCallback(() => {
+    // These can be undefined when the page is still initializing
+    if (!router || !pathname) {
+      return
+    }
+    // remove any limit, offset, or marker
+    const query = new URLSearchParams(searchParams)
+    const currParams = query.toString()
+    query.delete('limit')
+    query.delete('offset')
+    query.delete('marker')
+    const nextParams = query.toString()
+    const currPath = currParams ? `${pathname}?${currParams}` : pathname
+    const nextPath = nextParams ? `${pathname}?${nextParams}` : pathname
+    if (nextPath !== currPath) {
+      router.replace(nextPath)
+    }
+  }, [router, searchParams, pathname])
+}
diff --git a/libs/design-system/src/hooks/useServerFilters.ts b/libs/design-system/src/hooks/useServerFilters.ts
@@ -1,7 +1,7 @@
 'use client'
 
-import { useAppRouter, usePathname, useSearchParams } from '@siafoundation/next'
 import { useCallback, useState } from 'react'
+import { useResetPagination } from './useResetPagination'
 
 export type ServerFilterItem = {
   id: string
@@ -12,59 +12,40 @@ export type ServerFilterItem = {
 }
 
 export function useServerFilters() {
-  const router = useAppRouter()
-  const pathname = usePathname()
-  const searchParams = useSearchParams()
   const [filters, _setFilters] = useState<ServerFilterItem[]>([])
-
-  const removePagination = useCallback(() => {
-    // These can be undefined when the page is still initializing
-    if (!router || !pathname) {
-      return
-    }
-    // remove any limit and offset
-    const query = new URLSearchParams(searchParams)
-    query.delete('limit')
-    query.delete('offset')
-    const str = query.toString()
-    if (str) {
-      router.replace(`${pathname}?${str}`)
-    } else {
-      router.replace(pathname)
-    }
-  }, [router, searchParams, pathname])
+  const resetPaginationParams = useResetPagination()
 
   const setFilter = useCallback(
     (item: ServerFilterItem) => {
       _setFilters((filters) => {
         const nextFilters = filters.filter((f) => f.id !== item.id)
         return nextFilters.concat(item)
       })
-      removePagination()
+      resetPaginationParams()
     },
-    [_setFilters, removePagination]
+    [_setFilters, resetPaginationParams]
   )
 
   const resetFilters = useCallback(() => {
     _setFilters([])
-    removePagination()
-  }, [_setFilters, removePagination])
+    resetPaginationParams()
+  }, [_setFilters, resetPaginationParams])
 
   const removeFilter = useCallback(
     (id: string) => {
       _setFilters((filters) => filters.filter((f) => f.id !== id))
-      removePagination()
+      resetPaginationParams()
     },
-    [_setFilters, removePagination]
+    [_setFilters, resetPaginationParams]
   )
 
   const removeLastFilter = useCallback(() => {
     if (!filters.length) {
       return
     }
     _setFilters((filters) => filters.slice(0, -1))
-    removePagination()
-  }, [filters, _setFilters, removePagination])
+    resetPaginationParams()
+  }, [filters, _setFilters, resetPaginationParams])
 
   return {
     filters,