mister-webdev / movie-app

src/feature/pagination/usePagination.ts

import { useMemo } from 'react'


import { IPagination } from './types'


const DOTS = 0


const range = (start: number, end: number) => {

  const length = end - start + 1

  return Array.from({ length }, (_, idx) => idx + start)

}


const usePagination = ({

  totalPages,

  siblingCount = 1,

  currentPage,

}: IPagination) => {

  const paginationRange = useMemo(() => {

    const totalPageNumbers = siblingCount + 5


    if (totalPageNumbers >= totalPages) {

      return range(1, totalPages)

    }


    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1)

    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages)


    const showLeftDots = leftSiblingIndex > 2

    const showRightDots = rightSiblingIndex < totalPages - 2


    const firstPageIndex = 1

    const lastPageIndex = totalPages


    if (!showLeftDots && showRightDots) {

      const leftItemCount = 3 + 2 * siblingCount

      const leftRange = range(1, leftItemCount)


      return [...leftRange, DOTS, totalPages]

    }


    if (showLeftDots && !showRightDots) {

      const rightItemCount = 3 + 2 * siblingCount

      const rightRange = range(totalPages - rightItemCount + 1, totalPages)


      return [firstPageIndex, DOTS, ...rightRange]

    }


    if (showLeftDots && showRightDots) {

      let middleRange = range(leftSiblingIndex, rightSiblingIndex)

'middleRange' is never reassigned. Use 'const' instead.

      return [firstPageIndex, DOTS, ...middleRange, DOTS, lastPageIndex]

    }

  }, [currentPage, totalPages, siblingCount])


  return paginationRange

}


export { usePagination, DOTS }