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:
Aaron William Po
2023-03-27 19:01:51 -04:00
parent 7194f140aa
commit 2efc506250
6 changed files with 195 additions and 25 deletions

View 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;