4
0
forked from crowetic/commerce

Added useRemoveItem and other fixes

This commit is contained in:
Luis Alvarez 2020-10-26 18:25:35 -05:00
parent 2cd41ee135
commit 0f4f061cbd
8 changed files with 68 additions and 33 deletions

View File

@ -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>
)
}

View File

@ -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

View File

@ -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

View File

@ -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 })
}

View File

@ -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
},

View File

@ -45,7 +45,7 @@ export function extendHook(customFetcher: typeof fetcher) {
await mutate(data, false)
return data
},
[fn, mutate]
[fn, mutate, customer]
)
}

View File

@ -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]
)
}

View File

@ -0,0 +1,5 @@
import useAction from '../utils/use-action'
const useRemoveItem = useAction
export default useRemoveItem