80 lines
2.1 KiB
TypeScript
80 lines
2.1 KiB
TypeScript
import * as React from "react"
|
|
import axios from "axios"
|
|
import { useQuery } from "@tanstack/react-query"
|
|
|
|
import type { Coach } from "../types/Coach"
|
|
|
|
import { Container } from "../components/Container"
|
|
import { FadeIn, FadeInStagger } from "../components/FadeIn"
|
|
import { FallbackMessage } from "../components/FallbackMessage"
|
|
import { FilterModal } from "../components/FilterModal"
|
|
import { FilterScroll } from "../components/FilterScroll"
|
|
import { Loading } from "../components/Loading"
|
|
import { SearchResult } from "../components/SearchResult"
|
|
import { defaultSearchParams } from "../types/SearchParams"
|
|
|
|
function SearchResults() {
|
|
const { isLoading, isError, data } = useQuery({
|
|
queryKey: ["coaches"],
|
|
queryFn: async () => {
|
|
const response = await axios.get<{ data: Coach[] }>("/api/coaches/")
|
|
return response.data.data
|
|
},
|
|
})
|
|
|
|
if (isLoading) {
|
|
return <Loading loading />
|
|
}
|
|
|
|
if (isError) {
|
|
return (
|
|
<FallbackMessage
|
|
title="Unexpected Error"
|
|
body="We're looking into this. Please refresh or try again later."
|
|
/>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<FadeInStagger
|
|
className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
|
|
faster
|
|
>
|
|
{data?.map((coach, index) => (
|
|
<FadeIn key={index} className="flex cursor-pointer flex-col">
|
|
<SearchResult
|
|
src={coach.image_url ?? ""}
|
|
title={coach.name ?? ""}
|
|
subtitle={coach.name ?? ""}
|
|
/>
|
|
</FadeIn>
|
|
))}
|
|
</FadeInStagger>
|
|
)
|
|
}
|
|
|
|
export function Search() {
|
|
const [searchParams, setSearchParams] = React.useState(defaultSearchParams)
|
|
const [modalOpen, setModalOpen] = React.useState(false)
|
|
|
|
return (
|
|
<Container className="pt-8">
|
|
<FilterScroll
|
|
params={searchParams}
|
|
onSelect={setSearchParams}
|
|
onModal={() => setModalOpen(true)}
|
|
/>
|
|
<FilterModal
|
|
open={modalOpen}
|
|
defaultValues={searchParams}
|
|
onClose={() => setModalOpen(false)}
|
|
onSubmit={(q) => {
|
|
setSearchParams(q)
|
|
setModalOpen(false)
|
|
}}
|
|
/>
|
|
<SearchResults />
|
|
</Container>
|
|
)
|
|
}
|