refactor: remove category getters call from app header

M2-415

Author: bartoszherba

packages/theme/components/AppHeader.vue

@@ -108,7 +108,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import {
   SfOverlay, SfHeader, SfButton, SfBadge,
 } from '@storefront-ui/vue';
@@ -122,7 +122,6 @@ import {
   onMounted,
   useFetch,
 } from '@nuxtjs/composition-api';
-import { categoryGetters } from '~/getters';
 import HeaderNavigationItem from '~/components/Header/Navigation/HeaderNavigationItem.vue';
 import {
   useCart,
@@ -183,16 +182,25 @@ export default defineComponent({
 
     useFetch(async () => {
       await categoriesListLoad({ pageSize: 20 });
-      categoryTree.value = categoryGetters
-        .getCategoryTree(categoryList.value?.[0])
-        ?.items.filter((c) => c.count > 0);
+
+      function prepareMenuData() {
+        return categoryList.value?.[0]?.children
+          .map((category) => ({
+            includeInMenu: category.include_in_menu,
+            label: category.name,
+            slug: `/${category.url_path}${category.url_suffix}`,
+          }))
+          .filter((category) => category.includeInMenu) ?? [];
+      }
+
+      categoryTree.value = prepareMenuData();
     });
 
     onMounted(() => {
       if (app.$device.isDesktop) {
         loadCartTotalQty();
         // eslint-disable-next-line promise/catch-or-return
-        loadWishlistItemsCount()
+        loadWishlistItemsCount({})
           .then((response) => {
             wishlistItemsQty.value = response;
 

packages/theme/composables/types.ts

@@ -87,7 +87,7 @@ export declare type GetProductSearchParams = {
 export declare type AvailableStores = AvailableStoresQuery['availableStores'];
 export declare type CartItem = CartItemInterface;
 export declare type CustomQuery = Record<string, string>;
-export declare type Category = CategoryTree | CategorySearchQuery['categoryList'][0];
+export declare type Category = CategoryTree;
 export interface Product extends ProductInterface, ConfigurableProduct, Omit<BundleProduct, 'items'>, Omit<GroupedProduct, 'items'>, Omit<DownloadableProduct, 'items'>, Omit<VirtualProduct, 'items'> { __typename: string }
 export declare type Filter = Record<string, any>;
 export declare type Countries = CountriesListQuery['countries'][0];

packages/theme/composables/useCart/useCart.ts

@@ -1,11 +1,10 @@
-import { Context } from '@nuxt/types';
 import { ComputedRef, Ref } from '@nuxtjs/composition-api';
 import { ComposableFunctionArgs } from '~/composables/types';
 import { CartItemInput } from '~/modules/GraphQL/types';
 
 export interface UseCartInterface<CART, CART_ITEM, PRODUCT> {
   load: (params: ComposableFunctionArgs<{ realCart?: boolean; }>) => Promise<void>;
-  loadTotalQty: (context: Context['app']) => Promise<void>;
+  loadTotalQty: () => Promise<void>;
   addItem: (
     params: ComposableFunctionArgs<{
       product: PRODUCT;

packages/theme/getters/productGetters.ts

@@ -7,22 +7,22 @@ import {
   Product,
 } from '~/composables/types';
 import { ProductGetters as ProductGettersBase } from '~/getters/types';
-import { BundleProduct, GroupedProduct } from '~/modules/GraphQL/types';
+import {
+  BundleProduct, CategoryInterface, GroupedProduct, ProductInterface,
+} from '~/modules/GraphQL/types';
 import { htmlDecode } from '~/helpers/htmlDecoder';
 import categoryGetters from './categoryGetters';
 import reviewGetters from './reviewGetters';
 
-type ProductVariantFilters = any;
-
-export const getName = (product: Product): string => {
+export const getName = (product: ProductInterface): string => {
   if (!product) {
     return '';
   }
 
   return htmlDecode(product.name);
 };
 
-export const getSlug = (product: Product, category?: Category): string => {
+export const getSlug = (product: ProductInterface, category?: Category): string => {
   const rewrites = product?.url_rewrites;
   let url = product?.sku ? `/p/${product.sku}` : '';
   if (!rewrites || rewrites.length === 0) {
@@ -99,14 +99,6 @@ export const getProductThumbnailImage = (product: Product): string => {
   return product.thumbnail.url;
 };
 
-export const getFiltered = (products: Product[], filters: ProductVariantFilters | any = {}): Product[] => {
-  if (!products) {
-    return [];
-  }
-
-  return products;
-};
-
 export const getAttributes = (
   products: Product,
   _filterByAttributeName?: string[],
@@ -207,7 +199,7 @@ export const getFormattedPrice = (price: number) => {
   }).format(price);
 };
 
-export const getBreadcrumbs = (product: any, category?: Category): AgnosticBreadcrumb[] => {
+export const getBreadcrumbs = (product: ProductInterface, category?: Category): AgnosticBreadcrumb[] => {
   let breadcrumbs = [];
 
   if (!product) {
@@ -244,14 +236,14 @@ export const getGroupedProducts = (product: GroupedProduct & { __typename: strin
 // eslint-disable-next-line no-underscore-dangle
 export const getBundleProducts = (product: BundleProduct & { __typename: string }): BundleProduct['items'] | undefined => product.__typename === 'BundleProduct' && product?.items?.sort(sortProduct);
 
-export interface ProductGetters extends ProductGettersBase<Product, ProductVariantFilters> {
+export interface ProductGetters extends ProductGettersBase<Product> {
   getCategory(product: Product, currentUrlPath: string): Category | null;
   getProductRelatedProduct(product: Product): Product[];
   getProductSku(product: Product): string;
   getProductThumbnailImage(product: Product): string;
   getProductUpsellProduct(product: Product): Product[];
   getShortDescription(product: Product): string;
-  getSlug(product: Product, category?: Category): string;
+  getSlug(product: Product, category?: CategoryInterface): string;
   getTypeId(product: Product): string;
   getSwatchData(swatchData: Product['configurable_options'][0]['values'][0]['swatch_data']): string | undefined;
   getGroupedProducts(product: GroupedProduct): GroupedProduct['items'] | undefined;
@@ -266,7 +258,6 @@ const productGetters: ProductGetters = {
   getCategoryIds,
   getCoverImage,
   getDescription,
-  getFiltered,
   getFormattedPrice,
   getGallery,
   getId,

packages/theme/getters/types.d.ts

@@ -19,13 +19,12 @@ export interface AddressGetter {
   }[];
 }
 
-export interface ProductGetters<PRODUCT, PRODUCT_FILTER> {
+export interface ProductGetters<PRODUCT> {
   getName: (product: PRODUCT) => string;
   getSlug: (product: PRODUCT) => string;
   getPrice: (product: PRODUCT) => AgnosticPrice;
   getGallery: (product: PRODUCT) => AgnosticMediaGalleryItem[];
   getCoverImage: (product: PRODUCT) => string;
-  getFiltered: (products: PRODUCT[], filters?: PRODUCT_FILTER) => PRODUCT[];
   getAttributes: (products: PRODUCT[] | PRODUCT, filters?: Array<string>) => Record<string, AgnosticAttribute | string>;
   getDescription: (product: PRODUCT) => string;
   getCategoryIds: (product: PRODUCT) => string[];

packages/theme/helpers/product/productData.ts

@@ -1,21 +1,14 @@
 import { computed, useRoute } from '@nuxtjs/composition-api';
-import { productGetters } from '~/getters';
 
 export const productData = (products) => {
   const route = useRoute();
-  const { params: { id }, query } = route.value;
+  const { params: { id } } = route.value;
 
   return {
     id,
     product: computed(() => {
       if (!products) return {};
-      const baseProduct = Array.isArray(products.value?.items) && products.value?.items[0] ? products.value?.items[0] : [];
-
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-      return productGetters.getFiltered(baseProduct, {
-        master: true,
-        attributes: query,
-      });
+      return Array.isArray(products.value?.items) && products.value?.items[0] ? products.value?.items[0] : [];
     }),
   };
 };

packages/theme/modules/catalog/pages/category.vue

@@ -9,12 +9,14 @@
       class="breadcrumbs"
     />
     <CategoryNavbar
+      v-if="isShowProducts"
       :sort-by="sortBy"
       :pagination="pagination"
       @reloadProducts="fetch"
     />
     <div class="main section">
       <CategorySidebar
+        v-if="isShowProducts"
         class="sidebar desktop-only"
       />
       <div
@@ -320,7 +322,6 @@ export default defineComponent({
     const { fetch } = useFetch(async () => {
       routeData.value = await resolveUrl();
       const content = await getContentData(routeData.value?.id);
-
       cmsContent.value = content?.cmsBlock?.content ?? '';
       isShowCms.value = content.isShowCms;
       isShowProducts.value = content.isShowProducts;

packages/theme/pages/Home.vue

@@ -251,7 +251,7 @@ export default defineComponent({
 
       addTags([{ prefix: CacheTagPrefix.View, value: 'home' }]);
 
-      newProducts.value = productGetters.getFiltered(productsData?.items, { master: true });
+      newProducts.value = productsData?.items;
     });
 
     // @ts-ignore

packages/theme/types/core.d.ts

@@ -655,13 +655,12 @@ export interface AgnosticStore {
   [x: string]: unknown;
 }
 
-export interface ProductGetters<PRODUCT, PRODUCT_FILTER> {
+export interface ProductGetters<PRODUCT> {
   getName: (product: PRODUCT) => string;
   getSlug: (product: PRODUCT) => string;
   getPrice: (product: PRODUCT) => AgnosticPrice;
   getGallery: (product: PRODUCT) => AgnosticMediaGalleryItem[];
   getCoverImage: (product: PRODUCT) => string;
-  getFiltered: (products: PRODUCT[], filters?: PRODUCT_FILTER) => PRODUCT[];
   getAttributes: (products: PRODUCT[] | PRODUCT, filters?: Array<string>) => Record<string, AgnosticAttribute | string>;
   getDescription: (product: PRODUCT) => string;
   getCategoryIds: (product: PRODUCT) => string[];