Updated useSearch hook

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

@@ -12,7 +12,7 @@ const LIMIT = 12
 // Return current cart info
 const getProducts: ProductsEndpoint['handlers']['getProducts'] = async ({
   res,
-  body: { search, category, brand, sort },
+  body: { search, categoryId, brandId, sort },
   config,
   commerce,
 }) => {
@@ -24,11 +24,11 @@ const getProducts: ProductsEndpoint['handlers']['getProducts'] = async ({
 
   if (search) url.searchParams.set('keyword', search)
 
-  if (category && Number.isInteger(Number(category)))
+  if (categoryId && Number.isInteger(Number(categoryId)))
-    url.searchParams.set('categories:in', category)
+    url.searchParams.set('categories:in', categoryId)
 
-  if (brand && Number.isInteger(Number(brand)))
+  if (brandId && Number.isInteger(Number(brandId)))
-    url.searchParams.set('brand_id', brand)
+    url.searchParams.set('brand_id', brandId)
 
   if (sort) {
     const [_sort, direction] = sort.split('-')

framework/bigcommerce/product/use-search.tsx

@@ -1,6 +1,6 @@
 import { SWRHook } from '@commerce/utils/types'
 import useSearch, { UseSearch } from '@commerce/product/use-search'
-import type { SearchProductsData } from '../api/catalog/products'
+import type { SearchProductsHook } from '../types/product'
 
 export default useSearch as UseSearch<typeof handler>
 
@@ -11,13 +11,9 @@ export type SearchProductsInput = {
   sort?: string
 }
 
-export const handler: SWRHook<
+export const handler: SWRHook<SearchProductsHook> = {
-  SearchProductsData,
-  SearchProductsInput,
-  SearchProductsInput
-> = {
   fetchOptions: {
-    url: '/api/bigcommerce/catalog/products',
+    url: '/api/catalog/products',
     method: 'GET',
   },
   fetcher({ input: { search, categoryId, brandId, sort }, options, fetch }) {

framework/commerce/product/use-search.tsx

@@ -1,14 +1,14 @@
 import { useHook, useSWRHook } from '../utils/use-hook'
 import { SWRFetcher } from '../utils/default-fetcher'
 import type { HookFetcherFn, SWRHook } from '../utils/types'
-import type { SearchProductsData } from '../types'
+import type { SearchProductsHook } from '../types/product'
-import { Provider } from '..'
+import type { Provider } from '..'
 
 export type UseSearch<
-  H extends SWRHook<any, any, any> = SWRHook<SearchProductsData>
+  H extends SWRHook<any> = SWRHook<SearchProductsHook>
 > = ReturnType<H['useHook']>
 
-export const fetcher: HookFetcherFn<SearchProductsData, any> = SWRFetcher
+export const fetcher: HookFetcherFn<SearchProductsHook> = SWRFetcher
 
 const fn = (provider: Provider) => provider.products?.useSearch!
 

framework/commerce/types/product.ts

@@ -42,8 +42,23 @@ export type Product = {
   options: ProductOption[]
 }
 
+export type SearchProductsBody = {
+  search?: string
+  categoryId?: string
+  brandId?: string
+  sort?: string
+}
+
 export type ProductTypes = {
   product: Product
+  searchBody: SearchProductsBody
+}
+
+export type SearchProductsHook<T extends ProductTypes = ProductTypes> = {
+  data: T['product'][]
+  body: T['searchBody']
+  input: T['searchBody']
+  fetchInput: T['searchBody']
 }
 
 export type ProductsSchema<T extends ProductTypes = ProductTypes> = {
@@ -55,12 +70,7 @@ export type ProductsSchema<T extends ProductTypes = ProductTypes> = {
           products: T['product'][]
           found: boolean
         }
-        body: {
+        body: SearchProductsHook<T>['body']
-          search?: string
-          category?: string
-          brand?: string
-          sort?: string
-        }
       }
     }
   }