diff --git a/lib/bigcommerce/cart/use-cart.tsx b/lib/bigcommerce/cart/use-cart.tsx index 255791a5d..8fe80747a 100644 --- a/lib/bigcommerce/cart/use-cart.tsx +++ b/lib/bigcommerce/cart/use-cart.tsx @@ -1,6 +1,6 @@ import { ConfigInterface } from 'swr' -import { HookFetcher, HookDeps } from '@lib/commerce/utils/types' -import useCommerceCart from '@lib/commerce/cart/use-cart' +import { HookFetcher } from '@lib/commerce/utils/types' +import useCommerceCart, { CartInput } from '@lib/commerce/cart/use-cart' import type { Cart } from '../api/cart' const defaultOpts = { @@ -9,11 +9,17 @@ const defaultOpts = { export type { Cart } -export const fetcher: HookFetcher = (options, _, fetch) => { - return fetch({ - url: options?.url, - query: options?.query, - }) +export const fetcher: HookFetcher = ( + options, + { cartId }, + fetch +) => { + return cartId + ? fetch({ + url: options?.url, + query: options?.query, + }) + : null } export function extendHook( diff --git a/lib/commerce/cart/use-add-item.tsx b/lib/commerce/cart/use-add-item.tsx index 9ff7306f4..f6c069f2b 100644 --- a/lib/commerce/cart/use-add-item.tsx +++ b/lib/commerce/cart/use-add-item.tsx @@ -1,17 +1,5 @@ -import { useCallback } from 'react' -import type { HookFetcher, HookFetcherOptions } from '../utils/types' -import { useCommerce } from '..' +import useAction from '../utils/use-action' -export default function useAddItem( - options: HookFetcherOptions, - fetcher: HookFetcher -) { - const { fetcherRef } = useCommerce() +const useAddItem = useAction - return useCallback( - function addItem(input: Input) { - return fetcher(options, input, fetcherRef.current) - }, - [fetcher] - ) -} +export default useAddItem diff --git a/lib/commerce/cart/use-cart.tsx b/lib/commerce/cart/use-cart.tsx index dde1ee513..bd1af710c 100644 --- a/lib/commerce/cart/use-cart.tsx +++ b/lib/commerce/cart/use-cart.tsx @@ -1,35 +1,29 @@ -import useSWR, { responseInterface, ConfigInterface } from 'swr' +import { responseInterface, ConfigInterface } from 'swr' import Cookies from 'js-cookie' import type { HookInput, HookFetcher, HookFetcherOptions } from '../utils/types' +import useData from '../utils/use-data' import { useCommerce } from '..' export type CartResponse = responseInterface & { isEmpty: boolean } +export type CartInput = { + cartId: string | undefined +} + export default function useCart( options: HookFetcherOptions, input: HookInput, - fetcherFn: HookFetcher, + fetcherFn: HookFetcher, swrOptions?: ConfigInterface ) { - const { fetcherRef, cartCookie } = useCommerce() - const fetcher = (url?: string, query?: string, ...args: any[]) => - Cookies.get(cartCookie) - ? fetcherFn( - { url, query }, - args.reduce((obj, val, i) => { - obj[input[i][1]!] = val - return obj - }, {}), - fetcherRef.current - ) - : null - const response = useSWR( - [options.url, options.query, ...input.map((e) => e[1])], - fetcher, - swrOptions - ) + const { cartCookie } = useCommerce() + const fetcher: typeof fetcherFn = (options, input, fetch) => { + input.cartId = Cookies.get(cartCookie) + return fetcherFn(options, input, fetch) + } + const response = useData(options, input, fetcher, swrOptions) return Object.assign(response, { isEmpty: true }) as CartResponse } diff --git a/lib/commerce/cart/use-remove-item.tsx b/lib/commerce/cart/use-remove-item.tsx index 66076dacc..dfa60c363 100644 --- a/lib/commerce/cart/use-remove-item.tsx +++ b/lib/commerce/cart/use-remove-item.tsx @@ -1,17 +1,5 @@ -import { useCallback } from 'react' -import type { HookFetcher, HookFetcherOptions } from '../utils/types' -import { useCommerce } from '..' +import useAction from '../utils/use-action' -export default function useRemoveItem( - options: HookFetcherOptions, - fetcher: HookFetcher -) { - const { fetcherRef } = useCommerce() +const useRemoveItem = useAction - return useCallback( - function removeItem(input: Input) { - return fetcher(options, input, fetcherRef.current) - }, - [fetcher] - ) -} +export default useRemoveItem diff --git a/lib/commerce/cart/use-update-item.tsx b/lib/commerce/cart/use-update-item.tsx index 18eb80399..1c6261054 100644 --- a/lib/commerce/cart/use-update-item.tsx +++ b/lib/commerce/cart/use-update-item.tsx @@ -1,17 +1,5 @@ -import { useCallback } from 'react' -import type { HookFetcher, HookFetcherOptions } from '../utils/types' -import { useCommerce } from '..' +import useAction from '../utils/use-action' -export default function useUpdateItem( - options: HookFetcherOptions, - fetcher: HookFetcher -) { - const { fetcherRef } = useCommerce() +const useUpdateItem = useAction - return useCallback( - function updateItem(input: Input) { - return fetcher(options, input, fetcherRef.current) - }, - [fetcher] - ) -} +export default useUpdateItem diff --git a/lib/commerce/products/use-search.tsx b/lib/commerce/products/use-search.tsx index 73548b381..637c8a899 100644 --- a/lib/commerce/products/use-search.tsx +++ b/lib/commerce/products/use-search.tsx @@ -1,28 +1,5 @@ -import useSWR, { ConfigInterface } from 'swr' -import type { HookInput, HookFetcher, HookFetcherOptions } from '../utils/types' -import { useCommerce } from '..' +import useData from '../utils/use-data' -export default function useSearch( - options: HookFetcherOptions, - input: HookInput, - fetcherFn: HookFetcher, - swrOptions?: ConfigInterface -) { - const { fetcherRef } = useCommerce() - const fetcher = (url?: string, query?: string, ...args: any[]) => - fetcherFn( - { url, query }, - args.reduce((obj, val, i) => { - obj[input[i][1]!] = val - return obj - }, {}), - fetcherRef.current - ) - const response = useSWR( - [options.url, options.query, ...input.map((e) => e[1])], - fetcher, - swrOptions - ) +const useSearch = useData - return response -} +export default useSearch diff --git a/lib/commerce/utils/use-action.tsx b/lib/commerce/utils/use-action.tsx new file mode 100644 index 000000000..ef68a7641 --- /dev/null +++ b/lib/commerce/utils/use-action.tsx @@ -0,0 +1,17 @@ +import { useCallback } from 'react' +import type { HookFetcher, HookFetcherOptions } from './types' +import { useCommerce } from '..' + +export default function useAction( + options: HookFetcherOptions, + fetcher: HookFetcher +) { + const { fetcherRef } = useCommerce() + + return useCallback( + function addItem(input: Input) { + return fetcher(options, input, fetcherRef.current) + }, + [fetcher] + ) +} diff --git a/lib/commerce/utils/use-data.tsx b/lib/commerce/utils/use-data.tsx new file mode 100644 index 000000000..08b39091b --- /dev/null +++ b/lib/commerce/utils/use-data.tsx @@ -0,0 +1,28 @@ +import useSWR, { ConfigInterface } from 'swr' +import type { HookInput, HookFetcher, HookFetcherOptions } from './types' +import { useCommerce } from '..' + +export default function useData( + options: HookFetcherOptions, + input: HookInput, + fetcherFn: HookFetcher, + swrOptions?: ConfigInterface +) { + const { fetcherRef } = useCommerce() + const fetcher = (url?: string, query?: string, ...args: any[]) => + fetcherFn( + { url, query }, + args.reduce((obj, val, i) => { + obj[input[i][1]!] = val + return obj + }, {}), + fetcherRef.current + ) + const response = useSWR( + [options.url, options.query, ...input.map((e) => e[1])], + fetcher, + swrOptions + ) + + return response +}