4
0
forked from crowetic/commerce

Moved wishlist use-remove-item to provider

This commit is contained in:
Luis Alvarez 2021-02-19 17:04:58 -05:00
parent f4c067982a
commit aa227e3de2
5 changed files with 63 additions and 47 deletions

View File

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

View File

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

View File

@ -1,43 +1,32 @@
import { useCallback } from 'react' import { useCallback } from 'react'
import { HookFetcher } from '@commerce/utils/types' import type { MutationHook } from '@commerce/utils/types'
import { CommerceError } from '@commerce/utils/errors' 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 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 { data: customer } = useCustomer()
const { revalidate } = useWishlist(opts) const { revalidate } = useWishlist(wishlist)
const fn = useWishlistRemoveItem<any | null, RemoveItemBody>(
defaultOpts,
customFetcher
)
return useCallback( return useCallback(
async function removeItem(input: RemoveItemInput) { async function removeItem(input) {
if (!customer) { if (!customer) {
// A signed customer is required in order to have a wishlist // A signed customer is required in order to have a wishlist
throw new CommerceError({ 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() await revalidate()
return data return data
}, },
[fn, revalidate, customer] [fetch, revalidate, customer]
) )
} },
useRemoveItem.extend = extendHook
return useRemoveItem
} }
export default extendHook(fetcher)

View File

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

View File

@ -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 export default useRemoveItem