Paginator

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

Base class for a paginator.

API

new Paginator(currentStatePair,internalStatePair)

Source
ParameterTypeDescription
*currentStatePairnull
*internalStatePairnull

Methods

Go to the first page.

void

Return the state for the first page

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

State

Return the options to use with Endpoint.execute or Endpoint.prepare. Usually this just involves setting query to the query string parameters for the paginator but can also provide custom headers or different URL resolve arguments.

ParameterTypeDescription
*optionsPaginatorRequestOptions

The existing options for the endpoint

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

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

boolean

Go to the next page.

void

Return the state for the next page

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

One of the following:

State

OR

null

Go to the previous page.

void

Return the state for the previous page

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

One of the following:

State

OR

null

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.

void

This is called when an Endpoint has resolved and is passed the response from the endpoint. This is used to update the relevant paginator state - eg. the total number of records, next & previous cursors etc.

ParameterTypeDescription
*responseRecord

The response as returned by the endpoint this paginator is used with.

void

Properties

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