add react router pagination

Author: mmalfertheiner

package.json

@@ -46,6 +46,7 @@
     "@testing-library/react-hooks": "^5.1.3",
     "@types/jest": "^26.0.22",
     "@types/react": "^17.0.3",
+    "@types/react-router-dom": "^5.1.8",
     "@typescript-eslint/eslint-plugin": "^4.21.0",
     "@typescript-eslint/parser": "^4.21.0",
     "eslint": "^7.23.0",
@@ -54,9 +55,11 @@
     "eslint-plugin-jest": "^24.3.4",
     "eslint-plugin-prettier": "^3.3.1",
     "jest": "^26.6.3",
+    "next": "^11.0.1",
     "prettier": "^2.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^5.2.0",
     "ts-jest": "^26.5.4",
     "typescript": "^4.2.4"
   },

src/__test__/reactRouterPagination.test.tsx

@@ -0,0 +1,92 @@
+import React from 'react'
+import { act, renderHook } from '@testing-library/react-hooks'
+import { BrowserRouter as Router } from 'react-router-dom'
+import { useSearchAndPaginationQueryUrlParameters } from '../reactRouterPagination'
+
+const wrapper: React.FC = ({ children }) => <Router>{children}</Router>
+
+test('should initialize pagination', () => {
+  const { result } = renderHook(
+    () => useSearchAndPaginationQueryUrlParameters(),
+    { wrapper }
+  )
+
+  expect(result.current.page).toBe(0)
+  expect(result.current.search).toBe('')
+  expect(result.current.size).toBe(15)
+})
+
+test('should change page', () => {
+  const { result } = renderHook(
+    () => useSearchAndPaginationQueryUrlParameters(),
+    { wrapper }
+  )
+
+  act(() => {
+    result.current.paginationActions.setPage(2)
+  })
+
+  expect(result.current.page).toBe(2)
+  expect(window.location.search).toBe('?page=2')
+})
+
+test('should change search', () => {
+  const { result } = renderHook(
+    () => useSearchAndPaginationQueryUrlParameters(),
+    { wrapper }
+  )
+
+  act(() => {
+    result.current.searchActions.search('Max')
+  })
+
+  expect(result.current.search).toBe('Max')
+  expect(window.location.search).toBe('?search=Max')
+})
+
+test('on search change -> page should be reset', () => {
+  const { result } = renderHook(
+    () => useSearchAndPaginationQueryUrlParameters(),
+    { wrapper }
+  )
+
+  act(() => {
+    result.current.paginationActions.setPage(2)
+  })
+
+  expect(result.current.page).toBe(2)
+
+  act(() => {
+    result.current.searchActions.search('Max')
+  })
+
+  expect(result.current.search).toBe('Max')
+  expect(result.current.page).toBe(0)
+  expect(window.location.search).toBe('?search=Max')
+})
+
+test('clear pagination should reset search and page', () => {
+  const { result } = renderHook(
+    () => useSearchAndPaginationQueryUrlParameters(),
+    { wrapper }
+  )
+
+  act(() => {
+    result.current.searchActions.search('Max')
+  })
+
+  act(() => {
+    result.current.paginationActions.setPage(2)
+  })
+
+  expect(result.current.search).toBe('Max')
+  expect(result.current.page).toBe(2)
+
+  act(() => {
+    result.current.searchActions.clear()
+  })
+
+  expect(result.current.search).toBe('')
+  expect(result.current.page).toBe(0)
+  expect(window.location.search).toBe('')
+})

src/index.ts

@@ -0,0 +1,83 @@
+import { useRouter } from 'next/router'
+import { useCallback } from 'react'
+
+import { UseSearchQuery, UsePagination, UseSearchAndPagination } from './types'
+import { convert } from './utils'
+
+function getSingleParameterValue(
+  parameter: string | string[] | undefined
+): string | undefined {
+  return Array.isArray(parameter) ? parameter[0] : parameter
+}
+
+export function useSearchQueryUrlParameters(): UseSearchQuery {
+  const router = useRouter()
+
+  return {
+    search: getSingleParameterValue(router.query.search) || '',
+    searchActions: {
+      search: (query: string) => {
+        const params: { page?: string; size?: string; search?: string } = {
+          ...router.query,
+          search: query === '' ? undefined : query,
+        }
+
+        delete params['page']
+        delete params['size']
+
+        router.push({
+          query: params,
+        })
+      },
+      clear: () => {
+        const params = {
+          ...router.query,
+        }
+
+        delete params['search']
+        delete params['page']
+        delete params['size']
+
+        router.push({
+          query: params,
+        })
+      },
+    },
+  }
+}
+
+export function usePaginationQueryUrlParameters(): UsePagination {
+  const router = useRouter()
+
+  const setPage = useCallback(
+    (page: number) => {
+      const params = {
+        ...router.query,
+        page: page.toString(),
+      }
+
+      router.push({
+        query: params,
+      })
+    },
+    [router]
+  )
+
+  return {
+    page: convert(getSingleParameterValue(router.query.page) || null, 0),
+    size: convert(getSingleParameterValue(router.query.size) || null, 15),
+    paginationActions: {
+      setPage,
+    },
+  }
+}
+
+export function useSearchAndPaginationQueryUrlParameters(): UseSearchAndPagination {
+  const searchParameters = useSearchQueryUrlParameters()
+  const paginationParameters = usePaginationQueryUrlParameters()
+
+  return {
+    ...searchParameters,
+    ...paginationParameters,
+  }
+}

src/nextRouterPagination.tsx

@@ -0,0 +1,80 @@
+import { useCallback, useMemo } from 'react'
+import { useHistory, useLocation, useRouteMatch } from 'react-router-dom'
+
+import { UseSearchQuery, UsePagination, UseSearchAndPagination } from './types'
+import { convert } from './utils'
+
+export function useSearchQueryUrlParameters(): UseSearchQuery {
+  const routerHistory = useHistory()
+  const { url: routerUrl } = useRouteMatch()
+  const { search: routeQuery } = useLocation()
+
+  const params = useMemo(() => new URLSearchParams(routeQuery), [routeQuery])
+
+  return {
+    search: params.get('search') || '',
+    searchActions: {
+      search: (query: string) => {
+        if (query === '') {
+          params.delete('search')
+        } else {
+          params.set('search', query)
+        }
+        params.delete('page')
+        params.delete('size')
+
+        routerHistory.push({
+          pathname: routerUrl,
+          search: params.toString(),
+        })
+      },
+      clear: () => {
+        params.delete('search')
+        params.delete('page')
+        params.delete('size')
+
+        routerHistory.push({
+          pathname: routerUrl,
+          search: params.toString(),
+        })
+      },
+    },
+  }
+}
+
+export function usePaginationQueryUrlParameters(): UsePagination {
+  const routerHistory = useHistory()
+  const { search: routeQuery } = useLocation()
+  const { url: routerUrl } = useRouteMatch()
+
+  const params = useMemo(() => new URLSearchParams(routeQuery), [routeQuery])
+
+  const setPage = useCallback(
+    (page: number) => {
+      params.set('page', page.toString())
+      routerHistory.push({
+        pathname: routerUrl,
+        search: params.toString(),
+      })
+    },
+    [params, routerHistory, routerUrl]
+  )
+
+  return {
+    page: convert(params.get('page'), 0),
+    size: convert(params.get('size'), 15),
+    paginationActions: {
+      setPage,
+    },
+  }
+}
+
+export function useSearchAndPaginationQueryUrlParameters(): UseSearchAndPagination {
+  const searchParameters = useSearchQueryUrlParameters()
+  const paginationParameters = usePaginationQueryUrlParameters()
+
+  return {
+    ...searchParameters,
+    ...paginationParameters,
+  }
+}

src/reactRouterPagination.tsx

@@ -0,0 +1,11 @@
+export function convert(parameter: string | null, fallback: number): number {
+  if (parameter !== null) {
+    const converted = parseInt(parameter)
+
+    if (Number.isInteger(converted) && converted > 0) {
+      return converted
+    }
+  }
+
+  return fallback
+}