Moved wishlist use-remove-item to provider

components/wishlist/WishlistCard/WishlistCard.tsx

@@ -22,7 +22,7 @@ const WishlistCard: FC<Props> = ({ product }) => {
     baseAmount: product.prices?.retailPrice?.value,
     currencyCode: product.prices?.price?.currencyCode!,
   })
-  const removeItem = useRemoveItem({ includeProducts: true })
+  const removeItem = useRemoveItem({ wishlist: { includeProducts: true } })
   const [loading, setLoading] = useState(false)
   const [removing, setRemoving] = useState(false)
   const addItem = useAddItem()

framework/bigcommerce/provider.ts

@@ -2,7 +2,11 @@ import { handler as useCart } from './cart/use-cart'
 import { handler as useAddItem } from './cart/use-add-item'
 import { handler as useUpdateItem } from './cart/use-update-item'
 import { handler as useRemoveItem } from './cart/use-remove-item'
+
 import { handler as useWishlist } from './wishlist/use-wishlist'
+import { handler as useWishlistAddItem } from './wishlist/use-add-item'
+import { handler as useWishlistRemoveItem } from './wishlist/use-remove-item'
+
 import { handler as useCustomer } from './customer/use-customer'
 import { handler as useSearch } from './product/use-search'
 import fetcher from './fetcher'
@@ -12,7 +16,11 @@ export const bigcommerceProvider = {
   cartCookie: 'bc_cartId',
   fetcher,
   cart: { useCart, useAddItem, useUpdateItem, useRemoveItem },
-  wishlist: { useWishlist },
+  wishlist: {
+    useWishlist,
+    useAddItem: useWishlistAddItem,
+    useRemoveItem: useWishlistRemoveItem,
+  },
   customer: { useCustomer },
   products: { useSearch },
 }

framework/bigcommerce/wishlist/use-remove-item.tsx

@@ -1,43 +1,32 @@
 import { useCallback } from 'react'
-import { HookFetcher } from '@commerce/utils/types'
+import type { MutationHook } from '@commerce/utils/types'
 import { CommerceError } from '@commerce/utils/errors'
-import useWishlistRemoveItem from '@commerce/wishlist/use-remove-item'
+import useRemoveItem, {
-import type { RemoveItemBody } from '../api/wishlist'
+  RemoveItemInput,
+  UseRemoveItem,
+} from '@commerce/wishlist/use-remove-item'
+import type { RemoveItemBody, Wishlist } from '../api/wishlist'
 import useCustomer from '../customer/use-customer'
-import useWishlist from './use-wishlist'
+import useWishlist, { UseWishlistInput } from './use-wishlist'
 
-const defaultOpts = {
+export default useRemoveItem as UseRemoveItem<typeof handler>
-  url: '/api/bigcommerce/wishlist',
-  method: 'DELETE',
-}
 
-export type RemoveItemInput = {
+export const handler: MutationHook<
-  id: string | number
+  Wishlist | null,
-}
+  { wishlist?: UseWishlistInput },
-
+  RemoveItemInput,
-export const fetcher: HookFetcher<any | null, RemoveItemBody> = (
+  RemoveItemBody
-  options,
+> = {
-  { itemId },
+  fetchOptions: {
-  fetch
+    url: '/api/bigcommerce/wishlist',
-) => {
+    method: 'DELETE',
-  return fetch({
+  },
-    ...defaultOpts,
+  useHook: ({ fetch }) => ({ wishlist } = {}) => {
-    ...options,
-    body: { itemId },
-  })
-}
-
-export function extendHook(customFetcher: typeof fetcher) {
-  const useRemoveItem = (opts?: any) => {
     const { data: customer } = useCustomer()
-    const { revalidate } = useWishlist(opts)
+    const { revalidate } = useWishlist(wishlist)
-    const fn = useWishlistRemoveItem<any | null, RemoveItemBody>(
-      defaultOpts,
-      customFetcher
-    )
 
     return useCallback(
-      async function removeItem(input: RemoveItemInput) {
+      async function removeItem(input) {
         if (!customer) {
           // A signed customer is required in order to have a wishlist
           throw new CommerceError({
@@ -45,17 +34,11 @@ export function extendHook(customFetcher: typeof fetcher) {
           })
         }
 
-        const data = await fn({ itemId: String(input.id) })
+        const data = await fetch({ input: { itemId: String(input.id) } })
         await revalidate()
         return data
       },
-      [fn, revalidate, customer]
+      [fetch, revalidate, customer]
     )
-  }
+  },
-
-  useRemoveItem.extend = extendHook
-
-  return useRemoveItem
 }
-
-export default extendHook(fetcher)

framework/bigcommerce/wishlist/use-wishlist.tsx

@@ -4,12 +4,14 @@ import useWishlist, { UseWishlist } from '@commerce/wishlist/use-wishlist'
 import type { Wishlist } from '../api/wishlist'
 import useCustomer from '../customer/use-customer'
 
+export type UseWishlistInput = { includeProducts?: boolean }
+
 export default useWishlist as UseWishlist<typeof handler>
 
 export const handler: SWRHook<
   Wishlist | null,
-  { includeProducts?: boolean },
+  UseWishlistInput,
-  { customerId?: number; includeProducts: boolean },
+  { customerId?: number } & UseWishlistInput,
   { isEmpty?: boolean }
 > = {
   fetchOptions: {

framework/commerce/wishlist/use-remove-item.tsx

@@ -1,5 +1,28 @@
-import useAction from '../utils/use-action'
+import { useHook, useMutationHook } from '../utils/use-hook'
+import { mutationFetcher } from '../utils/default-fetcher'
+import type { HookFetcherFn, MutationHook } from '../utils/types'
+import type { Provider } from '..'
 
-const useRemoveItem = useAction
+export type RemoveItemInput = {
+  id: string | number
+}
+
+export type UseRemoveItem<
+  H extends MutationHook<any, any, any> = MutationHook<
+    any | null,
+    { wishlist?: any },
+    RemoveItemInput,
+    {}
+  >
+> = ReturnType<H['useHook']>
+
+export const fetcher: HookFetcherFn<any | null, {}> = mutationFetcher
+
+const fn = (provider: Provider) => provider.wishlist?.useRemoveItem!
+
+const useRemoveItem: UseRemoveItem = (input) => {
+  const hook = useHook(fn)
+  return useMutationHook({ fetcher, ...hook })(input)
+}
 
 export default useRemoveItem