forked from crowetic/commerce
Added useRemoveItem and other fixes
This commit is contained in:
parent
2cd41ee135
commit
0f4f061cbd
@ -2,6 +2,7 @@ import React, { FC, useState } from 'react'
|
||||
import cn from 'classnames'
|
||||
import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products'
|
||||
import useAddItem from '@lib/bigcommerce/wishlist/use-add-item'
|
||||
import useRemoveItem from '@lib/bigcommerce/wishlist/use-remove-item'
|
||||
import useWishlist from '@lib/bigcommerce/wishlist/use-wishlist'
|
||||
import useCustomer from '@lib/bigcommerce/use-customer'
|
||||
import { Heart } from '@components/icons'
|
||||
@ -19,19 +20,21 @@ const WishlistButton: FC<Props> = ({
|
||||
...props
|
||||
}) => {
|
||||
const addItem = useAddItem()
|
||||
const removeItem = useRemoveItem()
|
||||
const { data } = useWishlist()
|
||||
const { data: customer } = useCustomer()
|
||||
const [loading, setLoading] = useState(false)
|
||||
const { openModal, setModalView } = useUI()
|
||||
const isInWishlist = data?.items?.some(
|
||||
const itemInWishlist = data?.items?.find(
|
||||
(item) =>
|
||||
item.product_id === productId &&
|
||||
item.variant_id === variant?.node.entityId
|
||||
)
|
||||
|
||||
const addToWishlist = async (e: any) => {
|
||||
const handleWishlistChange = async (e: any) => {
|
||||
e.preventDefault()
|
||||
setLoading(true)
|
||||
|
||||
if (loading) return
|
||||
|
||||
// A login is required before adding an item to the wishlist
|
||||
if (!customer) {
|
||||
@ -39,11 +42,17 @@ const WishlistButton: FC<Props> = ({
|
||||
return openModal()
|
||||
}
|
||||
|
||||
setLoading(true)
|
||||
|
||||
try {
|
||||
await addItem({
|
||||
productId,
|
||||
variantId: variant?.node.entityId!,
|
||||
})
|
||||
if (itemInWishlist) {
|
||||
await removeItem({ id: itemInWishlist.id! })
|
||||
} else {
|
||||
await addItem({
|
||||
productId,
|
||||
variantId: variant?.node.entityId!,
|
||||
})
|
||||
}
|
||||
|
||||
setLoading(false)
|
||||
} catch (err) {
|
||||
@ -55,9 +64,9 @@ const WishlistButton: FC<Props> = ({
|
||||
<button
|
||||
{...props}
|
||||
className={cn({ 'opacity-50': loading }, className)}
|
||||
onClick={addToWishlist}
|
||||
onClick={handleWishlistChange}
|
||||
>
|
||||
<Heart fill={isInWishlist ? 'white' : 'none'} />
|
||||
<Heart fill={itemInWishlist ? 'white' : 'none'} />
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
@ -41,7 +41,7 @@ export default async function fetchStoreApi<T>(
|
||||
throw new BigcommerceApiError(msg, res, data)
|
||||
}
|
||||
|
||||
if (!isJSON) {
|
||||
if (res.status !== 204 && !isJSON) {
|
||||
throw new BigcommerceApiError(
|
||||
`Fetch to Bigcommerce API failed, expected JSON content but found: ${contentType}`,
|
||||
res
|
||||
|
@ -1,20 +1,34 @@
|
||||
import getCustomerId from '../../operations/get-customer-id'
|
||||
import getCustomerWishlist, {
|
||||
Wishlist,
|
||||
} from '../../operations/get-customer-wishlist'
|
||||
import type { WishlistHandlers } from '..'
|
||||
|
||||
// Return current wishlist info
|
||||
const removeItem: WishlistHandlers['removeItem'] = async ({
|
||||
res,
|
||||
body: { wishlistId, itemId },
|
||||
body: { customerToken, itemId },
|
||||
config,
|
||||
}) => {
|
||||
if (!wishlistId || !itemId) {
|
||||
const customerId =
|
||||
customerToken && (await getCustomerId({ customerToken, config }))
|
||||
const { wishlist } =
|
||||
(customerId &&
|
||||
(await getCustomerWishlist({
|
||||
variables: { customerId },
|
||||
config,
|
||||
}))) ||
|
||||
{}
|
||||
|
||||
if (!wishlist || !itemId) {
|
||||
return res.status(400).json({
|
||||
data: null,
|
||||
errors: [{ message: 'Invalid request' }],
|
||||
})
|
||||
}
|
||||
|
||||
const result = await config.storeApiFetch<{ data: any } | null>(
|
||||
`/v3/wishlists/${wishlistId}/items/${itemId}`,
|
||||
const result = await config.storeApiFetch<{ data: Wishlist } | null>(
|
||||
`/v3/wishlists/${wishlist.id}/items/${itemId}`,
|
||||
{ method: 'DELETE' }
|
||||
)
|
||||
const data = result?.data ?? null
|
||||
|
@ -22,7 +22,7 @@ export type ItemBody = {
|
||||
|
||||
export type AddItemBody = { item: ItemBody }
|
||||
|
||||
export type RemoveItemBody = { wishlistId: string; itemId: string }
|
||||
export type RemoveItemBody = { itemId: string }
|
||||
|
||||
export type WishlistBody = {
|
||||
customer_id: number
|
||||
@ -52,7 +52,7 @@ export type WishlistHandlers = {
|
||||
>
|
||||
removeItem: BigcommerceHandler<
|
||||
Wishlist,
|
||||
{ wishlistId: string } & Body<RemoveItemBody>
|
||||
{ customerToken?: string } & Body<RemoveItemBody>
|
||||
>
|
||||
removeWishlist: BigcommerceHandler<Wishlist, { wishlistId: string }>
|
||||
}
|
||||
@ -93,11 +93,8 @@ const wishlistApi: BigcommerceApiHandler<Wishlist, WishlistHandlers> = async (
|
||||
}
|
||||
|
||||
// Remove an item from the wishlist
|
||||
if (req.method === 'DELETE' && wishlistId && itemId) {
|
||||
const body = {
|
||||
wishlistId: wishlistId as string,
|
||||
itemId: itemId as string,
|
||||
}
|
||||
if (req.method === 'DELETE') {
|
||||
const body = { ...req.body, customerToken }
|
||||
return await handlers['removeItem']({ req, res, config, body })
|
||||
}
|
||||
|
||||
|
@ -26,7 +26,7 @@ export const fetcher: HookFetcher<Cart | null, RemoveItemBody> = (
|
||||
}
|
||||
|
||||
export function extendHook(customFetcher: typeof fetcher) {
|
||||
const useRemoveItem = (item?: any) => {
|
||||
const useRemoveItem = () => {
|
||||
const { mutate } = useCart()
|
||||
const fn = useCartRemoveItem<Cart | null, RemoveItemBody>(
|
||||
defaultOpts,
|
||||
@ -35,7 +35,7 @@ export function extendHook(customFetcher: typeof fetcher) {
|
||||
|
||||
return useCallback(
|
||||
async function removeItem(input: RemoveItemInput) {
|
||||
const data = await fn({ itemId: input.id ?? item?.id })
|
||||
const data = await fn({ itemId: input.id })
|
||||
await mutate(data, false)
|
||||
return data
|
||||
},
|
||||
|
@ -45,7 +45,7 @@ export function extendHook(customFetcher: typeof fetcher) {
|
||||
await mutate(data, false)
|
||||
return data
|
||||
},
|
||||
[fn, mutate]
|
||||
[fn, mutate, customer]
|
||||
)
|
||||
}
|
||||
|
||||
|
@ -1,45 +1,55 @@
|
||||
import { useCallback } from 'react'
|
||||
import { HookFetcher } from '@lib/commerce/utils/types'
|
||||
import useAction from '@lib/commerce/utils/use-action'
|
||||
import { CommerceError } from '@lib/commerce/utils/errors'
|
||||
import useWishlistRemoveItem from '@lib/commerce/wishlist/use-remove-item'
|
||||
import type { RemoveItemBody } from '../api/wishlist'
|
||||
import useCustomer from '../use-customer'
|
||||
import useWishlist, { Wishlist } from './use-wishlist'
|
||||
|
||||
const defaultOpts = {
|
||||
url: '/api/bigcommerce/wishlists',
|
||||
url: '/api/bigcommerce/wishlist',
|
||||
method: 'DELETE',
|
||||
}
|
||||
|
||||
export type RemoveItemInput = {
|
||||
id: string
|
||||
id: string | number
|
||||
}
|
||||
|
||||
export const fetcher: HookFetcher<Wishlist | null, RemoveItemBody> = (
|
||||
options,
|
||||
{ wishlistId, itemId },
|
||||
{ itemId },
|
||||
fetch
|
||||
) => {
|
||||
return fetch({
|
||||
...defaultOpts,
|
||||
...options,
|
||||
body: { wishlistId, itemId },
|
||||
body: { itemId },
|
||||
})
|
||||
}
|
||||
|
||||
export function extendHook(customFetcher: typeof fetcher) {
|
||||
const useRemoveItem = (wishlistId: string, item?: any) => {
|
||||
const useRemoveItem = () => {
|
||||
const { data: customer } = useCustomer()
|
||||
const { mutate } = useWishlist()
|
||||
const fn = useAction<Wishlist | null, RemoveItemBody>(
|
||||
const fn = useWishlistRemoveItem<Wishlist | null, RemoveItemBody>(
|
||||
defaultOpts,
|
||||
customFetcher
|
||||
)
|
||||
|
||||
return useCallback(
|
||||
async function removeItem(input: RemoveItemInput) {
|
||||
const data = await fn({ wishlistId, itemId: input.id ?? item?.id })
|
||||
if (!customer) {
|
||||
// A signed customer is required in order to have a wishlist
|
||||
throw new CommerceError({
|
||||
message: 'Signed customer not found',
|
||||
})
|
||||
}
|
||||
|
||||
const data = await fn({ itemId: String(input.id) })
|
||||
await mutate(data, false)
|
||||
return data
|
||||
},
|
||||
[fn, mutate]
|
||||
[fn, mutate, customer]
|
||||
)
|
||||
}
|
||||
|
||||
|
5
lib/commerce/wishlist/use-remove-item.tsx
Normal file
5
lib/commerce/wishlist/use-remove-item.tsx
Normal file
@ -0,0 +1,5 @@
|
||||
import useAction from '../utils/use-action'
|
||||
|
||||
const useRemoveItem = useAction
|
||||
|
||||
export default useRemoveItem
|
Loading…
x
Reference in New Issue
Block a user