mirror of
https://github.com/aaronpo97/the-biergarten-app.git
synced 2026-02-16 20:13:49 +00:00
Add beer search feature
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.
This commit is contained in:
29
hooks/useBeerPostSearch.ts
Normal file
29
hooks/useBeerPostSearch.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
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;
|
||||
Reference in New Issue
Block a user