website/hooks/usePagination.ts

import { useState, useRef, useCallback } from 'react'
import type { AxiosInstance } from 'axios'
import type { FetchState } from 'react-component-form'

import type { CacheKey } from '../tools/cache'
import { getPaginationCache, savePaginationCache } from '../tools/cache'

export interface Query {
  [key: string]: string
}
export type NextPageAsync = (query?: Query) => Promise<void>
export type NextPage = (query?: Query, callback?: () => void) => void

export interface UsePaginationOptions {
  api: AxiosInstance
  url: string
  inverse?: boolean
  cacheKey?: CacheKey
}

export interface PaginationItem {
  id: number
}

export type SetItems<T> = React.Dispatch<React.SetStateAction<T[]>>

export interface UsePaginationResult<T> {
  items: T[]
  nextPage: NextPage
  resetPagination: () => void
  hasMore: boolean
  setItems: SetItems<T>
}

export const usePagination = <T extends PaginationItem>(
  options: UsePaginationOptions
): UsePaginationResult<T> => {
  const { api, url, inverse = false, cacheKey } = options

  const [items, setItems] = useState<T[]>([])
  const [hasMore, setHasMore] = useState(true)
  const fetchState = useRef<FetchState>('idle')
  const afterId = useRef<number | null>(null)

  const nextPageAsync: NextPageAsync = useCallback(
    async (query) => {
      if (fetchState.current !== 'idle') {
        return
      }
      fetchState.current = 'loading'
      const searchParameters = new URLSearchParams(query)
      searchParameters.append('limit', '20')
      if (afterId.current != null) {
        searchParameters.append('after', afterId.current.toString())
      }
      const { data: newItems } = await api.get<T[]>(
        `${url}?${searchParameters.toString()}`
      )
      if (!inverse) {
        const endIndex = newItems.length - 1
        const lastItem = newItems[endIndex]
        afterId.current =
          newItems.length > 0 && lastItem != null ? lastItem.id : null
      } else {
        afterId.current =
          newItems.length > 0 && newItems[0] != null ? newItems[0].id : null
      }
      setItems((oldItems) => {
        const updatedItems = inverse
          ? [...newItems, ...oldItems]
          : [...oldItems, ...newItems]
        const unique = updatedItems.reduce<T[]>((accumulator, item) => {
          const isExisting = accumulator.some((itemSome) => {
            return itemSome.id === item.id
          })
          if (!isExisting) {
            accumulator.push(item)
          }
          return accumulator
        }, [])
        if (cacheKey != null) {
          savePaginationCache(cacheKey, unique)
        }
        return unique
      })
      setHasMore(newItems.length > 0)
      fetchState.current = 'idle'
    },
    [api, url, inverse, cacheKey]
  )

  const nextPage: NextPage = useCallback(
    (query, callback) => {
      nextPageAsync(query)
        .then(() => {
          if (callback != null) {
            callback()
          }
        })
        .catch((error) => {
          console.error(error)
        })
    },
    [nextPageAsync]
  )

  const resetPagination = useCallback((): void => {
    if (cacheKey == null) {
      afterId.current = null
      setItems([])
    } else {
      fetchState.current = 'loading'
      const newItems = getPaginationCache<T>(cacheKey)
      setItems(newItems)
      if (!inverse) {
        const endIndex = newItems.length - 1
        const lastItem = newItems[endIndex]
        afterId.current =
          newItems.length > 0 && lastItem != null ? lastItem.id : null
      } else {
        afterId.current =
          newItems.length > 0 && newItems[0] != null ? newItems[0].id : null
      }
      fetchState.current = 'idle'
    }
  }, [cacheKey, inverse])

  return { items, hasMore, nextPage, resetPagination, setItems }
}