Using the Pagination Element in Custom Component

aaronksaunderslast year

17

• 

  zed0547last year

  Hey

  @923397761045512202

  
  
  

  Are you referring to the pagination component at the bottom of the list view?

  
  
  

  The one exported from

  ui
• 

  aaronksaunderslast year

  Yes

• 

  zed0547last year

  The numberOfNeighbors represents how many numbers to show I believe

  
  
  

  So it looks like

  < 1 __2__ 3 >

  with numberofNeighbours = 1

  
  
  

  If I'm not mistaken here

• 

  aaronksaunderslast year

  The challenge when using the component is jumping to start or end of the content

• 

  zed0547last year

  As in on the page? Navigating to the top after a page change?

• 

  aaronksaunderslast year

  The event handler doesn’t provide enough information

• 

  zed0547last year

  You mean when clicking the chevrons, right?

• 

  aaronksaunderslast year

  Yes

• 

  zed0547last year

  Are you opposed to using the

  handlePageChange

  function from the

  useListQuery

  hook? It's kind of already done for you

  
  
  

  All you need is the inital request to get the docs, the format of that request already has all the pagination controls you need aside from the hook above

• 

  aaronksaunderslast year

  I am writing an image gallery using list view

• 

  zed0547last year

  Try the

  useListQuery

  hook, you get

  data

  so no need for additional request actually, and that aforementioned hook

• 

  aaronksaunderslast year

  Is that clearly documented somewhere?

• 

  zed0547last year

  https://payloadcms.com/docs/admin/hooks#uselistquery
• 

  aaronksaunderslast year

  I was trying to wrap the other piece of content and just needed to handle the paging issue 😞

  
  
  @654031862146007055

  so i have absolutely no idea how that hook solves my problem?

  
  
  

  'use client'
  
  import { Pagination } from '@payloadcms/ui/elements/Pagination'
  import { useRouter, usePathname } from 'next/navigation'
  import { useListQuery } from '@payloadcms/ui'
  
  const ClientPagination = ({
    page,
    limit,
    totalPages,
    hasNextPage,
    hasPrevPage,
    urlParams,
  }: {
    page: number
    limit: number
    totalPages: number
    hasNextPage: boolean
    hasPrevPage: boolean
    urlParams: URLSearchParams
  }) => {
    const router = useRouter()
    const pathname = usePathname()
  
    const { data, handlePageChange: pageChange } = useListQuery()
    debugger;
  
    /**
     * when the left or right chevron is clicked, the function is called and the newPage === null
     * 
     * @param newPage 
     */
    const handlePageChange = (newPage: number) => {
      debugger
      // Get the current path
      const path = pathname
      // Get the current search params
      const searchParams = new URLSearchParams(window.location.search)
  
      // Update the search params
      searchParams.set('page', newPage?.toString() || '1')
  
      // Push the new search params
      router.push(`${path}?${searchParams.toString()}`)
    }
  
    return (
      <Pagination
        page={page}
        limit={limit}
        totalPages={totalPages}
        numberOfNeighbors={1}
        hasNextPage={hasNextPage}
        hasPrevPage={hasPrevPage}
        onChange={handlePageChange}
      />
    )
  }
  
  export default ClientPagination

• 

  zed0547last year

  Well it looks like you're not even using it, just pass it directly to onChange

  
  
  

  It handles all the default behavior for the list view as is

  
  
  

  You've renamed it to pageChange, but aren't using it anywhere

  
  
  

  const { data, handlePageChange } = useListQuery()
  
  return (
    <Pagination
      page={page}
      limit={limit}
      totalPages={totalPages}
      numberOfNeighbors={1}
      hasNextPage={hasNextPage}
      hasPrevPage={hasPrevPage}
      onChange={handlePageChange}
    />
  )

  
  
  

  Have a look here:

  https://github.com/payloadcms/payload/blob/main/packages/ui/src/views/List/index.tsx#L109
• 

  aaronksaunderslast year

  thanks! i got it resolved

• 

  zed0547last year

  Oh sweet

  
  
  

  Glad you figured it out here!