support changing default values for indexType and pageSize

Author: mmalfertheiner

src/__test__/inMemoryPagination.test.ts

@@ -1,5 +1,6 @@
 import { act, renderHook } from '@testing-library/react-hooks'
 import { useSearchAndPagination } from '../inMemoryPagination'
+import { IndexType } from '../types'
 
 test('should initialize pagination', () => {
   const { result } = renderHook(() => useSearchAndPagination())
@@ -67,3 +68,12 @@ test('clear pagination should reset search and page', () => {
   expect(result.current.search).toBe('')
   expect(result.current.page).toBe(0)
 })
+
+test('change default parameters', () => {
+  const { result } = renderHook(() =>
+    useSearchAndPagination({ indexType: IndexType.ONE_BASED, pageSize: 10 })
+  )
+
+  expect(result.current.page).toBe(1)
+  expect(result.current.size).toBe(10)
+})

src/__test__/nextRouterPagination.test.tsx

@@ -4,6 +4,7 @@ import { act, renderHook } from '@testing-library/react-hooks'
 import router from 'next/router'
 
 import { useSearchAndPagination } from '../nextRouterPagination'
+import { IndexType } from '../types'
 
 jest.mock('next/router', () => require('next-router-mock'))
 
@@ -80,3 +81,12 @@ test('clear pagination should reset search and page', () => {
   expect(router.query.search).toBeUndefined()
   expect(router.query.page).toBeUndefined()
 })
+
+test('change default parameters', () => {
+  const { result } = renderHook(() =>
+    useSearchAndPagination({ indexType: IndexType.ONE_BASED, pageSize: 10 })
+  )
+
+  expect(result.current.page).toBe(1)
+  expect(result.current.size).toBe(10)
+})

src/__test__/reactRouterPagination.test.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { act, renderHook } from '@testing-library/react-hooks'
 import { BrowserRouter as Router } from 'react-router-dom'
 import { useSearchAndPagination } from '../reactRouterPagination'
+import { IndexType } from '../types'
 
 const wrapper: React.FC = ({ children }) => <Router>{children}</Router>
 
@@ -75,3 +76,14 @@ test('clear pagination should reset search and page', () => {
   expect(result.current.page).toBe(0)
   expect(window.location.search).toBe('')
 })
+
+test('change default parameters', () => {
+  const { result } = renderHook(
+    () =>
+      useSearchAndPagination({ indexType: IndexType.ONE_BASED, pageSize: 10 }),
+    { wrapper }
+  )
+
+  expect(result.current.page).toBe(1)
+  expect(result.current.size).toBe(10)
+})

src/inMemoryPagination.tsx

@@ -1,11 +1,15 @@
-import { useState, useCallback, useMemo } from 'react'
-import { UseSearchAndPagination } from './types'
+import { useCallback, useMemo, useState } from 'react'
+import { IndexType, IUseSearchAndPagination } from './types'
 
-const useSearchAndPagination = (): UseSearchAndPagination => {
+export const useSearchAndPagination: IUseSearchAndPagination = function (
+  config
+) {
+  const { indexType = IndexType.ZERO_BASED, pageSize = 15 } = config || {}
+  const firstPage = indexType === IndexType.ZERO_BASED ? 0 : 1
   const initialState = useMemo(
     () => ({
-      page: 0,
-      size: 15,
+      page: firstPage,
+      size: pageSize,
       searchQuery: '',
     }),
     []
@@ -49,5 +53,3 @@ const useSearchAndPagination = (): UseSearchAndPagination => {
     size: state.size,
   }
 }
-
-export { useSearchAndPagination }

src/nextRouterPagination.tsx

@@ -1,7 +1,7 @@
 import { useRouter } from 'next/router'
 import { useCallback } from 'react'
 
-import { UseSearchAndPagination } from './types'
+import { IndexType, IUseSearchAndPagination } from './types'
 import { convert } from './utils'
 
 function getSingleParameterValue(
@@ -10,7 +10,10 @@ function getSingleParameterValue(
   return Array.isArray(parameter) ? parameter[0] : parameter
 }
 
-export function useSearchAndPagination(): UseSearchAndPagination {
+export const useSearchAndPagination: IUseSearchAndPagination = function (
+  config
+) {
+  const { indexType = IndexType.ZERO_BASED, pageSize = 15 } = config || {}
   const router = useRouter()
 
   const setPage = useCallback(
@@ -60,8 +63,11 @@ export function useSearchAndPagination(): UseSearchAndPagination {
 
   return {
     search: getSingleParameterValue(router.query.search) || '',
-    page: convert(getSingleParameterValue(router.query.page) || null, 0),
-    size: convert(getSingleParameterValue(router.query.size) || null, 15),
+    page: convert(
+      getSingleParameterValue(router.query.page) || null,
+      indexType === IndexType.ZERO_BASED ? 0 : 1
+    ),
+    size: convert(getSingleParameterValue(router.query.size) || null, pageSize),
     actions: {
       search,
       clear,

src/reactRouterPagination.tsx

@@ -1,10 +1,13 @@
 import { useCallback, useMemo } from 'react'
 import { useHistory, useLocation, useRouteMatch } from 'react-router-dom'
 
-import { UseSearchAndPagination } from './types'
+import { IndexType, IUseSearchAndPagination } from './types'
 import { convert } from './utils'
 
-export function useSearchAndPagination(): UseSearchAndPagination {
+export const useSearchAndPagination: IUseSearchAndPagination = function (
+  config
+) {
+  const { indexType = IndexType.ZERO_BASED, pageSize = 15 } = config || {}
   const routerHistory = useHistory()
   const { url: routerUrl } = useRouteMatch()
   const { search: routeQuery } = useLocation()
@@ -53,8 +56,11 @@ export function useSearchAndPagination(): UseSearchAndPagination {
 
   return {
     search: params.get('search') || '',
-    page: convert(params.get('page'), 0),
-    size: convert(params.get('size'), 15),
+    page: convert(
+      params.get('page'),
+      indexType === IndexType.ZERO_BASED ? 0 : 1
+    ),
+    size: convert(params.get('size'), pageSize),
     actions: {
       search,
       clear,

src/types.ts

@@ -1,3 +1,13 @@
+export enum IndexType {
+  ZERO_BASED = 0,
+  ONE_BASED = 1,
+}
+
+export type Config = {
+  indexType?: IndexType
+  pageSize?: number
+}
+
 export type Actions = {
   search: (query: string) => void
   clear: () => void
@@ -10,3 +20,7 @@ export type UseSearchAndPagination = {
   size: number
   actions: Actions
 }
+
+export interface IUseSearchAndPagination {
+  (config?: Config): UseSearchAndPagination
+}