diff --git a/components/wishlist/WishlistCard/WishlistCard.tsx b/components/wishlist/WishlistCard/WishlistCard.tsx index 38663ab68..5e4cce72a 100644 --- a/components/wishlist/WishlistCard/WishlistCard.tsx +++ b/components/wishlist/WishlistCard/WishlistCard.tsx @@ -22,7 +22,7 @@ const WishlistCard: FC = ({ 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() diff --git a/framework/bigcommerce/provider.ts b/framework/bigcommerce/provider.ts index e233dad04..bd2fbe34f 100644 --- a/framework/bigcommerce/provider.ts +++ b/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 }, } diff --git a/framework/bigcommerce/wishlist/use-remove-item.tsx b/framework/bigcommerce/wishlist/use-remove-item.tsx index d00b3e78b..622f321db 100644 --- a/framework/bigcommerce/wishlist/use-remove-item.tsx +++ b/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 type { RemoveItemBody } from '../api/wishlist' +import useRemoveItem, { + 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 = { - url: '/api/bigcommerce/wishlist', - method: 'DELETE', -} +export default useRemoveItem as UseRemoveItem -export type RemoveItemInput = { - id: string | number -} - -export const fetcher: HookFetcher = ( - options, - { itemId }, - fetch -) => { - return fetch({ - ...defaultOpts, - ...options, - body: { itemId }, - }) -} - -export function extendHook(customFetcher: typeof fetcher) { - const useRemoveItem = (opts?: any) => { +export const handler: MutationHook< + Wishlist | null, + { wishlist?: UseWishlistInput }, + RemoveItemInput, + RemoveItemBody +> = { + fetchOptions: { + url: '/api/bigcommerce/wishlist', + method: 'DELETE', + }, + useHook: ({ fetch }) => ({ wishlist } = {}) => { const { data: customer } = useCustomer() - const { revalidate } = useWishlist(opts) - const fn = useWishlistRemoveItem( - defaultOpts, - customFetcher - ) + const { revalidate } = useWishlist(wishlist) 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) diff --git a/framework/bigcommerce/wishlist/use-wishlist.tsx b/framework/bigcommerce/wishlist/use-wishlist.tsx index 877a857c6..3efba7ffd 100644 --- a/framework/bigcommerce/wishlist/use-wishlist.tsx +++ b/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 export const handler: SWRHook< Wishlist | null, - { includeProducts?: boolean }, - { customerId?: number; includeProducts: boolean }, + UseWishlistInput, + { customerId?: number } & UseWishlistInput, { isEmpty?: boolean } > = { fetchOptions: { diff --git a/framework/commerce/wishlist/use-remove-item.tsx b/framework/commerce/wishlist/use-remove-item.tsx index dfa60c363..c8c34a5af 100644 --- a/framework/commerce/wishlist/use-remove-item.tsx +++ b/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 = MutationHook< + any | null, + { wishlist?: any }, + RemoveItemInput, + {} + > +> = ReturnType + +export const fetcher: HookFetcherFn = mutationFetcher + +const fn = (provider: Provider) => provider.wishlist?.useRemoveItem! + +const useRemoveItem: UseRemoveItem = (input) => { + const hook = useHook(fn) + return useMutationHook({ fetcher, ...hook })(input) +} export default useRemoveItem