Enable pagination to only show first pages

Author: Nick-Mazuk

components/__tests__/pagination.test.tsx components/pagination/__tests__/pagination.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
-import { Pagination } from '../pagination'
+import { Pagination } from '..'
 
 const handlePageChange = jest.fn()
 
@@ -119,3 +119,56 @@ test.each(invalidPageCombos)(
         expect(container).toBeEmptyDOMElement()
     }
 )
+
+/* eslint-disable no-magic-numbers -- defining the magic numbers*/
+// current, pageCount, surroundCurrent = 1, expectedButtons, number of separators
+const startOnlyCombos: PageCombo[] = [
+    [1, 10, undefined, [1, 2, 'Next'], 0],
+    [4, 10, undefined, ['Previous', 1, 3, 4, 5, 'Next'], 1],
+    [4, 4, undefined, ['Previous', 1, 3, 4], 1],
+    [2, 3, undefined, ['Previous', 1, 2, 3, 'Next'], 0],
+    [1, 11, 2, [1, 2, 3, 'Next'], 0],
+    [4, 11, 2, ['Previous', 1, 2, 3, 4, 5, 6, 'Next'], 0],
+    [5, 5, 2, ['Previous', 1, 3, 4, 5], 1],
+]
+/* eslint-enable no-magic-numbers -- defining the magic numbers*/
+
+test.each(startOnlyCombos)(
+    'correct buttons are shown. current: "%s", pageCount: "%s", surroundCurrent: "%s", startOnly: "true"',
+    (current, pageCount, surroundCurrent, shownButtons) => {
+        render(
+            <Pagination
+                current={current}
+                pageCount={pageCount}
+                surroundCurrent={surroundCurrent}
+                onPageChange={handlePageChange}
+                startOnly
+            />
+        )
+        const buttons = screen.getAllByRole('button')
+        expect(buttons).toHaveLength(shownButtons.length)
+        for (const button of buttons) {
+            const content = button.textContent
+            if (content === 'Previous' || content === 'Next')
+                expect(shownButtons.includes(content)).toBeTruthy()
+            else if (content) expect(shownButtons.includes(parseInt(content))).toBeTruthy()
+            else expect(false).toBeTruthy()
+        }
+    }
+)
+
+test.each(startOnlyCombos)(
+    'correct separators are shown. current: "%s", pageCount: "%s", surroundCurrent: "%s", startOnly: "true"',
+    (current, pageCount, surroundCurrent, _, separatorCount) => {
+        render(
+            <Pagination
+                current={current}
+                pageCount={pageCount}
+                surroundCurrent={surroundCurrent}
+                onPageChange={handlePageChange}
+                startOnly
+            />
+        )
+        expect(screen.queryAllByText('…')).toHaveLength(separatorCount)
+    }
+)

components/pagination.tsx components/pagination/index.tsx

@@ -1,8 +1,9 @@
 import { Fragment, useCallback } from 'react'
 
-import { Button } from '../elements/button'
-import { ChevronLeft, ChevronRight } from '../elements/icon'
-import { Text } from '../elements/text'
+import { Button } from '../../elements/button'
+import { ChevronLeft, ChevronRight } from '../../elements/icon'
+import { PaginationButton } from './pagination-button'
+import { PaginationSeparator } from './pagination-separator'
 
 type Align = 'left' | 'right' | 'center'
 
@@ -13,44 +14,22 @@ type Props = {
     surroundCurrent?: number
     onPageChange: (newPage: number) => void
     align?: Align
+    startOnly?: boolean
 }
 
-type PaginationButtonProps = {
-    value: number
-    active: boolean
-    onClick: (newPage: number) => void
-}
-
-const PaginationButton = ({ value, active, onClick }: PaginationButtonProps) => {
-    const handleClick = useCallback(() => {
-        onClick(value)
-    }, [onClick, value])
-    return (
-        <Button
-            value={String(value)}
-            size='small'
-            style={active ? 'filled' : 'outlined'}
-            color={active ? 'primary' : 'default'}
-            square
-            onClick={handleClick}
-        />
-    )
-}
-
-const Separator = () => <Text color='text-gray'>…</Text>
-
 type MiddleButtonProps = {
     current: number
     pageCount: number
     surroundCurrent: number
     onPageChange: (newPage: number) => void
+    startOnly: boolean
 }
 
 const getMiddleButtons = (props: MiddleButtonProps): JSX.Element[] => {
     const middleButtons: JSX.Element[] = []
     const lowerPadding = props.current - 2
     const upperPadding = props.pageCount - props.current - 1
-    if (lowerPadding > props.surroundCurrent) middleButtons.push(<Separator />)
+    if (lowerPadding > props.surroundCurrent) middleButtons.push(<PaginationSeparator />)
     const middleStartIndex = Math.max(props.current - props.surroundCurrent, 2)
     for (let index = middleStartIndex; index < props.current; index++) {
         middleButtons.push(
@@ -86,7 +65,8 @@ const getMiddleButtons = (props: MiddleButtonProps): JSX.Element[] => {
         )
     }
 
-    if (upperPadding > props.surroundCurrent) middleButtons.push(<Separator />)
+    if (upperPadding > props.surroundCurrent && !props.startOnly)
+        middleButtons.push(<PaginationSeparator />)
 
     return middleButtons
 }
@@ -108,8 +88,15 @@ export const Pagination = ({
     onPageChange,
     surroundCurrent = 1,
     align = 'center',
+    startOnly = false,
 }: Props): JSX.Element => {
-    const middleButtons = getMiddleButtons({ current, pageCount, onPageChange, surroundCurrent })
+    const middleButtons = getMiddleButtons({
+        current,
+        pageCount,
+        onPageChange,
+        surroundCurrent,
+        startOnly,
+    })
     const handleGoToStart = useCallback(() => onPageChange(current - 1), [current, onPageChange])
     const handleGoToEnd = useCallback(() => onPageChange(current + 1), [current, onPageChange])
 
@@ -138,7 +125,7 @@ export const Pagination = ({
                 {middleButtons.map((button, index) => {
                     return <Fragment key={index}>{button}</Fragment>
                 })}
-                {pageCount !== 1 && (
+                {pageCount !== 1 && (!startOnly || pageCount - current - 1 < surroundCurrent) && (
                     <PaginationButton
                         value={pageCount}
                         active={current === pageCount}

components/pagination/pagination-button.tsx

@@ -0,0 +1,25 @@
+import { useCallback } from 'react'
+
+import { Button } from '../../elements/button'
+
+type Props = {
+    value: number
+    active: boolean
+    onClick: (newPage: number) => void
+}
+
+export const PaginationButton = ({ value, active, onClick }: Props): JSX.Element => {
+    const handleClick = useCallback(() => {
+        onClick(value)
+    }, [onClick, value])
+    return (
+        <Button
+            value={String(value)}
+            size='small'
+            style={active ? 'filled' : 'outlined'}
+            color={active ? 'primary' : 'default'}
+            square
+            onClick={handleClick}
+        />
+    )
+}

components/pagination/pagination-separator.tsx

@@ -0,0 +1,5 @@
+import { Text } from '../../elements/text'
+
+export const PaginationSeparator = (): JSX.Element => {
+    return <Text color='text-gray'>…</Text>
+}