You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
53 lines
1.4 KiB
53 lines
1.4 KiB
"use client";
|
|
|
|
import { useClient } from "@/hooks/useClient";
|
|
import { Component } from "@/typings/component";
|
|
import { Autocomplete, AutocompleteItem } from "@nextui-org/autocomplete";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { FormEventHandler, useState } from "react";
|
|
import { useDebounce } from "use-debounce";
|
|
|
|
export const Search: Component<{ initialQueryValue?: string }> = ({
|
|
initialQueryValue
|
|
}) => {
|
|
const client = useClient();
|
|
|
|
const [searchQuery, setSearchQuery] = useState(initialQueryValue ?? "");
|
|
|
|
const [searchQueryDebounced] = useDebounce(searchQuery, 500);
|
|
|
|
const { isLoading, error, data } = useQuery({
|
|
queryKey: ["search", "suggestions", searchQueryDebounced],
|
|
queryFn: () => client.getSearchSuggestions(searchQueryDebounced),
|
|
enabled: searchQueryDebounced.length !== 0
|
|
});
|
|
|
|
const handleSubmit: FormEventHandler = (e) => {
|
|
// e.preventDefault();
|
|
|
|
console.log(searchQuery);
|
|
};
|
|
|
|
const suggestions = data ?? [];
|
|
|
|
return (
|
|
<Autocomplete
|
|
isClearable
|
|
value={searchQuery}
|
|
isLoading={isLoading}
|
|
defaultInputValue={initialQueryValue}
|
|
onSubmit={handleSubmit}
|
|
onValueChange={setSearchQuery}
|
|
label="Search"
|
|
variant="flat"
|
|
placeholder="Search for videos"
|
|
>
|
|
{suggestions.map((suggestion) => (
|
|
<AutocompleteItem key={suggestion.toLowerCase()}>
|
|
{suggestion}
|
|
</AutocompleteItem>
|
|
))}
|
|
</Autocomplete>
|
|
);
|
|
};
|