import * as React from "react" import type { SearchParams } from "../types/SearchParams" import { Container } from "../components/Container" import { FadeIn } from "../components/FadeIn" import { FallbackMessage } from "../components/FallbackMessage" import { Loading } from "../components/Loading" import { SearchResult } from "../components/SearchResult" import { SortModal } from "../components/SortModal" import { SortScroll } from "../components/SortScroll" import { defaultSearchParams } from "../types/SearchParams" import { useCoachesInfiniteQuery } from "../utils/queries" function SearchResults({ searchParams }: { searchParams: SearchParams }) { const { isLoading, isError, data, fetchNextPage, hasNextPage, isFetching } = useCoachesInfiniteQuery(searchParams) const resultsRef = React.useRef(null) const handleScroll = React.useCallback(() => { if (!resultsRef.current) { return } const resultRect = resultsRef.current.getBoundingClientRect() if (!isFetching && hasNextPage && resultRect.bottom < 800) { fetchNextPage() } }, [isFetching, hasNextPage, resultsRef]) React.useEffect(() => { window.addEventListener("scroll", handleScroll, { passive: true }) return () => { window.removeEventListener("scroll", handleScroll) } }, [isFetching, hasNextPage, resultsRef]) if (isLoading) { return } if (isError) { return ( ) } return ( <>
{data?.pages.map((group, index) => ( {group.map((coach) => ( ))} ))}
{hasNextPage ? : null} ) } export function Search() { const [searchParams, setSearchParams] = React.useState(defaultSearchParams) const [modalOpen, setModalOpen] = React.useState(false) return ( setModalOpen(true)} /> setModalOpen(false)} onSubmit={(q) => { setSearchParams(q) setModalOpen(false) }} /> ) }