fix: Taxonomy queries stay as taxonomy queries when a category query …

…is used

src/pages/search/index.tsx

@@ -64,6 +64,7 @@ export async function getServerSideProps(ctx: GetServerSidePropsContext) {
  'page-resource',
  'common',
  'dynamic',
+ 'categories',
  'suggestions',
  ])),
  },

src/shared/components/search/search-bar.tsx

@@ -7,6 +7,7 @@ import { searchAtom, searchTermAtom } from '../../store/search';
 import { useDebounce } from '../../hooks/use-debounce';
 import { useSuggestions } from '../../hooks/use-suggestions';
 import { useFlag } from '@/shared/hooks/use-flag';
+import { useCategories } from '@/shared/hooks/use-categories';
 
 export function SearchBar() {
  const { t } = useTranslation();
@@ -15,8 +16,23 @@ export function SearchBar() {
  const debouncedSearchTerm = useDebounce(searchTerm, 200);
  const { data: taxonomies } = useTaxonomies(debouncedSearchTerm);
  const suggestions = useSuggestions();
+ const categories = useCategories();
  const showTaxonomyBadge = useFlag('showSuggestionListTaxonomyBadge');
 
+ const reducedCategories: {
+ name: string;
+ query: string;
+ queryType: string;
+ }[] = useMemo(() => {
+ return categories.reduce((prev, current) => {
+ if (current?.subcategories?.length > 0) {
+ return prev.concat(current.subcategories);
+ }
+
+ return prev;
+ }, []);
+ }, [categories]);
+
  // Remap and filter data as needed for the search box
  const options = useMemo(() => {
  return [
@@ -51,6 +67,11 @@ export function SearchBar() {
  );
  if (suggestion) return suggestion.taxonomies;
 
+ const category = reducedCategories.find(
+ (cat) => cat.name.toLowerCase() === value.toLowerCase(),
+ );
+ if (category) return category.query;
+
  return value;
  };
 

src/shared/components/search/search-button.tsx

@@ -15,6 +15,8 @@ import {
  DialogHeader,
  DialogTitle,
 } from '../ui/dialog';
+import { useCategories } from '@/shared/hooks/use-categories';
+import { useMemo } from 'react';
 
 export function SearchButton() {
  const { t } = useTranslation('common');
@@ -24,8 +26,23 @@ export function SearchButton() {
  const debouncedSearchTerm = useDebounce(search.searchTerm, 200);
  const { data: taxonomies } = useTaxonomies(debouncedSearchTerm);
  const suggestions = useSuggestions();
+ const categories = useCategories();
  const requireUserLocation = useFlag('requireUserLocation');
 
+ const reducedCategories: {
+ name: string;
+ query: string;
+ queryType: string;
+ }[] = useMemo(() => {
+ return categories.reduce((prev, current) => {
+ if (current?.subcategories?.length > 0) {
+ return prev.concat(current.subcategories);
+ }
+
+ return prev;
+ }, []);
+ }, [categories]);
+
  // Find the taxonomy code to be used for a query
  // Fallback to the original string value if a code isn't found
  const findCode = (value: string) => {
@@ -39,6 +56,11 @@ export function SearchButton() {
  );
  if (suggestion) return suggestion.taxonomies;
 
+ const category = reducedCategories.find(
+ (cat) => cat.name.toLowerCase() === value.toLowerCase(),
+ );
+ if (category) return category.query;
+
  return value;
  };
 

src/shared/hooks/use-categories.ts

@@ -1,6 +1,20 @@
 import { useTranslation } from 'next-i18next';
 import { useCallback } from 'react';
 
+type Subcategory = {
+ name: string;
+ href?: string;
+ query: string;
+ queryType: string;
+};
+
+type Category = {
+ name: string;
+ href?: string;
+ image?: string;
+ subcategories?: Subcategory[];
+};
+
 export function useCategories() {
  const { i18n } = useTranslation();
 
@@ -11,11 +25,11 @@ export function useCategories() {
 
  // If resources is an array of objects
  if (Array.isArray(resources)) {
- return resources.map((item) => item.value);
+ return resources.map((item) => item.value) as Category[];
  }
 
  // If resources is an object
- return Object.values(resources);
+ return Object.values(resources) as Category[];
  }, [i18n]);
 
  return getAllTranslations();