4
0
forked from crowetic/commerce

Moved data hooks to new format

This commit is contained in:
Luis Alvarez 2021-02-19 13:02:49 -05:00
parent 7005e45b09
commit 6721ef736b
10 changed files with 70 additions and 177 deletions

View File

@ -1,11 +1,10 @@
import { HookHandler } from '@commerce/utils/types' import { SWRHook } from '@commerce/utils/types'
import useCustomer, { UseCustomer } from '@commerce/customer/use-customer' import useCustomer, { UseCustomer } from '@commerce/customer/use-customer'
import type { Customer, CustomerData } from '../api/customers' import type { Customer, CustomerData } from '../api/customers'
import type { BigcommerceProvider } from '..'
export default useCustomer as UseCustomer<BigcommerceProvider> export default useCustomer as UseCustomer<typeof handler>
export const handler: HookHandler<Customer | null> = { export const handler: SWRHook<Customer | null> = {
fetchOptions: { fetchOptions: {
url: '/api/bigcommerce/customers', url: '/api/bigcommerce/customers',
method: 'GET', method: 'GET',
@ -14,11 +13,11 @@ export const handler: HookHandler<Customer | null> = {
const data = await fetch<CustomerData | null>(options) const data = await fetch<CustomerData | null>(options)
return data?.customer ?? null return data?.customer ?? null
}, },
useHook({ input, useData }) { useHook: ({ useData }) => (input) => {
return useData({ return useData({
swrOptions: { swrOptions: {
revalidateOnFocus: false, revalidateOnFocus: false,
...input.swrOptions, ...input?.swrOptions,
}, },
}) })
}, },

View File

@ -1,9 +1,8 @@
import { HookHandler } from '@commerce/utils/types' import { SWRHook } from '@commerce/utils/types'
import useSearch, { UseSearch } from '@commerce/product/use-search' import useSearch, { UseSearch } from '@commerce/product/use-search'
import type { SearchProductsData } from '../api/catalog/products' import type { SearchProductsData } from '../api/catalog/products'
import type { BigcommerceProvider } from '..'
export default useSearch as UseSearch<BigcommerceProvider> export default useSearch as UseSearch<typeof handler>
export type SearchProductsInput = { export type SearchProductsInput = {
search?: string search?: string
@ -12,7 +11,7 @@ export type SearchProductsInput = {
sort?: string sort?: string
} }
export const handler: HookHandler< export const handler: SWRHook<
SearchProductsData, SearchProductsData,
SearchProductsInput, SearchProductsInput,
SearchProductsInput SearchProductsInput
@ -37,7 +36,7 @@ export const handler: HookHandler<
method: options.method, method: options.method,
}) })
}, },
useHook({ input, useData }) { useHook: ({ useData }) => (input = {}) => {
return useData({ return useData({
input: [ input: [
['search', input.search], ['search', input.search],

View File

@ -1,13 +1,12 @@
import { useMemo } from 'react' import { useMemo } from 'react'
import { HookHandler } from '@commerce/utils/types' import { SWRHook } from '@commerce/utils/types'
import useWishlist, { UseWishlist } from '@commerce/wishlist/use-wishlist' import useWishlist, { UseWishlist } from '@commerce/wishlist/use-wishlist'
import type { Wishlist } from '../api/wishlist' import type { Wishlist } from '../api/wishlist'
import useCustomer from '../customer/use-customer' import useCustomer from '../customer/use-customer'
import type { BigcommerceProvider } from '..'
export default useWishlist as UseWishlist<BigcommerceProvider> export default useWishlist as UseWishlist<typeof handler>
export const handler: HookHandler< export const handler: SWRHook<
Wishlist | null, Wishlist | null,
{ includeProducts?: boolean }, { includeProducts?: boolean },
{ customerId?: number; includeProducts: boolean }, { customerId?: number; includeProducts: boolean },
@ -30,16 +29,16 @@ export const handler: HookHandler<
method: options.method, method: options.method,
}) })
}, },
useHook({ input, useData }) { useHook: ({ useData }) => (input) => {
const { data: customer } = useCustomer() const { data: customer } = useCustomer()
const response = useData({ const response = useData({
input: [ input: [
['customerId', (customer as any)?.id], ['customerId', (customer as any)?.id],
['includeProducts', input.includeProducts], ['includeProducts', input?.includeProducts],
], ],
swrOptions: { swrOptions: {
revalidateOnFocus: false, revalidateOnFocus: false,
...input.swrOptions, ...input?.swrOptions,
}, },
}) })

View File

@ -1,8 +1,8 @@
import Cookies from 'js-cookie' import Cookies from 'js-cookie'
import type { Cart } from '../types' import { useHook, useSWRHook } from '../utils/use-hook'
import type { HookFetcherFn, SWRHook } from '../utils/types' import type { HookFetcherFn, SWRHook } from '../utils/types'
import type { Cart } from '../types'
import { Provider, useCommerce } from '..' import { Provider, useCommerce } from '..'
import { useHook, useSWRHook } from '@commerce/utils/use-hook'
export type FetchCartInput = { export type FetchCartInput = {
cartId?: Cart['id'] cartId?: Cart['id']

View File

@ -1,56 +1,20 @@
import { useHook, useSWRHook } from '../utils/use-hook'
import { SWRFetcher } from '../utils/default-fetcher'
import type { HookFetcherFn, SWRHook } from '../utils/types'
import type { Customer } from '../types' import type { Customer } from '../types'
import type { import { Provider } from '..'
Prop,
HookFetcherFn,
UseHookInput,
UseHookResponse,
} from '../utils/types'
import defaultFetcher from '../utils/default-fetcher'
import useData from '../utils/use-data'
import { Provider, useCommerce } from '..'
export type UseCustomerHandler<P extends Provider> = Prop< export type UseCustomer<
Prop<P, 'customer'>, H extends SWRHook<any, any, any> = SWRHook<Customer | null>
'useCustomer' > = ReturnType<H['useHook']>
>
export type UseCustomerInput<P extends Provider> = UseHookInput< export const fetcher: HookFetcherFn<Customer | null, any> = SWRFetcher
UseCustomerHandler<P>
>
export type CustomerResponse<P extends Provider> = UseHookResponse< const fn = (provider: Provider) => provider.customer?.useCustomer!
UseCustomerHandler<P>
>
export type UseCustomer<P extends Provider> = Partial< const useCustomer: UseCustomer = (input) => {
UseCustomerInput<P> const hook = useHook(fn)
> extends UseCustomerInput<P> return useSWRHook({ fetcher, ...hook })(input)
? (input?: UseCustomerInput<P>) => CustomerResponse<P>
: (input: UseCustomerInput<P>) => CustomerResponse<P>
export const fetcher = defaultFetcher as HookFetcherFn<Customer | null>
export default function useCustomer<P extends Provider>(
input: UseCustomerInput<P> = {}
) {
const { providerRef, fetcherRef } = useCommerce<P>()
const provider = providerRef.current
const opts = provider.customer?.useCustomer
const fetcherFn = opts?.fetcher ?? fetcher
const useHook = opts?.useHook ?? ((ctx) => ctx.useData())
return useHook({
input,
useData(ctx) {
const response = useData(
{ ...opts!, fetcher: fetcherFn },
ctx?.input ?? [],
provider.fetcher ?? fetcherRef.current,
ctx?.swrOptions ?? input.swrOptions
)
return response
},
})
} }
export default useCustomer

View File

@ -21,13 +21,13 @@ export type Provider = CommerceConfig & {
useRemoveItem?: MutationHook<any, any, any> useRemoveItem?: MutationHook<any, any, any>
} }
wishlist?: { wishlist?: {
useWishlist?: HookHandler<Wishlist | null, any, any> useWishlist?: SWRHook<Wishlist | null, any, any>
} }
customer: { customer: {
useCustomer?: HookHandler<Customer | null, any, any> useCustomer?: SWRHook<Customer | null, any, any>
} }
products: { products: {
useSearch?: HookHandler<SearchProductsData, any, any> useSearch?: SWRHook<SearchProductsData, any, any>
} }
} }

View File

@ -1,57 +1,20 @@
import { useHook, useSWRHook } from '../utils/use-hook'
import { SWRFetcher } from '../utils/default-fetcher'
import type { HookFetcherFn, SWRHook } from '../utils/types'
import type { SearchProductsData } from '../types' import type { SearchProductsData } from '../types'
import type { import { Provider } from '..'
Prop,
HookFetcherFn,
UseHookInput,
UseHookResponse,
} from '../utils/types'
import defaultFetcher from '../utils/default-fetcher'
import useData from '../utils/use-data'
import { Provider, useCommerce } from '..'
import { BigcommerceProvider } from '@framework'
export type UseSearchHandler<P extends Provider> = Prop< export type UseSearch<
Prop<P, 'products'>, H extends SWRHook<any, any, any> = SWRHook<SearchProductsData>
'useSearch' > = ReturnType<H['useHook']>
>
export type UseSeachInput<P extends Provider> = UseHookInput< export const fetcher: HookFetcherFn<SearchProductsData, any> = SWRFetcher
UseSearchHandler<P>
>
export type SearchResponse<P extends Provider> = UseHookResponse< const fn = (provider: Provider) => provider.products?.useSearch!
UseSearchHandler<P>
>
export type UseSearch<P extends Provider> = Partial< const useSearch: UseSearch = (input) => {
UseSeachInput<P> const hook = useHook(fn)
> extends UseSeachInput<P> return useSWRHook({ fetcher, ...hook })(input)
? (input?: UseSeachInput<P>) => SearchResponse<P>
: (input: UseSeachInput<P>) => SearchResponse<P>
export const fetcher = defaultFetcher as HookFetcherFn<SearchProductsData>
export default function useSearch<P extends Provider>(
input: UseSeachInput<P> = {}
) {
const { providerRef, fetcherRef } = useCommerce<P>()
const provider = providerRef.current
const opts = provider.products?.useSearch
const fetcherFn = opts?.fetcher ?? fetcher
const useHook = opts?.useHook ?? ((ctx) => ctx.useData())
return useHook({
input,
useData(ctx) {
const response = useData(
{ ...opts!, fetcher: fetcherFn },
ctx?.input ?? [],
provider.fetcher ?? fetcherRef.current,
ctx?.swrOptions ?? input.swrOptions
)
return response
},
})
} }
export default useSearch

View File

@ -1,6 +1,6 @@
import type { HookFetcherFn } from './types' import type { HookFetcherFn } from './types'
const defaultFetcher: HookFetcherFn<any> = ({ options, fetch }) => export const SWRFetcher: HookFetcherFn<any, any> = ({ options, fetch }) =>
fetch(options) fetch(options)
export const mutationFetcher: HookFetcherFn<any, any> = ({ export const mutationFetcher: HookFetcherFn<any, any> = ({
@ -9,4 +9,4 @@ export const mutationFetcher: HookFetcherFn<any, any> = ({
fetch, fetch,
}) => fetch({ ...options, body: input }) }) => fetch({ ...options, body: input })
export default defaultFetcher export default SWRFetcher

View File

@ -1,5 +1,5 @@
import { useCallback } from 'react' import { useCallback } from 'react'
import type { Fetcher, MutationHook, PickRequired, SWRHook } from './types' import type { MutationHook, PickRequired, SWRHook } from './types'
import { Provider, useCommerce } from '..' import { Provider, useCommerce } from '..'
import useData from './use-data' import useData from './use-data'

View File

@ -1,56 +1,25 @@
import { useHook, useSWRHook } from '../utils/use-hook'
import { SWRFetcher } from '../utils/default-fetcher'
import type { HookFetcherFn, SWRHook } from '../utils/types'
import type { Wishlist } from '../types' import type { Wishlist } from '../types'
import type { import type { Provider } from '..'
Prop,
HookFetcherFn,
UseHookInput,
UseHookResponse,
} from '../utils/types'
import defaultFetcher from '../utils/default-fetcher'
import useData from '../utils/use-data'
import { Provider, useCommerce } from '..'
export type UseWishlistHandler<P extends Provider> = Prop< export type UseWishlist<
Prop<P, 'wishlist'>, H extends SWRHook<any, any, any> = SWRHook<
'useWishlist' Wishlist | null,
> { includeProducts?: boolean },
{ customerId?: number; includeProducts: boolean },
{ isEmpty?: boolean }
>
> = ReturnType<H['useHook']>
export type UseWishlistInput<P extends Provider> = UseHookInput< export const fetcher: HookFetcherFn<Wishlist | null, any> = SWRFetcher
UseWishlistHandler<P>
>
export type WishlistResponse<P extends Provider> = UseHookResponse< const fn = (provider: Provider) => provider.wishlist?.useWishlist!
UseWishlistHandler<P>
>
export type UseWishlist<P extends Provider> = Partial< const useWishlist: UseWishlist = (input) => {
UseWishlistInput<P> const hook = useHook(fn)
> extends UseWishlistInput<P> return useSWRHook({ fetcher, ...hook })(input)
? (input?: UseWishlistInput<P>) => WishlistResponse<P>
: (input: UseWishlistInput<P>) => WishlistResponse<P>
export const fetcher = defaultFetcher as HookFetcherFn<Wishlist | null>
export default function useWishlist<P extends Provider>(
input: UseWishlistInput<P> = {}
) {
const { providerRef, fetcherRef } = useCommerce<P>()
const provider = providerRef.current
const opts = provider.wishlist?.useWishlist
const fetcherFn = opts?.fetcher ?? fetcher
const useHook = opts?.useHook ?? ((ctx) => ctx.useData())
return useHook({
input,
useData(ctx) {
const response = useData(
{ ...opts!, fetcher: fetcherFn },
ctx?.input ?? [],
provider.fetcher ?? fetcherRef.current,
ctx?.swrOptions ?? input.swrOptions
)
return response
},
})
} }
export default useWishlist