Moved data hooks to new format

framework/bigcommerce/customer/use-customer.tsx

@@ -1,11 +1,10 @@
-import { HookHandler } from '@commerce/utils/types'
+import { SWRHook } from '@commerce/utils/types'
 import useCustomer, { UseCustomer } from '@commerce/customer/use-customer'
 import type { Customer, CustomerData } from '../api/customers'
-import type { BigcommerceProvider } from '..'
 
-export default useCustomer as UseCustomer<BigcommerceProvider>
+export default useCustomer as UseCustomer<typeof handler>
 
-export const handler: HookHandler<Customer | null> = {
+export const handler: SWRHook<Customer | null> = {
   fetchOptions: {
     url: '/api/bigcommerce/customers',
     method: 'GET',
@@ -14,11 +13,11 @@ export const handler: HookHandler<Customer | null> = {
     const data = await fetch<CustomerData | null>(options)
     return data?.customer ?? null
   },
-  useHook({ input, useData }) {
+  useHook: ({ useData }) => (input) => {
     return useData({
       swrOptions: {
         revalidateOnFocus: false,
-        ...input.swrOptions,
+        ...input?.swrOptions,
       },
     })
   },

framework/bigcommerce/product/use-search.tsx

@@ -1,9 +1,8 @@
-import { HookHandler } from '@commerce/utils/types'
+import { SWRHook } from '@commerce/utils/types'
 import useSearch, { UseSearch } from '@commerce/product/use-search'
 import type { SearchProductsData } from '../api/catalog/products'
-import type { BigcommerceProvider } from '..'
 
-export default useSearch as UseSearch<BigcommerceProvider>
+export default useSearch as UseSearch<typeof handler>
 
 export type SearchProductsInput = {
   search?: string
@@ -12,7 +11,7 @@ export type SearchProductsInput = {
   sort?: string
 }
 
-export const handler: HookHandler<
+export const handler: SWRHook<
   SearchProductsData,
   SearchProductsInput,
   SearchProductsInput
@@ -37,7 +36,7 @@ export const handler: HookHandler<
       method: options.method,
     })
   },
-  useHook({ input, useData }) {
+  useHook: ({ useData }) => (input = {}) => {
     return useData({
       input: [
         ['search', input.search],

framework/bigcommerce/wishlist/use-wishlist.tsx

@@ -1,13 +1,12 @@
 import { useMemo } from 'react'
-import { HookHandler } from '@commerce/utils/types'
+import { SWRHook } from '@commerce/utils/types'
 import useWishlist, { UseWishlist } from '@commerce/wishlist/use-wishlist'
 import type { Wishlist } from '../api/wishlist'
 import useCustomer from '../customer/use-customer'
-import type { BigcommerceProvider } from '..'
 
-export default useWishlist as UseWishlist<BigcommerceProvider>
+export default useWishlist as UseWishlist<typeof handler>
 
-export const handler: HookHandler<
+export const handler: SWRHook<
   Wishlist | null,
   { includeProducts?: boolean },
   { customerId?: number; includeProducts: boolean },
@@ -30,16 +29,16 @@ export const handler: HookHandler<
       method: options.method,
     })
   },
-  useHook({ input, useData }) {
+  useHook: ({ useData }) => (input) => {
     const { data: customer } = useCustomer()
     const response = useData({
       input: [
         ['customerId', (customer as any)?.id],
-        ['includeProducts', input.includeProducts],
+        ['includeProducts', input?.includeProducts],
       ],
       swrOptions: {
         revalidateOnFocus: false,
-        ...input.swrOptions,
+        ...input?.swrOptions,
       },
     })
 

framework/commerce/cart/use-cart.tsx

@@ -1,8 +1,8 @@
 import Cookies from 'js-cookie'
-import type { Cart } from '../types'
+import { useHook, useSWRHook } from '../utils/use-hook'
 import type { HookFetcherFn, SWRHook } from '../utils/types'
+import type { Cart } from '../types'
 import { Provider, useCommerce } from '..'
-import { useHook, useSWRHook } from '@commerce/utils/use-hook'
 
 export type FetchCartInput = {
   cartId?: Cart['id']

framework/commerce/customer/use-customer.tsx

@@ -1,56 +1,20 @@
+import { useHook, useSWRHook } from '../utils/use-hook'
+import { SWRFetcher } from '../utils/default-fetcher'
+import type { HookFetcherFn, SWRHook } from '../utils/types'
 import type { Customer } from '../types'
-import type {
-  Prop,
-  HookFetcherFn,
-  UseHookInput,
-  UseHookResponse,
-} from '../utils/types'
-import defaultFetcher from '../utils/default-fetcher'
-import useData from '../utils/use-data'
-import { Provider, useCommerce } from '..'
+import { Provider } from '..'
 
-export type UseCustomerHandler<P extends Provider> = Prop<
-  Prop<P, 'customer'>,
-  'useCustomer'
->
+export type UseCustomer<
+  H extends SWRHook<any, any, any> = SWRHook<Customer | null>
+> = ReturnType<H['useHook']>
 
-export type UseCustomerInput<P extends Provider> = UseHookInput<
-  UseCustomerHandler<P>
->
+export const fetcher: HookFetcherFn<Customer | null, any> = SWRFetcher
 
-export type CustomerResponse<P extends Provider> = UseHookResponse<
-  UseCustomerHandler<P>
->
+const fn = (provider: Provider) => provider.customer?.useCustomer!
 
-export type UseCustomer<P extends Provider> = Partial<
-  UseCustomerInput<P>
-> extends UseCustomerInput<P>
-  ? (input?: UseCustomerInput<P>) => CustomerResponse<P>
-  : (input: UseCustomerInput<P>) => CustomerResponse<P>
-
-export const fetcher = defaultFetcher as HookFetcherFn<Customer | null>
-
-export default function useCustomer<P extends Provider>(
-  input: UseCustomerInput<P> = {}
-) {
-  const { providerRef, fetcherRef } = useCommerce<P>()
-
-  const provider = providerRef.current
-  const opts = provider.customer?.useCustomer
-
-  const fetcherFn = opts?.fetcher ?? fetcher
-  const useHook = opts?.useHook ?? ((ctx) => ctx.useData())
-
-  return useHook({
-    input,
-    useData(ctx) {
-      const response = useData(
-        { ...opts!, fetcher: fetcherFn },
-        ctx?.input ?? [],
-        provider.fetcher ?? fetcherRef.current,
-        ctx?.swrOptions ?? input.swrOptions
-      )
-      return response
-    },
-  })
+const useCustomer: UseCustomer = (input) => {
+  const hook = useHook(fn)
+  return useSWRHook({ fetcher, ...hook })(input)
 }
+
+export default useCustomer

framework/commerce/index.tsx

@@ -21,13 +21,13 @@ export type Provider = CommerceConfig & {
     useRemoveItem?: MutationHook<any, any, any>
   }
   wishlist?: {
-    useWishlist?: HookHandler<Wishlist | null, any, any>
+    useWishlist?: SWRHook<Wishlist | null, any, any>
   }
   customer: {
-    useCustomer?: HookHandler<Customer | null, any, any>
+    useCustomer?: SWRHook<Customer | null, any, any>
   }
   products: {
-    useSearch?: HookHandler<SearchProductsData, any, any>
+    useSearch?: SWRHook<SearchProductsData, any, any>
   }
 }
 

framework/commerce/product/use-search.tsx

@@ -1,57 +1,20 @@
+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 {
-  Prop,
-  HookFetcherFn,
-  UseHookInput,
-  UseHookResponse,
-} from '../utils/types'
-import defaultFetcher from '../utils/default-fetcher'
-import useData from '../utils/use-data'
-import { Provider, useCommerce } from '..'
-import { BigcommerceProvider } from '@framework'
+import { Provider } from '..'
 
-export type UseSearchHandler<P extends Provider> = Prop<
-  Prop<P, 'products'>,
-  'useSearch'
->
+export type UseSearch<
+  H extends SWRHook<any, any, any> = SWRHook<SearchProductsData>
+> = ReturnType<H['useHook']>
 
-export type UseSeachInput<P extends Provider> = UseHookInput<
-  UseSearchHandler<P>
->
+export const fetcher: HookFetcherFn<SearchProductsData, any> = SWRFetcher
 
-export type SearchResponse<P extends Provider> = UseHookResponse<
-  UseSearchHandler<P>
->
+const fn = (provider: Provider) => provider.products?.useSearch!
 
-export type UseSearch<P extends Provider> = Partial<
-  UseSeachInput<P>
-> extends UseSeachInput<P>
-  ? (input?: UseSeachInput<P>) => SearchResponse<P>
-  : (input: UseSeachInput<P>) => SearchResponse<P>
-
-export const fetcher = defaultFetcher as HookFetcherFn<SearchProductsData>
-
-export default function useSearch<P extends Provider>(
-  input: UseSeachInput<P> = {}
-) {
-  const { providerRef, fetcherRef } = useCommerce<P>()
-
-  const provider = providerRef.current
-  const opts = provider.products?.useSearch
-
-  const fetcherFn = opts?.fetcher ?? fetcher
-  const useHook = opts?.useHook ?? ((ctx) => ctx.useData())
-
-  return useHook({
-    input,
-    useData(ctx) {
-      const response = useData(
-        { ...opts!, fetcher: fetcherFn },
-        ctx?.input ?? [],
-        provider.fetcher ?? fetcherRef.current,
-        ctx?.swrOptions ?? input.swrOptions
-      )
-      return response
-    },
-  })
+const useSearch: UseSearch = (input) => {
+  const hook = useHook(fn)
+  return useSWRHook({ fetcher, ...hook })(input)
 }
+
+export default useSearch

framework/commerce/utils/default-fetcher.ts

@@ -1,6 +1,6 @@
 import type { HookFetcherFn } from './types'
 
-const defaultFetcher: HookFetcherFn<any> = ({ options, fetch }) =>
+export const SWRFetcher: HookFetcherFn<any, any> = ({ options, fetch }) =>
   fetch(options)
 
 export const mutationFetcher: HookFetcherFn<any, any> = ({
@@ -9,4 +9,4 @@ export const mutationFetcher: HookFetcherFn<any, any> = ({
   fetch,
 }) => fetch({ ...options, body: input })
 
-export default defaultFetcher
+export default SWRFetcher

framework/commerce/utils/use-hook.ts

@@ -1,5 +1,5 @@
 import { useCallback } from 'react'
-import type { Fetcher, MutationHook, PickRequired, SWRHook } from './types'
+import type { MutationHook, PickRequired, SWRHook } from './types'
 import { Provider, useCommerce } from '..'
 import useData from './use-data'
 

framework/commerce/wishlist/use-wishlist.tsx

@@ -1,56 +1,25 @@
+import { useHook, useSWRHook } from '../utils/use-hook'
+import { SWRFetcher } from '../utils/default-fetcher'
+import type { HookFetcherFn, SWRHook } from '../utils/types'
 import type { Wishlist } from '../types'
-import type {
-  Prop,
-  HookFetcherFn,
-  UseHookInput,
-  UseHookResponse,
-} from '../utils/types'
-import defaultFetcher from '../utils/default-fetcher'
-import useData from '../utils/use-data'
-import { Provider, useCommerce } from '..'
+import type { Provider } from '..'
 
-export type UseWishlistHandler<P extends Provider> = Prop<
-  Prop<P, 'wishlist'>,
-  'useWishlist'
->
+export type UseWishlist<
+  H extends SWRHook<any, any, any> = SWRHook<
+    Wishlist | null,
+    { includeProducts?: boolean },
+    { customerId?: number; includeProducts: boolean },
+    { isEmpty?: boolean }
+  >
+> = ReturnType<H['useHook']>
 
-export type UseWishlistInput<P extends Provider> = UseHookInput<
-  UseWishlistHandler<P>
->
+export const fetcher: HookFetcherFn<Wishlist | null, any> = SWRFetcher
 
-export type WishlistResponse<P extends Provider> = UseHookResponse<
-  UseWishlistHandler<P>
->
+const fn = (provider: Provider) => provider.wishlist?.useWishlist!
 
-export type UseWishlist<P extends Provider> = Partial<
-  UseWishlistInput<P>
-> extends UseWishlistInput<P>
-  ? (input?: UseWishlistInput<P>) => WishlistResponse<P>
-  : (input: UseWishlistInput<P>) => WishlistResponse<P>
-
-export const fetcher = defaultFetcher as HookFetcherFn<Wishlist | null>
-
-export default function useWishlist<P extends Provider>(
-  input: UseWishlistInput<P> = {}
-) {
-  const { providerRef, fetcherRef } = useCommerce<P>()
-
-  const provider = providerRef.current
-  const opts = provider.wishlist?.useWishlist
-
-  const fetcherFn = opts?.fetcher ?? fetcher
-  const useHook = opts?.useHook ?? ((ctx) => ctx.useData())
-
-  return useHook({
-    input,
-    useData(ctx) {
-      const response = useData(
-        { ...opts!, fetcher: fetcherFn },
-        ctx?.input ?? [],
-        provider.fetcher ?? fetcherRef.current,
-        ctx?.swrOptions ?? input.swrOptions
-      )
-      return response
-    },
-  })
+const useWishlist: UseWishlist = (input) => {
+  const hook = useHook(fn)
+  return useSWRHook({ fetcher, ...hook })(input)
 }
+
+export default useWishlist