Moved useWishlist to use new handler

framework/bigcommerce/cart/use-cart.tsx

@@ -1,4 +1,4 @@
-import useCommerceCart, { UseCart } from '@commerce/cart/use-cart'
+import useCart, { UseCart } from '@commerce/cart/use-cart'
 import type { BigcommerceProvider } from '..'
 
-export default useCommerceCart as UseCart<BigcommerceProvider>
+export default useCart as UseCart<BigcommerceProvider>

framework/bigcommerce/provider.tsx

@@ -3,6 +3,8 @@ import { FetcherError } from '@commerce/utils/errors'
 import type { Fetcher, HookHandler } from '@commerce/utils/types'
 import type { FetchCartInput } from '@commerce/cart/use-cart'
 import { normalizeCart } from './lib/normalize'
+import type { Wishlist } from './api/wishlist'
+import useCustomer from './customer/use-customer'
 import type { Cart } from './types'
 
 async function getText(res: Response) {
@@ -76,9 +78,9 @@ const useCart: HookHandler<
 }
 
 const useWishlist: HookHandler<
-  Cart | null,
+  Wishlist | null,
-  {},
+  { includeProducts?: boolean },
-  FetchCartInput,
+  { customerId?: number; includeProducts: boolean },
   any,
   any,
   { isEmpty?: boolean }
@@ -87,6 +89,45 @@ const useWishlist: HookHandler<
     url: '/api/bigcommerce/wishlist',
     method: 'GET',
   },
+  fetcher({ input: { customerId, includeProducts }, options, fetch }) {
+    if (!customerId) return null
+
+    // Use a dummy base as we only care about the relative path
+    const url = new URL(options.url!, 'http://a')
+
+    if (includeProducts) url.searchParams.set('products', '1')
+
+    return fetch({
+      url: url.pathname + url.search,
+      method: options.method,
+    })
+  },
+  useHook({ input, useData }) {
+    const { data: customer } = useCustomer()
+    const response = useData({
+      input: [
+        ['customerId', customer?.id],
+        ['includeProducts', input.includeProducts],
+      ],
+      swrOptions: {
+        revalidateOnFocus: false,
+        ...input.swrOptions,
+      },
+    })
+
+    return useMemo(
+      () =>
+        Object.create(response, {
+          isEmpty: {
+            get() {
+              return (response.data?.items?.length || 0) <= 0
+            },
+            enumerable: true,
+          },
+        }),
+      [response]
+    )
+  },
 }
 
 export const bigcommerceProvider = {

framework/bigcommerce/wishlist/use-wishlist.tsx

@@ -1,78 +1,4 @@
-import { HookFetcher } from '@commerce/utils/types'
+import useWishlist, { UseWishlist } from '@commerce/wishlist/use-wishlist'
-import { SwrOptions } from '@commerce/utils/use-data'
+import type { BigcommerceProvider } from '..'
-import useResponse from '@commerce/utils/use-response'
-import useCommerceWishlist from '@commerce/wishlist/use-wishlist'
-import type { Wishlist } from '../api/wishlist'
-import useCustomer from '../customer/use-customer'
 
-const defaultOpts = {
+export default useWishlist as UseWishlist<BigcommerceProvider>
-  url: '/api/bigcommerce/wishlist',
-  method: 'GET',
-}
-
-export type { Wishlist }
-
-export interface UseWishlistOptions {
-  includeProducts?: boolean
-}
-
-export interface UseWishlistInput extends UseWishlistOptions {
-  customerId?: number
-}
-
-export const fetcher: HookFetcher<Wishlist | null, UseWishlistInput> = (
-  options,
-  { customerId, includeProducts },
-  fetch
-) => {
-  if (!customerId) return null
-
-  // Use a dummy base as we only care about the relative path
-  const url = new URL(options?.url ?? defaultOpts.url, 'http://a')
-
-  if (includeProducts) url.searchParams.set('products', '1')
-
-  return fetch({
-    url: url.pathname + url.search,
-    method: options?.method ?? defaultOpts.method,
-  })
-}
-
-export function extendHook(
-  customFetcher: typeof fetcher,
-  swrOptions?: SwrOptions<Wishlist | null, UseWishlistInput>
-) {
-  const useWishlist = ({ includeProducts }: UseWishlistOptions = {}) => {
-    const { data: customer } = useCustomer()
-    const response = useCommerceWishlist(
-      defaultOpts,
-      [
-        ['customerId', customer?.id],
-        ['includeProducts', includeProducts],
-      ],
-      customFetcher,
-      {
-        revalidateOnFocus: false,
-        ...swrOptions,
-      }
-    )
-    const res = useResponse(response, {
-      descriptors: {
-        isEmpty: {
-          get() {
-            return (response.data?.items?.length || 0) <= 0
-          },
-          set: (x) => x,
-        },
-      },
-    })
-
-    return res
-  }
-
-  useWishlist.extend = extendHook
-
-  return useWishlist
-}
-
-export default extendHook(fetcher)

framework/commerce/cart/use-cart.tsx

@@ -60,7 +60,7 @@ export default function useCart<P extends Provider>(
     input,
     useData(ctx) {
       const response = useData(
-        { ...opts, fetcher: wrapper },
+        { ...opts!, fetcher: wrapper },
         ctx?.input ?? [],
         provider.fetcher ?? fetcherRef.current,
         ctx?.swrOptions ?? input.swrOptions

framework/commerce/index.tsx

@@ -8,18 +8,18 @@ import {
 } from 'react'
 import * as React from 'react'
 import { Fetcher, HookHandler } from './utils/types'
-import { Cart } from './types'
 import type { FetchCartInput } from './cart/use-cart'
+import type { Cart, Wishlist } from './types'
 
 const Commerce = createContext<CommerceContextValue<any> | {}>({})
 
 export type Provider = CommerceConfig & {
   fetcher: Fetcher
   cart?: {
-    useCart?: HookHandler<Cart | null, {}, FetchCartInput>
+    useCart?: HookHandler<Cart | null, any, FetchCartInput>
   }
   wishlist?: {
-    useWishlist?: HookHandler<Cart | null, {}, FetchCartInput>
+    useWishlist?: HookHandler<Wishlist | null, any, any>
   }
 }
 

framework/commerce/types.ts

@@ -1,3 +1,5 @@
+import type { Wishlist as BCWishlist } from '@framework/api/wishlist'
+
 export interface Discount {
   // The value of the discount, can be an amount or percentage
   value: number
@@ -87,6 +89,9 @@ export interface Cart {
   discounts?: Discount[]
 }
 
+// TODO: Properly define this type
+export interface Wishlist extends BCWishlist {}
+
 /**
  * Cart mutations
  */

framework/commerce/utils/types.ts

@@ -33,21 +33,20 @@ export type HookFetcher<Data, Input = null, Result = any> = (
 
 export type HookFetcherFn<
   Data,
-  Input = unknown,
+  Input = never,
   Result = any,
   Body = any
 > = (context: {
-  options: HookFetcherOptions | null
+  options: HookFetcherOptions
   input: Input
   fetch: <T = Result, B = Body>(options: FetcherOptions<B>) => Promise<T>
   normalize?(data: Result): Data
 }) => Data | Promise<Data>
 
-export type HookFetcherOptions = {
+export type HookFetcherOptions = { method?: string } & (
-  query?: string
+  | { query: string; url?: string }
-  url?: string
+  | { query?: string; url: string }
-  method?: string
+)
-}
 
 export type HookInputValue = string | number | boolean | undefined
 
@@ -63,7 +62,7 @@ export type HookHandler<
   // Input expected by the hook
   Input extends { [k: string]: unknown } = {},
   // Input expected before doing a fetch operation
-  FetchInput extends HookFetchInput = never,
+  FetchInput extends HookFetchInput = {},
   // Data returned by the API after a fetch operation
   Result = any,
   // Body expected by the API endpoint
@@ -78,7 +77,7 @@ export type HookHandler<
       swrOptions?: SwrOptions<Data, FetchInput, Result>
     }): ResponseState<Data>
   }): ResponseState<Data> & State
-  fetchOptions?: HookFetcherOptions
+  fetchOptions: HookFetcherOptions
   fetcher?: HookFetcherFn<Data, FetchInput, Result, Body>
   normalizer?(data: Result): Data
 }

framework/commerce/utils/use-data-2.ts

@@ -17,7 +17,7 @@ export type ResponseState<Result> = responseInterface<Result, CommerceError> & {
 export type UseData = <
   Data = any,
   Input extends { [k: string]: unknown } = {},
-  FetchInput extends HookFetchInput = never,
+  FetchInput extends HookFetchInput = {},
   Result = any,
   Body = any
 >(
@@ -33,7 +33,7 @@ export type UseData = <
 const useData: UseData = (options, input, fetcherFn, swrOptions) => {
   const hookInput = Array.isArray(input) ? input : Object.entries(input)
   const fetcher = async (
-    url?: string,
+    url: string,
     query?: string,
     method?: string,
     ...args: any[]

framework/commerce/wishlist/use-wishlist.tsx

@@ -1,20 +1,62 @@
+import type { Wishlist } from '../types'
 import type {
-  HookSwrInput,
+  Prop,
-  HookFetcher,
+  HookFetcherFn,
-  HookFetcherOptions,
+  UseHookInput,
+  UseHookResponse,
 } from '../utils/types'
-import useData, { ResponseState, SwrOptions } from '../utils/use-data'
+import useData from '../utils/use-data-2'
+import { Provider, useCommerce } from '..'
 
-export type WishlistResponse<Result> = ResponseState<Result> & {
+export type UseWishlistHandler<P extends Provider> = Prop<
-  isEmpty?: boolean
+  Prop<P, 'wishlist'>,
+  'useWishlist'
+>
+
+export type UseWishlistInput<P extends Provider> = UseHookInput<
+  UseWishlistHandler<P>
+>
+
+export type WishlistResponse<P extends Provider> = UseHookResponse<
+  UseWishlistHandler<P>
+>
+
+export type UseWishlist<P extends Provider> = Partial<
+  WishlistResponse<P>
+> extends WishlistResponse<P>
+  ? (input?: WishlistResponse<P>) => WishlistResponse<P>
+  : (input: WishlistResponse<P>) => WishlistResponse<P>
+
+export const fetcher: HookFetcherFn<Wishlist | null> = async ({
+  options,
+  fetch,
+  normalize,
+}) => {
+  const data = await fetch({ ...options })
+  return data && normalize ? normalize(data) : data
 }
 
-export default function useWishlist<Result, Input = null>(
+export default function useWishlist<P extends Provider>(
-  options: HookFetcherOptions,
+  input: UseWishlistInput<P> = {}
-  input: HookSwrInput,
+) {
-  fetcherFn: HookFetcher<Result, Input>,
+  const { providerRef, fetcherRef } = useCommerce<P>()
-  swrOptions?: SwrOptions<Result, Input>
+
-): WishlistResponse<Result> {
+  const provider = providerRef.current
-  const response = useData(options, input, fetcherFn, swrOptions)
+  const opts = provider.wishlist?.useWishlist
-  return response
+
+  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
+    },
+  })
 }