refactor: refactored usedRelatedProducts composable (#732)

* refactor(relatedproducts): refactored usedRelatedProducts composable

* Update packages/composables/src/factories/useRelatedProductsFactory.ts

Co-authored-by: Bartosz Herba <[email protected]>

* Update packages/composables/src/composables/useRelatedProducts/index.ts

Co-authored-by: Bartosz Herba <[email protected]>

Co-authored-by: Bartosz Herba <[email protected]>

Author: Marcin Kwiatkowski

packages/composables/src/composables/useRelatedProducts/index.ts

@@ -14,6 +14,9 @@ import {
   UseRelatedProductsFactoryParams,
 } from '../../factories/useRelatedProductsFactory';
 
+/**
+ * @deprecated since version 1.0.0
+ */
 const factoryParams: UseRelatedProductsFactoryParams<RelatedProductQuery['products']['items'][0]['related_products'], ProductsSearchParams> = {
   productsSearch: async (
     context: Context,

packages/composables/src/factories/useRelatedProductsFactory.ts

@@ -11,6 +11,9 @@ import {
 } from '@vue-storefront/core';
 import { UseRelatedProducts, UseRelatedProductsErrors } from '../types/composables';
 
+/**
+ * @deprecated since version 1.0.0
+ */
 export interface UseRelatedProductsFactoryParams<
   PRODUCTS,
   RELATED_PRODUCTS_SEARCH_PARAMS extends ProductsSearchParams,

packages/theme/components/RelatedProducts.vue

@@ -6,9 +6,8 @@
   />
 </template>
 <script>
-import { defineComponent } from '@nuxtjs/composition-api';
-import { useRelatedProducts } from '@vue-storefront/magento';
-import { onSSR } from '@vue-storefront/core';
+import { defineComponent, useFetch, ref } from '@nuxtjs/composition-api';
+import { useRelatedProducts } from '~/composables';
 import ProductsCarousel from '~/components/ProductsCarousel.vue';
 import { productData } from '~/helpers/product/productData';
 
@@ -21,19 +20,20 @@ export default defineComponent({
     const { id } = productData();
     const {
       search,
-      products,
       loading,
-    } = useRelatedProducts(id);
+    } = useRelatedProducts();
+    const products = ref([]);
 
-    onSSR(async () => {
+    useFetch(async () => {
       const baseSearchQuery = {
         filter: {
           sku: {
             eq: id,
           },
         },
       };
-      await search(baseSearchQuery);
+
+      products.value = await search(baseSearchQuery);
     });
 
     return {

packages/theme/composables/index.ts

@@ -18,3 +18,4 @@ export { default as useCategorySearch } from './useCategorySearch';
 export { default as useProduct } from './useProduct';
 export { default as useShipping } from './useShipping';
 export { default as useShippingProvider } from './useShippingProvider';
+export { default as useRelatedProducts } from './useRelatedProducts';

packages/theme/composables/useRelatedProducts/index.ts

@@ -0,0 +1,54 @@
+import { ref, useContext, Ref } from '@nuxtjs/composition-api';
+import { ComposableFunctionArgs, ProductsSearchParams, Logger } from '@vue-storefront/core';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { GetProductSearchParams } from '@vue-storefront/magento-api';
+import { UseRelatedProductsError, RelatedProducts, UseRelatedProductsInterface } from '~/composables/useRelatedProducts/useRelatedProducts';
+
+export const useRelatedProducts = (): UseRelatedProductsInterface => {
+  const { app } = useContext();
+  const loading: Ref<boolean> = ref(false);
+  const error: Ref<UseRelatedProductsError> = ref({
+    search: null,
+  });
+
+  const search = async (params: ComposableFunctionArgs<ProductsSearchParams>): Promise<Array<RelatedProducts>> => {
+    const {
+      customQuery,
+      ...searchParams
+    } = params;
+
+    let results = null;
+
+    try {
+      loading.value = true;
+
+      Logger.debug('[Magento] Load related products based on ', { searchParams });
+
+      const { data } = await app
+        .$vsf
+        .$magento
+        .api
+        .relatedProduct(searchParams as GetProductSearchParams);
+
+      Logger.debug('[Result] Related products:', { data });
+
+      results = data.products?.items[0]?.related_products;
+      error.value.search = null;
+    } catch (err) {
+      error.value.search = err;
+      Logger.error('useRelatedProducts/search', err);
+    } finally {
+      loading.value = false;
+    }
+
+    return results;
+  };
+
+  return {
+    search,
+    loading,
+    error,
+  };
+};
+
+export default useRelatedProducts;

packages/theme/composables/useRelatedProducts/useRelatedProducts.d.ts

@@ -0,0 +1,18 @@
+import { ComposableFunctionArgs, ProductsSearchParams } from '@vue-storefront/core';
+import { Ref } from '@nuxtjs/composition-api';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import {
+  RelatedProductQuery,
+} from '@vue-storefront/magento-api';
+
+export interface UseRelatedProductsError {
+  search: Error | null;
+}
+
+export type RelatedProducts = RelatedProductQuery['products']['items'][0]['related_products'];
+
+export interface UseRelatedProductsInterface {
+  search: (params?: ComposableFunctionArgs<ProductsSearchParams>) => Promise<Array<RelatedProducts>>;
+  loading: Ref<boolean>;
+  error: Ref<UseRelatedProductsError>;
+}