Skip to content

Introducing display number #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alexlanz merged 2 commits into from
May 27, 2021
Merged

Introducing display number #4

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5a4f8ac
Introducing display number
alexlanz May 27, 2021
458c782
Triple equals
alexlanz May 27, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 13 additions & 8 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ Second, you can call the calculate function by passing the following information
- `size`: The amount of items shown per page
- `total`: The amount of total items in the list/collection
- `config`: A configuration object containing the following possible configuration values:
- `firstPage`: The first page of the pagination (default: 1)
- `indexType`: The starting point of the pagination (default: IndexType.ONE_BASED)
- `maxPages`: The maximum amount of pages that should be shown (default: 5)

In return, you receive an object with all relevant information:
Expand All @@ -43,32 +43,37 @@ This would return the following object:
```json
{
"previous": {
"number": 1,
"indexNumber": 1,
"isDisabled": true
},
"next": {
"number": 2,
"indexNumber": 2,
"isDisabled": false
},
"pages": [
{
"number": 1,
"indexNumber": 1,
"displayNumber": 1,
"isCurrent": true
},
{
"number": 2,
"indexNumber": 2,
"displayNumber": 2,
"isCurrent": false
},
{
"number": 3,
"indexNumber": 3,
"displayNumber": 3,
"isCurrent": false
},
{
"number": 4,
"indexNumber": 4,
"displayNumber": 4,
"isCurrent": false
},
{
"number": 5,
"indexNumber": 5,
"displayNumber": 5,
"isCurrent": false
}
]
Expand Down
32 changes: 20 additions & 12 deletions ...st__/pagination-with-first-page-1.test.ts → ...ination-with-one-based-index-type.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,14 @@ it('should return only a few pages', () => {
expect(pagination).not.toBeNull()
expect(pagination?.pages).toHaveLength(3)

expect(pagination?.pages[0].number).toBe(1)
expect(pagination?.pages[0].indexNumber).toBe(1)
expect(pagination?.pages[0].displayNumber).toBe(1)
expect(pagination?.pages[0].isCurrent).toBeFalsy()
expect(pagination?.pages[1].number).toBe(2)
expect(pagination?.pages[1].indexNumber).toBe(2)
expect(pagination?.pages[1].displayNumber).toBe(2)
expect(pagination?.pages[1].isCurrent).toBeTruthy()
expect(pagination?.pages[2].number).toBe(3)
expect(pagination?.pages[2].indexNumber).toBe(3)
expect(pagination?.pages[2].displayNumber).toBe(3)
expect(pagination?.pages[2].isCurrent).toBeFalsy()
})
it('should return the maximum number of pages', () => {
Expand All @@ -36,15 +39,20 @@ it('should return the maximum number of pages', () => {
expect(pagination).not.toBeNull()
expect(pagination?.pages).toHaveLength(5)

expect(pagination?.pages[0].number).toBe(3)
expect(pagination?.pages[0].indexNumber).toBe(3)
expect(pagination?.pages[0].displayNumber).toBe(3)
expect(pagination?.pages[0].isCurrent).toBeFalsy()
expect(pagination?.pages[1].number).toBe(4)
expect(pagination?.pages[1].indexNumber).toBe(4)
expect(pagination?.pages[1].displayNumber).toBe(4)
expect(pagination?.pages[1].isCurrent).toBeFalsy()
expect(pagination?.pages[2].number).toBe(5)
expect(pagination?.pages[2].indexNumber).toBe(5)
expect(pagination?.pages[2].displayNumber).toBe(5)
expect(pagination?.pages[2].isCurrent).toBeTruthy()
expect(pagination?.pages[3].number).toBe(6)
expect(pagination?.pages[3].indexNumber).toBe(6)
expect(pagination?.pages[3].displayNumber).toBe(6)
expect(pagination?.pages[3].isCurrent).toBeFalsy()
expect(pagination?.pages[4].number).toBe(7)
expect(pagination?.pages[4].indexNumber).toBe(7)
expect(pagination?.pages[4].displayNumber).toBe(7)
expect(pagination?.pages[4].isCurrent).toBeFalsy()
})
it('should disable the previous link', () => {
Expand All @@ -55,10 +63,10 @@ it('should disable the previous link', () => {

expect(pagination).not.toBeNull()

expect(pagination?.previous.number).toBe(1)
expect(pagination?.previous.indexNumber).toBe(1)
expect(pagination?.previous.isDisabled).toBeTruthy()

expect(pagination?.next.number).toBe(2)
expect(pagination?.next.indexNumber).toBe(2)
expect(pagination?.next.isDisabled).toBeFalsy()

expect(pagination?.pages[0].isCurrent).toBeTruthy()
Expand All @@ -72,10 +80,10 @@ it('should disable the next link', () => {

expect(pagination).not.toBeNull()

expect(pagination?.previous.number).toBe(1)
expect(pagination?.previous.indexNumber).toBe(1)
expect(pagination?.previous.isDisabled).toBeFalsy()

expect(pagination?.next.number).toBe(2)
expect(pagination?.next.indexNumber).toBe(2)
expect(pagination?.next.isDisabled).toBeTruthy()

expect(pagination?.pages[0].isCurrent).toBeFalsy()
Expand Down
52 changes: 34 additions & 18 deletions ...st__/pagination-with-first-page-0.test.ts → ...nation-with-zero-based-index-type.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,34 @@
import { calculatePagination } from '../index'
import { calculatePagination, IndexType } from '../index'

it('should return no pagination if not enough items are given', () => {
const page = 0
const size = 5
const total = 2
const pagination = calculatePagination(page, size, total, { firstPage: 0 })
const pagination = calculatePagination(page, size, total, {
indexType: IndexType.ZERO_BASED,
})

expect(pagination).toBeNull()
})
it('should return only a few pages', () => {
const page = 1
const size = 5
const total = 15
const pagination = calculatePagination(page, size, total, { firstPage: 0 })
const pagination = calculatePagination(page, size, total, {
indexType: IndexType.ZERO_BASED,
})

expect(pagination).not.toBeNull()
expect(pagination?.pages).toHaveLength(3)

expect(pagination?.pages[0].number).toBe(0)
expect(pagination?.pages[0].indexNumber).toBe(0)
expect(pagination?.pages[0].displayNumber).toBe(1)
expect(pagination?.pages[0].isCurrent).toBeFalsy()
expect(pagination?.pages[1].number).toBe(1)
expect(pagination?.pages[1].indexNumber).toBe(1)
expect(pagination?.pages[1].displayNumber).toBe(2)
expect(pagination?.pages[1].isCurrent).toBeTruthy()
expect(pagination?.pages[2].number).toBe(2)
expect(pagination?.pages[2].indexNumber).toBe(2)
expect(pagination?.pages[2].displayNumber).toBe(3)
expect(pagination?.pages[2].isCurrent).toBeFalsy()
})
it('should return the maximum number of pages', () => {
Expand All @@ -30,36 +37,43 @@ it('should return the maximum number of pages', () => {
const total = 50
const maxPages = 5
const pagination = calculatePagination(page, size, total, {
firstPage: 0,
indexType: IndexType.ZERO_BASED,
maxPages: maxPages,
})

expect(pagination).not.toBeNull()
expect(pagination?.pages).toHaveLength(5)

expect(pagination?.pages[0].number).toBe(2)
expect(pagination?.pages[0].indexNumber).toBe(2)
expect(pagination?.pages[0].displayNumber).toBe(3)
expect(pagination?.pages[0].isCurrent).toBeFalsy()
expect(pagination?.pages[1].number).toBe(3)
expect(pagination?.pages[1].indexNumber).toBe(3)
expect(pagination?.pages[1].displayNumber).toBe(4)
expect(pagination?.pages[1].isCurrent).toBeFalsy()
expect(pagination?.pages[2].number).toBe(4)
expect(pagination?.pages[2].indexNumber).toBe(4)
expect(pagination?.pages[2].displayNumber).toBe(5)
expect(pagination?.pages[2].isCurrent).toBeTruthy()
expect(pagination?.pages[3].number).toBe(5)
expect(pagination?.pages[3].indexNumber).toBe(5)
expect(pagination?.pages[3].displayNumber).toBe(6)
expect(pagination?.pages[3].isCurrent).toBeFalsy()
expect(pagination?.pages[4].number).toBe(6)
expect(pagination?.pages[4].indexNumber).toBe(6)
expect(pagination?.pages[4].displayNumber).toBe(7)
expect(pagination?.pages[4].isCurrent).toBeFalsy()
})
it('should disable the previous link', () => {
const page = 0
const size = 5
const total = 10
const pagination = calculatePagination(page, size, total, { firstPage: 0 })
const pagination = calculatePagination(page, size, total, {
indexType: IndexType.ZERO_BASED,
})

expect(pagination).not.toBeNull()

expect(pagination?.previous.number).toBe(0)
expect(pagination?.previous.indexNumber).toBe(0)
expect(pagination?.previous.isDisabled).toBeTruthy()

expect(pagination?.next.number).toBe(1)
expect(pagination?.next.indexNumber).toBe(1)
expect(pagination?.next.isDisabled).toBeFalsy()

expect(pagination?.pages[0].isCurrent).toBeTruthy()
Expand All @@ -69,14 +83,16 @@ it('should disable the next link', () => {
const page = 1
const size = 5
const total = 10
const pagination = calculatePagination(page, size, total, { firstPage: 0 })
const pagination = calculatePagination(page, size, total, {
indexType: IndexType.ZERO_BASED,
})

expect(pagination).not.toBeNull()

expect(pagination?.previous.number).toBe(0)
expect(pagination?.previous.indexNumber).toBe(0)
expect(pagination?.previous.isDisabled).toBeFalsy()

expect(pagination?.next.number).toBe(1)
expect(pagination?.next.indexNumber).toBe(1)
expect(pagination?.next.isDisabled).toBeTruthy()

expect(pagination?.pages[0].isCurrent).toBeFalsy()
Expand Down
27 changes: 18 additions & 9 deletions src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
enum IndexType {
ZERO_BASED,
ONE_BASED,
}

const calculateVisiblePages = (
page: number,
firstPage: number,
Expand Down Expand Up @@ -48,52 +53,56 @@ const calculatePagination = (
size: number,
total: number,
config?: {
firstPage?: number
indexType?: IndexType
maxPages?: number
}
): {
previous: {
number: number
indexNumber: number
isDisabled: boolean
}
next: {
number: number
indexNumber: number
isDisabled: boolean
}
pages: {
number: number
indexNumber: number
displayNumber: number
isCurrent: boolean
}[]
} | null => {
if (total <= size) {
return null
}

const firstPage = config?.firstPage ?? 1
const indexType = config?.indexType ?? IndexType.ONE_BASED
const maxPages = config?.maxPages ?? 5

const firstPage = indexType == IndexType.ZERO_BASED ? 0 : 1

@mmalfertheiner mmalfertheiner May 27, 2021

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you think about using triple equal here?

const lastPage = Math.ceil(total / size) + (firstPage - 1)
const isCurrentTheFirstPage = page === firstPage
const isCurrentTheLastPage = page === lastPage

return {
previous: {
number: isCurrentTheFirstPage ? firstPage : page - 1,
indexNumber: isCurrentTheFirstPage ? firstPage : page - 1,
isDisabled: isCurrentTheFirstPage,
},
next: {
number: isCurrentTheLastPage ? lastPage : page + 1,
indexNumber: isCurrentTheLastPage ? lastPage : page + 1,
isDisabled: isCurrentTheLastPage,
},
pages: calculateVisiblePages(page, firstPage, lastPage, maxPages).map(
(visiblePage) => {
return {
number: visiblePage,
indexNumber: visiblePage,
displayNumber:
indexType == IndexType.ZERO_BASED ? visiblePage + 1 : visiblePage,
isCurrent: visiblePage === page,
}
}
),
}
}

export { calculatePagination }
export { calculatePagination, IndexType }