usePagination

'use client'
 
import { useMemo } from 'react'
 
function usePagination({
  total,
  size,
  page
}: {
  total: number
  size: number
  page: number
}) {
  const DOTS = '...'
  const range = (start: any, end: any) => {
    const length = end - start + 1
    return Array.from({ length }, (_, idx) => idx + start)
  }
 
  const paginationRange = useMemo(() => {
    const totalPageCount = Math.ceil(total / size)
    const totalPageNumbers = 6
 
    if (totalPageNumbers >= totalPageCount) {
      return range(1, totalPageCount)
    }
 
    const leftSiblingIndex = Math.max(page - 1, 1)
    const rightSiblingIndex = Math.min(page + 1, totalPageCount)
 
    const shouldShowLeftDots = leftSiblingIndex > 2
    const shouldShowRightDots = rightSiblingIndex < totalPageCount - 2
 
    const firstPageIndex = 1
    const lastPageIndex = totalPageCount
 
    if (!shouldShowLeftDots && shouldShowRightDots) {
      const leftItemCount = 3 + 2
      const leftRange = range(1, leftItemCount)
 
      return [...leftRange, DOTS, totalPageCount]
    }
 
    if (shouldShowLeftDots && !shouldShowRightDots) {
      const rightItemCount = 3 + 2
      const rightRange = range(
        totalPageCount - rightItemCount + 1,
        totalPageCount
      )
      return [firstPageIndex, DOTS, ...rightRange]
    }
 
    if (shouldShowLeftDots && shouldShowRightDots) {
      const middleRange = range(leftSiblingIndex, rightSiblingIndex)
      return [firstPageIndex, DOTS, ...middleRange, DOTS, lastPageIndex]
    }
  }, [total, size, page])
 
  return paginationRange
}
 
export default usePagination

const range = usePagination({ page, total, size })