4
0
forked from crowetic/commerce

updated the useUpdateItem hook

This commit is contained in:
Luis Alvarez 2020-10-09 11:10:58 -05:00
parent cc0e62cd7e
commit eb3f29fa95
5 changed files with 53 additions and 34 deletions

View File

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

View File

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

View File

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

View File

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

View File

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