Skip to main content

Pagination Utils

Simple pagination configuration utilities for consistent pagination behavior across the WorkPayCore frontend application.

Default Configuration​

defaultPaginationOptions​

Default pagination settings used throughout the application.

Properties:

  • page (number): Starting page number (default: 1)
  • recordsPerPage (number): Number of records per page (default: 2)
  • sortingProperty (string): Default sorting field (default: 'created_at')
  • sortedAscending (string): Sort order (default: 'no')

Example:

import { defaultPaginationOptions } from '@/utils/paginationUtil';

// Use default pagination settings
const [pagination, setPagination] = useState(defaultPaginationOptions);

// Override specific settings
const customPagination = {
  ...defaultPaginationOptions,
  recordsPerPage: 10,
  sortingProperty: 'name',
};

Use Cases:

  • Initial pagination state
  • Consistent pagination defaults
  • API request parameters

Pagination Response Structure​

other​

Template for pagination metadata typically returned from backend APIs.

Properties:

  • last_page (number): Total number of pages
  • first_page_url (string): URL for first page
  • last_page_url (string): URL for last page
  • next_page_url (string): URL for next page
  • prev_page_url (string | null): URL for previous page

Example:

// Example API response with pagination metadata
const apiResponse = {
  data: [...],
  pagination: {
    last_page: 5,
    first_page_url: '/api/users?page=1',
    last_page_url: '/api/users?page=5',
    next_page_url: '/api/users?page=3',
    prev_page_url: '/api/users?page=1'
  }
};

Use Cases:

  • API response structure reference
  • Navigation button state management
  • Pagination component props

Usage Examples​

Basic Pagination Hook​

import { defaultPaginationOptions } from '@/utils/paginationUtil';

const usePagination = (initialConfig = {}) => {
  const [pagination, setPagination] = useState({
    ...defaultPaginationOptions,
    ...initialConfig,
  });

  const updatePage = newPage => {
    setPagination(prev => ({ ...prev, page: newPage }));
  };

  const updatePageSize = newSize => {
    setPagination(prev => ({
      ...prev,
      recordsPerPage: newSize,
      page: 1, // Reset to first page
    }));
  };

  const updateSort = (property, ascending = false) => {
    setPagination(prev => ({
      ...prev,
      sortingProperty: property,
      sortedAscending: ascending ? 'yes' : 'no',
    }));
  };

  return {
    pagination,
    updatePage,
    updatePageSize,
    updateSort,
  };
};

Pagination Component​

const PaginationControls = ({ paginationMeta, onPageChange }) => {
  const canGoPrevious = paginationMeta.prev_page_url !== null;
  const canGoNext = paginationMeta.next_page_url !== null;

  return (
    <div className='pagination-controls'>
      <button
        disabled={!canGoPrevious}
        onClick={() => onPageChange('previous')}
      >
        Previous
      </button>

      <span>
        Page {paginationMeta.current_page} of {paginationMeta.last_page}
      </span>

      <button disabled={!canGoNext} onClick={() => onPageChange('next')}>
        Next
      </button>
    </div>
  );
};

API Request with Pagination​

const fetchUsers = async (paginationOptions = defaultPaginationOptions) => {
  const params = new URLSearchParams({
    page: paginationOptions.page.toString(),
    per_page: paginationOptions.recordsPerPage.toString(),
    sort_by: paginationOptions.sortingProperty,
    sort_order: paginationOptions.sortedAscending === 'yes' ? 'asc' : 'desc',
  });

  const response = await fetch(`/api/users?${params}`);
  return response.json();
};

TypeScript Definitions​

export interface PaginationOptions {
  page: number;
  recordsPerPage: number;
  sortingProperty: string;
  sortedAscending: string;
}

export interface PaginationMeta {
  last_page: number;
  first_page_url: string;
  last_page_url: string;
  next_page_url: string;
  prev_page_url: string | null;
}