4
0
forked from crowetic/commerce

Add util hooks for creating hooks

This commit is contained in:
Luis Alvarez 2020-10-13 04:46:41 -05:00
parent 96b7971e94
commit d4f09d3590
8 changed files with 83 additions and 97 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View 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]
)
}

View 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
}