use-search

packages/sylius/src/fetcher.ts

@@ -2,19 +2,16 @@ import { Fetcher } from '@vercel/commerce/utils/types'
 import { API_URL } from './const'
 import { handleFetchResponse } from './utils'
 
-const fetcher: Fetcher = async ({ url = API_URL, method = 'POST', body }) => {
-  //const token = getToken()
-
-  return handleFetchResponse(
-    await fetch(url!, {
-      method,
-      body,
-      headers: {
-        //Authorization: `JWT ${token}`,
-        'Content-Type': 'application/json',
-      },
-    })
-  )
+const fetcher: Fetcher = async ({ url = '', method = 'POST', body }) => {
+  const res = await fetch(API_URL + url!, {
+    method: method,
+    headers: {
+      'Content-Type': 'application/json',
+      accept: 'application/json, text/plain',
+    },
+    body: body ? JSON.stringify(body) : undefined,
+  })
+  return handleFetchResponse(res)
 }
 
 export default fetcher

packages/sylius/src/next.config.cjs

@@ -5,4 +5,7 @@ module.exports = {
   images: {
     domains: [process.env.NEXT_PUBLIC_SYLIUS_ALLOWED_IMAGE_DOMAIN],
   },
+  env: {
+    COMMERCE_SEARCH_ENABLED: process.env.COMMERCE_SEARCH_ENABLED,
+  },
 }

packages/sylius/src/product/use-search.ts

@@ -0,0 +1,68 @@
+import { SWRHook } from '@vercel/commerce/utils/types'
+import useSearch, { UseSearch } from '@vercel/commerce/product/use-search'
+import { normalizeProduct } from '../utils/normalize/normalize-product'
+import { SyliusProduct } from 'types/products'
+import { url } from 'inspector'
+import { API_URL } from './../const'
+import { Product } from '@vercel/commerce/types/product'
+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: '/products',
+    method: 'GET',
+  },
+  fetcher: async ({ input: { search, categoryId, sort }, options, fetch }) => {
+    const url = new URL(options.url!, API_URL)
+
+    if (categoryId) url.searchParams.set('productTaxons.taxon.code', categoryId)
+    if (search) url.searchParams.set('translations.name', search)
+    if (sort) {
+      switch (sort) {
+        case 'latest-desc':
+          url.searchParams.set('order[createdAt]', 'desc')
+          break
+        case 'price-desc':
+          url.searchParams.set('order[price]', 'desc')
+          break
+        case 'price-asc':
+          url.searchParams.set('order[price]', 'asc')
+          break
+        default:
+          break
+      }
+    }
+    const syliusProducts = await fetch({
+      url: url.pathname + url.search,
+      method: 'GET',
+    })
+    const products = syliusProducts.map((syliusProduct: SyliusProduct) =>
+      normalizeProduct(syliusProduct)
+    )
+    return { products: products, found: products.length }
+  },
+  useHook:
+    ({ useData }) =>
+    (input = {}) => {
+      return useData({
+        input: [
+          ['search', input.search],
+          ['categoryId', input.categoryId],
+          ['brandId', input.brandId],
+          ['sort', input.sort],
+        ],
+        swrOptions: {
+          revalidateOnFocus: false,
+          ...input.swrOptions,
+        },
+      })
+    },
+}

packages/sylius/src/product/use-search.tsx

@@ -1,17 +0,0 @@
-import { SWRHook } from '@vercel/commerce/utils/types'
-import useSearch, { UseSearch } from '@vercel/commerce/product/use-search'
-export default useSearch as UseSearch<typeof handler>
-
-export const handler: SWRHook<any> = {
-  fetchOptions: {
-    query: '',
-  },
-  async fetcher({ input, options, fetch }) {},
-  useHook: () => () => {
-    return {
-      data: {
-        products: [],
-      },
-    }
-  },
-}

packages/sylius/src/types/products.ts

@@ -1,3 +1,5 @@
+import { SyliusCategorie } from './site'
+
 export interface SyliusProduct {
   id: number
   name: string
@@ -7,6 +9,7 @@ export interface SyliusProduct {
   images: SyliusProductImage[]
   variants: SyliusProductVariant[]
   options: SyliusProductOption[]
+  productTaxons: SyliusProductTaxon[]
 }
 
 export interface SyliusProductImage {
@@ -40,3 +43,8 @@ export interface SyliusProductOptionValues {
   code: string
   value: string
 }
+
+export interface SyliusProductTaxon {
+  id: number
+  taxon: SyliusCategorie
+}

packages/sylius/src/utils/handle-fetch-response.ts

@@ -12,13 +12,7 @@ export async function getAsyncError(res: Response) {
 
 const handleFetchResponse = async (res: Response) => {
   if (res.ok) {
-    const { data, errors } = await res.json()
-
-    if (errors && errors.length) {
-      throw getError(errors, res.status)
-    }
-
-    return data
+    return await res.json()
   }
 
   throw await getAsyncError(res)

packages/sylius/src/utils/normalize/normalize-site.ts

@@ -2,7 +2,8 @@ import { SyliusCategorie } from 'types/site'
 
 export const normalizeCategorie = (categorie: SyliusCategorie) => {
   return {
-    id: categorie.id.toString(),
+    //We use the code as id because Sylius need the code in the request parameter to filter products
+    id: categorie.code,
     name: categorie.name,
     slug: categorie.code,
     path: `/${categorie.code}`,