forked from crowetic/commerce
Add util hooks for creating hooks
This commit is contained in:
parent
96b7971e94
commit
d4f09d3590
@ -1,6 +1,6 @@
|
|||||||
import { ConfigInterface } from 'swr'
|
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'
|
import type { Cart } from '../api/cart'
|
||||||
|
|
||||||
const defaultOpts = {
|
const defaultOpts = {
|
||||||
@ -9,11 +9,17 @@ const defaultOpts = {
|
|||||||
|
|
||||||
export type { Cart }
|
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(
|
export function extendHook(
|
||||||
|
@ -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]
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
@ -1,35 +1,29 @@
|
|||||||
import useSWR, { responseInterface, ConfigInterface } from 'swr'
|
import { responseInterface, ConfigInterface } from 'swr'
|
||||||
import Cookies from 'js-cookie'
|
import Cookies from 'js-cookie'
|
||||||
import type { HookInput, HookFetcher, HookFetcherOptions } from '../utils/types'
|
import type { HookInput, HookFetcher, HookFetcherOptions } from '../utils/types'
|
||||||
|
import useData from '../utils/use-data'
|
||||||
import { useCommerce } from '..'
|
import { useCommerce } from '..'
|
||||||
|
|
||||||
export type CartResponse<C> = responseInterface<C, Error> & {
|
export type CartResponse<C> = responseInterface<C, Error> & {
|
||||||
isEmpty: boolean
|
isEmpty: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export type CartInput = {
|
||||||
|
cartId: string | undefined
|
||||||
|
}
|
||||||
|
|
||||||
export default function useCart<T>(
|
export default function useCart<T>(
|
||||||
options: HookFetcherOptions,
|
options: HookFetcherOptions,
|
||||||
input: HookInput,
|
input: HookInput,
|
||||||
fetcherFn: HookFetcher<T, any>,
|
fetcherFn: HookFetcher<T | null, CartInput>,
|
||||||
swrOptions?: ConfigInterface<T | null>
|
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>
|
return Object.assign(response, { isEmpty: true }) as CartResponse<T>
|
||||||
}
|
}
|
||||||
|
@ -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]
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
@ -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]
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
@ -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
|
||||||
}
|
|
||||||
|
17
lib/commerce/utils/use-action.tsx
Normal file
17
lib/commerce/utils/use-action.tsx
Normal file
@ -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]
|
||||||
|
)
|
||||||
|
}
|
28
lib/commerce/utils/use-data.tsx
Normal file
28
lib/commerce/utils/use-data.tsx
Normal file
@ -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
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user