Infinite Select

import { SelectSingleInfiniteScroll } from '@/components/InfiniteSelect/select-single-infinite-scroll'
import { SelectMultipleInfiniteScroll } from '@/components/InfiniteSelect/select-multiple-infinite-scroll'
import type { QueryFn, SelectItemType } from '@/components/InfiniteSelect/use-infinite-options'
 
const fetchCities: QueryFn<SelectItemType> = async (cursor, search, selectedIds, signal) => {
  const params = new URLSearchParams({ search })
 
  if (cursor) params.set('cursor', cursor)
  selectedIds?.forEach(id => params.append('selectedIds', id))
 
  const res = await fetch(`/api/cities?${params}`, { signal })
 
  // { items: { id, name }[], nextCursor: string | null, selected?: { id, name }[] }
  return res.json()
}
 
export function CityFields () {
  const [city, setCity] = useState('')
  const [cities, setCities] = useState<string[]>([])
 
  return (
    <>
      <SelectSingleInfiniteScroll aria-label='City' queryFn={fetchCities} value={city} onChange={setCity} clearable />
      <SelectMultipleInfiniteScroll aria-label='Cities' queryFn={fetchCities} value={cities} onChange={setCities} />
    </>
  )
}

import { useInfiniteQuery } from '@tanstack/react-query'
import { useState } from 'react'
import type { InfiniteSource, QueryFn, SelectItemType } from '@/components/InfiniteSelect/use-infinite-options'
 
export function useInfiniteSelectQuery<T extends SelectItemType> (
  key: string,
  queryFn: QueryFn<T>,
  selectedIds: string[] = []
): InfiniteSource<T> {
  const [search, setSearch] = useState('')
  const query = useInfiniteQuery({
    queryKey: [key, search],
    initialPageParam: null as string | null,
    queryFn: ({ pageParam, signal }) =>
      queryFn(pageParam, search, !pageParam && selectedIds.length ? selectedIds : undefined, signal),
    getNextPageParam: last => last.nextCursor,
  })
 
  return {
    items: query.data?.pages.flatMap(page => page.items) ?? [],
    selected: query.data?.pages[0]?.selected,
    hasNextPage: query.hasNextPage,
    fetchNextPage: query.fetchNextPage,
    isLoading: query.isLoading,
    isFetching: query.isFetching,
    isFetchingNextPage: query.isFetchingNextPage,
    isError: query.isError,
    error: query.error,
    retry: query.refetch,
    onSearchChange: setSearch,
  }
}
 
// const source = useInfiniteSelectQuery('cities', fetchCities, cities)
// <SelectMultipleInfiniteScroll source={source} value={cities} onChange={setCities} />