From e366a82020f6e6a35d99d84c1d1d2b51cfeb437d Mon Sep 17 00:00:00 2001
From: devcshort <13677134+devcshort@users.noreply.github.com>
Date: Tue, 24 Sep 2024 18:03:49 -0700
Subject: [PATCH] fix: Taxonomy queries stay as taxonomy queries when a
 category query is used

---
 src/pages/search/index.tsx                    |  1 +
 src/shared/components/search/search-bar.tsx   | 21 ++++++++++++++++++
 .../components/search/search-button.tsx       | 22 +++++++++++++++++++
 src/shared/hooks/use-categories.ts            | 18 +++++++++++++--
 4 files changed, 60 insertions(+), 2 deletions(-)

diff --git a/src/pages/search/index.tsx b/src/pages/search/index.tsx
index ec60028b..15fe4ec7 100644
--- a/src/pages/search/index.tsx
+++ b/src/pages/search/index.tsx
@@ -64,6 +64,7 @@ export async function getServerSideProps(ctx: GetServerSidePropsContext) {
         'page-resource',
         'common',
         'dynamic',
+        'categories',
         'suggestions',
       ])),
     },
diff --git a/src/shared/components/search/search-bar.tsx b/src/shared/components/search/search-bar.tsx
index 5ad83d74..92c1aae8 100644
--- a/src/shared/components/search/search-bar.tsx
+++ b/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;
   };
 
diff --git a/src/shared/components/search/search-button.tsx b/src/shared/components/search/search-button.tsx
index 7b189f60..2bebfe59 100644
--- a/src/shared/components/search/search-button.tsx
+++ b/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;
   };
 
diff --git a/src/shared/hooks/use-categories.ts b/src/shared/hooks/use-categories.ts
index 52990bf0..c5858385 100644
--- a/src/shared/hooks/use-categories.ts
+++ b/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();