started on search page
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
parent
da37c946c4
commit
7438d26fa8
@ -0,0 +1,17 @@
|
||||
"use client";
|
||||
|
||||
import { Search } from "@/components/Search";
|
||||
import { Component } from "@/typings/component";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
|
||||
export const SearchPage: Component = () => {
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const query = searchParams.get("search_query");
|
||||
|
||||
return (
|
||||
<>
|
||||
<Search initialQueryValue={query || undefined} />
|
||||
</>
|
||||
);
|
||||
};
|
@ -0,0 +1,12 @@
|
||||
import { Suspense } from "react";
|
||||
import { SearchPage } from "./SearchPage";
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<>
|
||||
<Suspense>
|
||||
<SearchPage />
|
||||
</Suspense>
|
||||
</>
|
||||
);
|
||||
}
|
@ -0,0 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import { Component } from "@/typings/component";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
|
||||
export const Watch: Component = () => {
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const videoId = searchParams.get("v");
|
||||
|
||||
return <></>;
|
||||
};
|
@ -0,0 +1,12 @@
|
||||
import { Suspense } from "react";
|
||||
import { Watch } from "./Watch";
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<>
|
||||
<Suspense>
|
||||
<Watch />
|
||||
</Suspense>
|
||||
</>
|
||||
);
|
||||
}
|
@ -0,0 +1,10 @@
|
||||
import z from "zod";
|
||||
|
||||
export const SuggestionsModel = z.object({
|
||||
query: z.string(),
|
||||
suggestions: z.string().array()
|
||||
});
|
||||
|
||||
type Suggestions = z.infer<typeof SuggestionsModel>;
|
||||
|
||||
export default Suggestions;
|
@ -0,0 +1 @@
|
||||
export type Suggestions = string[];
|
@ -0,0 +1,52 @@
|
||||
"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>
|
||||
);
|
||||
};
|
Loading…
Reference in new issue