mirror of
https://github.com/aaronpo97/the-biergarten-app.git
synced 2026-02-16 18:52:06 +00:00
2efc506250
This commit adds the necessary components and hooks to implement a beer search feature on the website. It includes the following changes: - Add a new BeerSearch API route that returns a list of beers matching a search query. - Implement a new hook useBeerPostSearch that utilizes SWR to fetch data from the API and parse it using a schema. - Add a new page SearchPage that displays a search input field and a list of beer search results. - Use lodash's debounce function to avoid making too many requests while the user is typing in the search input field.
30 lines
723 B
TypeScript
30 lines
723 B
TypeScript
import useSWR from 'swr';
|
|
import { beerPostQueryResultArraySchema } from '@/services/BeerPost/schema/BeerPostQueryResult';
|
|
|
|
const useBeerPostSearch = (query: string | undefined) => {
|
|
const { data, isLoading, error } = useSWR(
|
|
`/api/beers/search?search=${query}`,
|
|
async (url) => {
|
|
if (!query) return [];
|
|
|
|
const response = await fetch(url);
|
|
if (!response.ok) {
|
|
throw new Error(response.statusText);
|
|
}
|
|
|
|
const json = await response.json();
|
|
const result = beerPostQueryResultArraySchema.parse(json);
|
|
|
|
return result;
|
|
},
|
|
);
|
|
|
|
return {
|
|
searchResults: data,
|
|
searchError: error as Error | undefined,
|
|
isLoading,
|
|
};
|
|
};
|
|
|
|
export default useBeerPostSearch;
|