From aa227e3de2010ccfb576fabfd4cf5e7eba950053 Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Fri, 19 Feb 2021 17:04:58 -0500
Subject: [PATCH] Moved wishlist use-remove-item to provider
---
.../wishlist/WishlistCard/WishlistCard.tsx | 2 +-
framework/bigcommerce/provider.ts | 10 ++-
.../bigcommerce/wishlist/use-remove-item.tsx | 65 +++++++------------
.../bigcommerce/wishlist/use-wishlist.tsx | 6 +-
.../commerce/wishlist/use-remove-item.tsx | 27 +++++++-
5 files changed, 63 insertions(+), 47 deletions(-)
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<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()
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<typeof handler>
-export type RemoveItemInput = {
- id: string | number
-}
-
-export const fetcher: HookFetcher<any | null, RemoveItemBody> = (
- 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<any | null, RemoveItemBody>(
- 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<typeof handler>
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<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