refactor category and brand filtering logic

Signed-off-by: Loan Laux <loan@outgrow.io>

framework/reactioncommerce/api/endpoints/catalog/get-products.ts

@@ -1,16 +1,30 @@
 import catalogItemsQuery from '@framework/utils/queries/catalog-items-query'
 import { normalizeProduct } from '@framework/utils'
 import type { ProductsEndpoint } from './products'
+import getSearchVariables from '../../utils/get-search-variables'
 
 const getCart: ProductsEndpoint['handlers']['getProducts'] = async ({
   req,
   res,
   config,
 }) => {
+  const {
+    brandId,
+    categoryId,
+    search,
+    sort,
+  } = req.query
+
   const {
     data: { catalogItems },
   } = await config.fetch(catalogItemsQuery, {
     variables: {
+      ...getSearchVariables({
+        brandId,
+        categoryId,
+        search,
+        sort,
+      }),
       shopIds: [config.shopId],
     },
   })

framework/reactioncommerce/api/operations/get-site-info.ts

@@ -1,10 +1,9 @@
 import { Provider, ReactionCommerceConfig } from '../'
-import { GetCollectionsQuery } from '../../schema'
 import getCollectionsQuery from '../../utils/queries/get-all-collections-query'
 import { OperationContext } from '@commerce/api/operations'
 import { Category } from '@commerce/types/site'
-import getCategories from '../../utils/get-categories'
-import getVendors from '../../utils/get-vendors'
+import getCategories from '../utils/get-categories'
+import getVendors from '../utils/get-vendors'
 
 export type GetSiteInfoResult<
   T extends { categories: any[]; brands: any[] } = {

framework/reactioncommerce/api/utils/get-categories.ts

@@ -1,6 +1,6 @@
-import { ReactionCommerceConfig } from '../api'
-import { CollectionEdge, TagEdge } from '../schema'
-import getTagsQuery from './queries/get-all-collections-query'
+import { ReactionCommerceConfig } from '../'
+import { TagEdge } from '../../schema'
+import getTagsQuery from '../../utils/queries/get-all-collections-query'
 
 export type Category = {
   entityId: string
@@ -10,7 +10,7 @@ export type Category = {
 
 const getCategories = async (
   config: ReactionCommerceConfig
-): Promise<Tag[]> => {
+): Promise<TagEdge[]> => {
   const { data } = await config.fetch(getTagsQuery, {
     variables: {
       first: 250,
@@ -21,9 +21,9 @@ const getCategories = async (
   return (
     data.tags?.edges?.map(
       ({
-        node: { _id: entityId, displayTitle: name, slug: handle },
+        node: { _id: id, displayTitle: name, slug: handle },
       }: TagEdge) => ({
-        entityId,
+        id,
         name,
         path: `/${handle}`,
         slug: handle,

framework/reactioncommerce/api/utils/get-search-variables.ts

@@ -1,5 +1,12 @@
 import getSortVariables from './get-sort-variables'
-import type { SearchProductsInput } from '../product/use-search'
+
+export type SearchProductsInput = {
+  search?: string
+  categoryId?: number | string
+  brandId?: number
+  sort?: string
+  locale?: string
+}
 
 export const getSearchVariables = ({
   brandId,

framework/reactioncommerce/api/utils/get-vendors.ts

@@ -1,6 +1,6 @@
-import { ReactionCommerceConfig } from '../api'
-import getAllProductVendors from './queries/get-all-product-vendors-query'
-import { Vendor } from '@framework/schema'
+import { ReactionCommerceConfig } from '../'
+import { Vendor } from '../../schema'
+import getAllProductVendors from '../../utils/queries/get-all-product-vendors-query'
 
 export type Brand = {
   entityId: string

framework/reactioncommerce/product/use-search.tsx

@@ -3,34 +3,31 @@ import useSearch, { UseSearch } from '@commerce/product/use-search'
 
 export default useSearch as UseSearch<typeof handler>
 
-export type SearchProductsInput = {
-  search?: string
-  categoryId?: number | string
-  brandId?: number
-  sort?: string
-  locale?: string
-}
-
 export const handler: SWRHook<any> = {
   fetchOptions: {
     url: '/api/catalog/products',
     method: 'GET',
   },
-  fetcher({ input: { search, categoryId, brandId, sort }, options, fetch }) {
+  async fetcher({ input: { search, categoryId, brandId, sort }, options, fetch }) {
     // Use a dummy base as we only care about the relative path
     const url = new URL(options.url!, 'http://a')
 
     if (search) url.searchParams.set('search', search)
-    if (Number.isInteger(categoryId))
+    if (categoryId)
       url.searchParams.set('categoryId', String(categoryId))
-    if (Number.isInteger(brandId))
+    if (brandId)
       url.searchParams.set('brandId', String(brandId))
     if (sort) url.searchParams.set('sort', sort)
 
-    return fetch({
+    const results = await fetch({
       url: url.pathname + url.search,
       method: options.method,
     })
+
+    return {
+      products: results?.products ?? [],
+      found: results?.products?.length > 0 ?? false,
+    }
   },
   useHook:
     ({ useData }) =>

framework/reactioncommerce/utils/index.ts

@@ -1,8 +1,4 @@
 export { default as handleFetchResponse } from './handle-fetch-response'
-export { default as getSearchVariables } from './get-search-variables'
-export { default as getSortVariables } from './get-sort-variables'
-export { default as getVendors } from './get-vendors'
-export { default as getCategories } from './get-categories'
 export { default as getAnonymousCartToken } from './get-anonymous-cart-token'
 export { default as getAnonymousCartId } from './get-cart-id'
 export * from './queries'