refactor: refactored useCategorySearch

packages/composables/src/composables/useCategorySearch/index.ts

@@ -5,6 +5,11 @@ import { Category, CategorySearchQueryVariables } from '@vue-storefront/magento-
 import { UseCategorySearchFactory, useCategorySearchFactory } from '../../factories/useCategorySearchFactory';
 import { UseCategorySearch } from '../../types/composables';
 
+/**
+ * @deprecated since version <version?>
+ *
+ * @see <add docs link>
+ */
 const factoryParams: UseCategorySearchFactory<Category, CategorySearchQueryVariables> = {
   search: async (context: Context, params): Promise<Category[]> => {
     Logger.debug('[Magento]: Search for category using', { params });

packages/composables/src/factories/useCategorySearchFactory.ts

@@ -12,7 +12,11 @@ import { UseCategorySearch, UseCategorySearchErrors } from '../types/composables
 export interface UseCategorySearchFactory<CATEGORY, CATEGORY_SEARCH_PARAMS, API extends PlatformApi = any> extends FactoryParams<API> {
   search: (context: Context, params: ComposableFunctionArgs<CATEGORY_SEARCH_PARAMS>) => Promise<CATEGORY[]>;
 }
-
+/**
+ * @deprecated since version <version?>
+ *
+ * @see <add docs link>
+ */
 export function useCategorySearchFactory<CATEGORY, CATEGORY_SEARCH_PARAMS, API extends PlatformApi = any>(
   factoryParams: UseCategorySearchFactory<CATEGORY, CATEGORY_SEARCH_PARAMS, API>,
 ) {

packages/theme/components/AppHeader.vue

@@ -170,7 +170,6 @@ import {
 import {
   cartGetters,
   categoryGetters,
-  useCategorySearch,
   wishlistGetters,
 } from '@vue-storefront/magento';
 import {
@@ -197,6 +196,7 @@ import {
   useWishlist,
   useUser,
   useFacet,
+  useCategorySearch,
 } from '~/composables';
 import StoreSwitcher from '~/components/StoreSwitcher.vue';
 
@@ -228,7 +228,7 @@ export default defineComponent({
     const {
       result: categories,
       search: categoriesSearch,
-    } = useCategorySearch('AppHeader:Categories');
+    } = useCategorySearch();
 
     const term = ref(getFacetsFromURL().term);
     const isSearchOpen = ref(false);

packages/theme/composables/index.ts

@@ -13,3 +13,4 @@ export { default as useForgotPassword } from './useForgotPassword';
 export { default as useCategory } from './useCategory';
 export { default as useFacet } from './useFacet';
 export { default as useCart } from './useCart';
+export { default as useCategorySearch } from './useCategorySearch';

packages/theme/composables/useCategorySearch/index.ts

@@ -0,0 +1,42 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Category, CategorySearchQueryVariables } from '@vue-storefront/magento-api';
+import { ref, Ref, useContext } from '@nuxtjs/composition-api';
+import { Logger } from '@vue-storefront/core';
+import { UseCategoryErrors, UseCategorySearch } from '~/composables/useCategorySearch/useCategorySearch';
+
+export const useCategorySearch = (): UseCategorySearch => {
+  const { app } = useContext();
+  const loading: Ref<boolean> = ref(false);
+  const error: Ref<UseCategoryErrors> = ref({
+    search: null,
+  });
+  const result: Ref<Array<Category>> = ref(null);
+
+  // eslint-disable-next-line consistent-return
+  const search = async (searchParams: CategorySearchQueryVariables) => {
+    Logger.debug('useCategory/search', searchParams);
+
+    try {
+      const { filters } = searchParams;
+      const { data } = await app.context.$vsf.$magento.api.categorySearch({ filters });
+
+      Logger.debug('[Result]:', { data });
+
+      result.value = data.categoryList;
+    } catch (err) {
+      error.value.search = err;
+      Logger.error('useCategory/search', err);
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  return {
+    search,
+    loading,
+    error,
+    result,
+  };
+};
+
+export default useCategorySearch;

packages/theme/composables/useCategorySearch/useCategorySearch.d.ts

@@ -0,0 +1,18 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import {
+  Category, CategorySearchQueryVariables,
+} from '@vue-storefront/magento-api';
+
+import { Ref } from '@nuxtjs/composition-api';
+import { ComposableFunctionArgs } from '@vue-storefront/core';
+
+export interface UseCategoryErrors {
+  search: Error;
+}
+
+export interface UseCategorySearch{
+  result:  Ref<Array<Category>>,
+  search(searchParams: ComposableFunctionArgs<CategorySearchQueryVariables>): Promise<void>;
+  loading: Ref<boolean>;
+  error: Ref<UseCategoryErrors>;
+}