Spaces:
Build error
Build error
File size: 2,433 Bytes
5285b72 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
import { useDebounce } from "@uidotdev/usehooks"
import { CommandLoading } from "cmdk"
import { type Dispatch, type SetStateAction, useState } from "react"
import { useQuery } from "urql"
import { Badge } from "~/components/ui/badge"
import {
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "~/components/ui/command"
import { graphql } from "~/generated/gql"
const QuestionsQuery = graphql(`
query questions($query: String) {
questions(query: $query) {
questions {
id
docId
categoryMajor
categoryMedium
categoryMinor
question
}
}
}
`)
type QuestionSearchProps = {
question: string
setOpen: Dispatch<SetStateAction<boolean>>
setQuestion: Dispatch<SetStateAction<string>>
}
export function QuestionSearch({
question,
setOpen,
setQuestion,
}: QuestionSearchProps) {
const [query, setQuery] = useState<string>(question)
const debouncedQuery = useDebounce(query, 200)
const [result, _reexecuteQuery] = useQuery({
query: QuestionsQuery,
variables: { query: debouncedQuery },
})
const { data, error } = result
return (
<>
<CommandInput
value={query}
onValueChange={(search) => setQuery(search)}
onKeyDown={(e) => {
if (
e.key === "Enter" &&
!e.nativeEvent.isComposing &&
// For Safari IME composition bug
e.keyCode !== 229
) {
setQuestion(debouncedQuery)
setOpen(false)
e.preventDefault()
}
}}
placeholder="Type search..."
/>
<CommandList>
{error ? (
<CommandLoading>Oh no... {error.message}</CommandLoading>
) : null}
{0 < (data?.questions?.questions?.length ?? 0) && (
<CommandGroup heading="Suggestions">
{data?.questions?.questions?.map((item) => (
<CommandItem
key={item.docId}
className="block"
onSelect={() => {
setQuestion(item.question)
setOpen(false)
}}
>
{item.question}
<div className="pt-2">
<Badge variant={"default"}>{item.categoryMajor}</Badge>
</div>
</CommandItem>
))}
</CommandGroup>
)}
</CommandList>
</>
)
}
|