refactor: pagination monitor (#18)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koupr/ui",
-  "version": "1.10.10",
+  "version": "1.10.11",
   "license": "MIT",
   "type": "module",
   "source": "src/index.ts",

src/components/page-pagination.tsx

@@ -35,7 +35,7 @@ export const PagePagination = ({
   isFastForwardDisabled = false,
   isRewindDisabled = false,
 }: PagePaginationProps) => {
-  const { hasPageSwitcher, hasSizeSelector } = usePageMonitor({
+  const { hasPageSwitcher, hasSizeSelector, hasPagination } = usePageMonitor({
     totalElements,
     totalPages,
     steps,
@@ -51,7 +51,7 @@ export const PagePagination = ({
 
   return (
     <>
-      {!hasPageSwitcher && !hasSizeSelector ? null : (
+      {hasPagination ? (
         <div
           className={cx(
             'koupr-flex',
@@ -83,7 +83,7 @@ export const PagePagination = ({
             </Select>
           ) : null}
         </div>
-      )}
+      ) : null}
     </>
   )
 }

src/hooks/page-monitor.ts

@@ -4,13 +4,20 @@ export type UsePageMonitorMonitorOptions = {
   steps: number[]
 }
 
+export type UsePageMonitorMonitorResult = {
+  hasPageSwitcher: boolean
+  hasSizeSelector: boolean
+  hasPagination: boolean
+}
+
 export const usePageMonitor = ({
   totalPages,
   totalElements,
   steps,
-}: UsePageMonitorMonitorOptions) => {
+}: UsePageMonitorMonitorOptions): UsePageMonitorMonitorResult => {
   const hasPageSwitcher = totalPages > 1
   const hasSizeSelector = totalElements > steps[0]
+  const hasPagination = hasPageSwitcher || hasSizeSelector
 
-  return { hasPageSwitcher, hasSizeSelector }
+  return { hasPageSwitcher, hasSizeSelector, hasPagination }
 }

src/hooks/page-pagination.ts

@@ -8,6 +8,14 @@ export type UsePagePaginationOptions = {
   steps?: number[]
 }
 
+export type UsePagePaginationResult = {
+  page: number
+  size: number
+  steps: number[]
+  setPage: (page: number) => void
+  setSize: (size: number) => void
+}
+
 export const usePagePagination = ({
   navigateFn,
   searchFn,
@@ -16,7 +24,7 @@ export const usePagePagination = ({
     namespace: 'main',
   },
   steps = [5, 10, 20, 40, 80, 100],
-}: UsePagePaginationOptions) => {
+}: UsePagePaginationOptions): UsePagePaginationResult => {
   const search = searchFn()
   const queryParams = useMemo(() => new URLSearchParams(search), [search])
   const page = Number(queryParams.get('page')) || 1