Add util hooks for creating hooks

lib/bigcommerce/cart/use-cart.tsx

@@ -1,6 +1,6 @@
 import { ConfigInterface } from 'swr'
-import { HookFetcher, HookDeps } from '@lib/commerce/utils/types'
+import { HookFetcher } from '@lib/commerce/utils/types'
-import useCommerceCart from '@lib/commerce/cart/use-cart'
+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<Cart | null, {}> = (options, _, fetch) => {
+export const fetcher: HookFetcher<Cart | null, CartInput> = (
-  return fetch({
+  options,
-    url: options?.url,
+  { cartId },
-    query: options?.query,
+  fetch
-  })
+) => {
+  return cartId
+    ? fetch({
+        url: options?.url,
+        query: options?.query,
+      })
+    : null
 }
 
 export function extendHook(

lib/commerce/cart/use-add-item.tsx

@@ -1,17 +1,5 @@
-import { useCallback } from 'react'
+import useAction from '../utils/use-action'
-import type { HookFetcher, HookFetcherOptions } from '../utils/types'
-import { useCommerce } from '..'
 
-export default function useAddItem<T, Input>(
+const useAddItem = useAction
-  options: HookFetcherOptions,
-  fetcher: HookFetcher<T, Input>
-) {
-  const { fetcherRef } = useCommerce()
 
-  return useCallback(
+export default useAddItem
-    function addItem(input: Input) {
-      return fetcher(options, input, fetcherRef.current)
-    },
-    [fetcher]
-  )
-}

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<C> = responseInterface<C, Error> & {
   isEmpty: boolean
 }
 
+export type CartInput = {
+  cartId: string | undefined
+}
+
 export default function useCart<T>(
   options: HookFetcherOptions,
   input: HookInput,
-  fetcherFn: HookFetcher<T, any>,
+  fetcherFn: HookFetcher<T | null, CartInput>,
   swrOptions?: ConfigInterface<T | null>
 ) {
-  const { fetcherRef, cartCookie } = useCommerce()
+  const { cartCookie } = useCommerce()
-  const fetcher = (url?: string, query?: string, ...args: any[]) =>
+  const fetcher: typeof fetcherFn = (options, input, fetch) => {
-    Cookies.get(cartCookie)
+    input.cartId = Cookies.get(cartCookie)
-      ? fetcherFn(
+    return fetcherFn(options, input, fetch)
-          { url, query },
+  }
-          args.reduce((obj, val, i) => {
+  const response = useData(options, input, fetcher, swrOptions)
-            obj[input[i][1]!] = val
-            return obj
-          }, {}),
-          fetcherRef.current
-        )
-      : null
-  const response = useSWR(
-    [options.url, options.query, ...input.map((e) => e[1])],
-    fetcher,
-    swrOptions
-  )
 
   return Object.assign(response, { isEmpty: true }) as CartResponse<T>
 }

lib/commerce/cart/use-remove-item.tsx

@@ -1,17 +1,5 @@
-import { useCallback } from 'react'
+import useAction from '../utils/use-action'
-import type { HookFetcher, HookFetcherOptions } from '../utils/types'
-import { useCommerce } from '..'
 
-export default function useRemoveItem<T, Input>(
+const useRemoveItem = useAction
-  options: HookFetcherOptions,
-  fetcher: HookFetcher<T, Input>
-) {
-  const { fetcherRef } = useCommerce()
 
-  return useCallback(
+export default useRemoveItem
-    function removeItem(input: Input) {
-      return fetcher(options, input, fetcherRef.current)
-    },
-    [fetcher]
-  )
-}

lib/commerce/cart/use-update-item.tsx

@@ -1,17 +1,5 @@
-import { useCallback } from 'react'
+import useAction from '../utils/use-action'
-import type { HookFetcher, HookFetcherOptions } from '../utils/types'
-import { useCommerce } from '..'
 
-export default function useUpdateItem<T, Input>(
+const useUpdateItem = useAction
-  options: HookFetcherOptions,
-  fetcher: HookFetcher<T, Input>
-) {
-  const { fetcherRef } = useCommerce()
 
-  return useCallback(
+export default useUpdateItem
-    function updateItem(input: Input) {
-      return fetcher(options, input, fetcherRef.current)
-    },
-    [fetcher]
-  )
-}

lib/commerce/products/use-search.tsx

@@ -1,28 +1,5 @@
-import useSWR, { ConfigInterface } from 'swr'
+import useData from '../utils/use-data'
-import type { HookInput, HookFetcher, HookFetcherOptions } from '../utils/types'
-import { useCommerce } from '..'
 
-export default function useSearch<T>(
+const useSearch = useData
-  options: HookFetcherOptions,
-  input: HookInput,
-  fetcherFn: HookFetcher<T, any>,
-  swrOptions?: ConfigInterface<T | null>
-) {
-  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
+export default useSearch
-}

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<T, Input>(
+  options: HookFetcherOptions,
+  fetcher: HookFetcher<T, Input>
+) {
+  const { fetcherRef } = useCommerce()
+
+  return useCallback(
+    function addItem(input: Input) {
+      return fetcher(options, input, fetcherRef.current)
+    },
+    [fetcher]
+  )
+}

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<T, Input = any>(
+  options: HookFetcherOptions,
+  input: HookInput,
+  fetcherFn: HookFetcher<T, Input>,
+  swrOptions?: ConfigInterface<T>
+) {
+  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
+}