Presto

PageNumberPaginator

Source
import { PageNumberPaginator } from "@prestojs/util";

Page number based paginator

Expects a total or count key and optional pageSize key in the response. total or count should be the total number of records available.

If your backend differs from this (for example by storing the values in different named keys or in headers instead of the response body) you can handle that by extending this class and implementing getPaginationState or by passing getPaginationState to usePaginator.

API

Constructor

new PageNumberPaginator(currentStatePair,internalStatePair)

Source
ParameterTypeDescription
*currentStatePairnull
*internalStatePairnull

Methods

first()

Source

Go to the first page.

Returns
void

firstState()

Source

Return the state for the first page

Does not transition state. To transition state call first instead.

Returns
PageNumberPaginationState
KeyTypeDescription
pagestring|number
pageSizestring|number

getRequestInit(props)

Source

Adds page and pageSize into query options passed through to the endpoint

ParameterTypeDescription
*props.optionsoptions
*props.queryany
Returns
PaginatorRequestOptions
KeyTypeDescription
headersHeadersInit|Record

Any headers to add to the request. You can unset default headers that might be specified in the default Endpoint.defaultConfig.requestInit by setting the value to undefined.

queryRecord

Any query request parameters

urlArgsRecord

Any arguments for the URL

hasNextPage()

Source

Returns true if there's more results after the current page

Returns
boolean

last()

Source

Go to the last page. If the last page isn't yet known (eg. results haven't yet been returned) then null will be returned.

If the last page is not yet known because results haven't been returned this function does nothing.

Returns
void

lastState()

Source

Return the state for the first page

Does not transition state. To transition state call last instead.

Returns

One of the following:

PageNumberPaginationState
KeyTypeDescription
pagestring|number
pageSizestring|number

OR

null

next()

Source

Go to the next page.

Returns
void

nextState()

Source

Return the state for the next page

Does not transition state. To transition state call next instead.

Returns
PageNumberPaginationState
KeyTypeDescription
pagestring|number
pageSizestring|number

pageSizeState(pageSize)

Source

Return the state for the specified page size

Does not transition state. To transition state call setPageSize instead.

ParameterTypeDescription
*pageSizenull|number
Returns
PageNumberPaginationState
KeyTypeDescription
pagestring|number
pageSizestring|number

pageState(page)

Source

Return the state for the specified page number

Does not transition state. To transition state call setPage instead.

ParameterTypeDescription
*pagenumber
Returns
PageNumberPaginationState
KeyTypeDescription
pagestring|number
pageSizestring|number

previous()

Source

Go to the previous page.

Returns
void

previousState()

Source

Return the state for the previous page

Does not transition state. To transition state call previous instead.

Returns
PageNumberPaginationState
KeyTypeDescription
pagestring|number
pageSizestring|number

setPage(page)

Source

Change to the specified page

ParameterTypeDescription
*pagenumber
Returns
void

setPageSize(pageSize)

Source

Change to the specified page size

ParameterTypeDescription
*pageSizenull|number
Returns
void

setResponse(props)

Source

Sets the internal data based on response. Expects total and optionally pageSize to be in response data.

See getPaginationState for how to customise this if your backend implementation differs.

ParameterTypeDescription
*props.pageSizenumber
*props.totalnumber
Returns
void

Static Methods

getPaginationState(requestDetails)

Source

Expects decodedBody to include a key results which should be an array of return records and a variable count or total that contains the total number of records available.

ParameterTypeDescription
requestDetails.decodedBodyany

The value returned by decodedBody. See Endpoint.execute.

This may be a sub-key of the data returned by Endpoint.execute, eg. if the path option is used in paginationMiddleware. eg. If decodedBody from the Endpoint was

{
    users: {
        count: 10,
        results: [...],
    }
    extraDetails: {...}
}

and paginationMiddleware was used with path: 'users' then decodedBody would be:

{
    count: 10,
    results: [...]
}
requestDetails.queryRecord

Any query string parameters

requestDetails.responseResponse

The Response object, if available

*requestDetails.urlstring

Resolved URL

requestDetails.urlArgsRecord

Any arguments used to resolve URL

Returns

One of the following:

Record

OR

false

Properties

page: number|null

The current page

pageSize: number|null

The current page size (if known).

total: number|null

The total number of results available on the backend

totalPages: number|null

The total number of pages

Inherited Methods

replaceStateControllers(currentStatePair,internalStatePair)

Source

Paginator receives 2 tuples of a state and state setter pair. This is expected to match the same interface as useState in React. The following is a valid simple usage:

const paginator = new Paginator(useState(), useState());

Note that we can also pass the state controllers in via replaceStateControllers rather than in the constructor. This is so we can memoize the Paginator instance which is desirable when using the paginator as a dependency to React hooks.

As state is passed in and managed external to the class be aware that any data stored on the class instance will be lost unless written with setCurrentState or setInternalState. This design is a compromise between allowing a clear interface for how paginators should be defined and allowing the state to be managed externally (eg. using React state).

ParameterTypeDescription
*currentStatePairany

The state object and setter (eg. from useState) that is used to store and transition pagination state. Using this you can do things like easily store state in the URL (eg. using useUrlQueryState) or other data sources.

*internalStatePairany

The state object and setter that is used for internal state. Internal state is stored separately as it does not need to be restored (eg. if you refresh the page). It is used to store things like the total number of results or the current cursor. Passing useState here is fine.

Returns
void

Inherited Properties

currentState: PageNumberPaginationState

internalState:

responseIsSet: boolean

True once setResponse has been called and pagination state is known.

setCurrentState:
Function

setInternalState:
Function