import { useState } from 'react'

// Token pagination behaves a bit differently from
// index based pagination. This hook aids in that process.

export const useTokenPagination = () => {
  const [pageToken, setPageToken] = useState()
  const [nextPageToken, setNextPageToken] = useState()
  const [previousPageTokens, setPreviousPageTokens] = useState([])
  const [pageIndex, setPageIndex] = useState(0)

  // Since we're using pagination tokens intead of index, we need
  // to be a bit clever with page-like navigation here.
  const nextPage = () => {
    setPageIndex(old => old + 1)
    setPreviousPageTokens(old => [...old, pageToken])
    setPageToken(nextPageToken)
  }

  const previousPage = () => {
    setPageIndex(old => old - 1)
    setPreviousPageTokens(old =>
      [...old]
        .reverse()
        .slice(1)
        .reverse()
    )
    setPageToken(previousPageTokens[previousPageTokens.length - 1])
  }

  const resetPagination = () => {
    setPageToken(undefined)
    setPageIndex(0)
    setNextPageToken(undefined)
    setPreviousPageTokens([])
  }

  const canPreviousPage = previousPageTokens.length
  const canNextPage = nextPageToken

  return {
    setNextPageToken,
    pageToken,
    pageIndex,
    previousPage,
    nextPage,
    canPreviousPage,
    canNextPage,
    resetPagination,
  }
}

@@ -4,20 +4,13 @@
 ort 
-%7B useState %7D
+React
  fro
@@ -201,32 +201,38 @@
 setPageToken%5D = 
+React.
 useState()%0A  con
@@ -266,24 +266,30 @@
 ageToken%5D = 
+React.
 useState()%0A 
@@ -337,24 +337,30 @@
 geTokens%5D = 
+React.
 useState(%5B%5D)
@@ -396,16 +396,22 @@
 ndex%5D = 
+React.
 useState

Clean up useTokenPagination