forked from crowetic/commerce
updated the useUpdateItem hook
This commit is contained in:
parent
cc0e62cd7e
commit
eb3f29fa95
@ -26,8 +26,8 @@ export const fetcher: HookFetcher<Cart, AddItemBody> = (
|
|||||||
}
|
}
|
||||||
|
|
||||||
return fetch({
|
return fetch({
|
||||||
url: options.url!,
|
url: options?.url ?? defaultOpts.url,
|
||||||
method: options.method!,
|
method: options?.method ?? defaultOpts.method,
|
||||||
body: { item },
|
body: { item },
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -19,8 +19,8 @@ export const fetcher: HookFetcher<Cart | null, RemoveItemBody> = (
|
|||||||
fetch
|
fetch
|
||||||
) => {
|
) => {
|
||||||
return fetch({
|
return fetch({
|
||||||
url: options.url!,
|
url: options?.url ?? defaultOpts.url,
|
||||||
method: options.method!,
|
method: options?.method ?? defaultOpts.method,
|
||||||
body: { itemId },
|
body: { itemId },
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -1,50 +1,67 @@
|
|||||||
import { useCallback } from 'react'
|
import { useCallback } from 'react'
|
||||||
import debounce from 'lodash.debounce'
|
import debounce from 'lodash.debounce'
|
||||||
import type { Fetcher } from '@lib/commerce'
|
import { HookFetcher } from '@lib/commerce/utils/types'
|
||||||
import { default as useCartUpdateItem } from '@lib/commerce/cart/use-update-item'
|
import { default as useCartUpdateItem } from '@lib/commerce/cart/use-update-item'
|
||||||
import type { ItemBody, UpdateItemBody } from '../api/cart'
|
import type { ItemBody, UpdateItemBody } from '../api/cart'
|
||||||
import { fetcher as removeFetcher } from './use-remove-item'
|
import { fetcher as removeFetcher } from './use-remove-item'
|
||||||
import { Cart, useCart } from '.'
|
import { Cart, useCart } from '.'
|
||||||
|
|
||||||
|
const defualtOpts = {
|
||||||
|
url: '/api/bigcommerce/cart',
|
||||||
|
method: 'PUT',
|
||||||
|
}
|
||||||
|
|
||||||
export type UpdateItemInput = Partial<{ id: string } & ItemBody>
|
export type UpdateItemInput = Partial<{ id: string } & ItemBody>
|
||||||
|
|
||||||
function fetcher(
|
export const fetcher: HookFetcher<Cart | null, UpdateItemBody> = (
|
||||||
fetch: Fetcher<Cart | null>,
|
options,
|
||||||
{ itemId, item }: UpdateItemBody
|
{ itemId, item },
|
||||||
) {
|
fetch
|
||||||
|
) => {
|
||||||
if (Number.isInteger(item.quantity)) {
|
if (Number.isInteger(item.quantity)) {
|
||||||
// Also allow the update hook to remove an item if the quantity is lower than 1
|
// Also allow the update hook to remove an item if the quantity is lower than 1
|
||||||
if (item.quantity! < 1) {
|
if (item.quantity! < 1) {
|
||||||
return removeFetcher(fetch, { itemId })
|
return removeFetcher(null, { itemId }, fetch)
|
||||||
}
|
}
|
||||||
} else if (item.quantity) {
|
} else if (item.quantity) {
|
||||||
throw new Error('The item quantity has to be a valid integer')
|
throw new Error('The item quantity has to be a valid integer')
|
||||||
}
|
}
|
||||||
|
|
||||||
return fetch({
|
return fetch({
|
||||||
url: '/api/bigcommerce/cart',
|
url: options?.url ?? defualtOpts.url,
|
||||||
method: 'PUT',
|
method: options?.method ?? defualtOpts.method,
|
||||||
body: { itemId, item },
|
body: { itemId, item },
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function useUpdateItem(item?: any, cfg?: { wait?: number }) {
|
function extend(customFetcher: typeof fetcher, cfg?: { wait?: number }) {
|
||||||
const { mutate } = useCart()
|
const useUpdateItem = (item?: any) => {
|
||||||
const fn = useCartUpdateItem<Cart | null, UpdateItemBody>(fetcher)
|
const { mutate } = useCart()
|
||||||
|
const fn = useCartUpdateItem<Cart | null, UpdateItemBody>(
|
||||||
|
defualtOpts,
|
||||||
|
customFetcher
|
||||||
|
)
|
||||||
|
|
||||||
return useCallback(
|
return useCallback(
|
||||||
debounce(async (input: UpdateItemInput) => {
|
debounce(async (input: UpdateItemInput) => {
|
||||||
const data = await fn({
|
const data = await fn({
|
||||||
itemId: input.id ?? item?.id,
|
itemId: input.id ?? item?.id,
|
||||||
item: {
|
item: {
|
||||||
productId: input.productId ?? item?.product_id,
|
productId: input.productId ?? item?.product_id,
|
||||||
variantId: input.productId ?? item?.variant_id,
|
variantId: input.productId ?? item?.variant_id,
|
||||||
quantity: input.quantity,
|
quantity: input.quantity,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
await mutate(data, false)
|
await mutate(data, false)
|
||||||
return data
|
return data
|
||||||
}, cfg?.wait ?? 500),
|
}, cfg?.wait ?? 500),
|
||||||
[fn, mutate]
|
[fn, mutate]
|
||||||
)
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
useUpdateItem.extend = extend
|
||||||
|
|
||||||
|
return useUpdateItem
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default extend(fetcher)
|
||||||
|
@ -1,14 +1,16 @@
|
|||||||
import { useCallback } from 'react'
|
import { useCallback } from 'react'
|
||||||
import { Fetcher, useCommerce } from '..'
|
import { HookFetcher, HookFetcherOptions } from '../utils/types'
|
||||||
|
import { useCommerce } from '..'
|
||||||
|
|
||||||
export default function useUpdateItem<T, Input>(
|
export default function useUpdateItem<T, Input>(
|
||||||
fetcher: (fetch: Fetcher<T>, input: Input) => T | Promise<T>
|
options: HookFetcherOptions,
|
||||||
|
fetcher: HookFetcher<T, Input>
|
||||||
) {
|
) {
|
||||||
const { fetcherRef } = useCommerce()
|
const { fetcherRef } = useCommerce()
|
||||||
|
|
||||||
return useCallback(
|
return useCallback(
|
||||||
function updateItem(input: Input) {
|
function updateItem(input: Input) {
|
||||||
return fetcher(fetcherRef.current, input)
|
return fetcher(options, input, fetcherRef.current)
|
||||||
},
|
},
|
||||||
[fetcher]
|
[fetcher]
|
||||||
)
|
)
|
||||||
|
@ -10,7 +10,7 @@ export type FetcherOptions = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export type HookFetcher<T, Input> = (
|
export type HookFetcher<T, Input> = (
|
||||||
options: HookFetcherOptions,
|
options: HookFetcherOptions | null,
|
||||||
input: Input,
|
input: Input,
|
||||||
fetch: Fetcher<T>
|
fetch: Fetcher<T>
|
||||||
) => T | Promise<T>
|
) => T | Promise<T>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user