4
0
forked from crowetic/commerce

Updated hooks

This commit is contained in:
Luis Alvarez 2020-10-03 06:45:09 -05:00
parent d5c761a44d
commit 7273c4deb3
4 changed files with 35 additions and 45 deletions

View File

@ -1,21 +1,15 @@
import { FC } from 'react'
import { import {
CartProvider as CommerceCartProvider, CartProvider as CommerceCartProvider,
useCart as useCommerceCart, useCart as useCommerceCart,
} from 'lib/commerce/cart' } from 'lib/commerce/cart'
import { FunctionComponent } from 'react'
export type Cart = any export type Cart = any
interface Props { export const CartProvider: FC = ({ children }) => {
children?: any return <CommerceCartProvider query="">{children}</CommerceCartProvider>
} }
function useCart() { export function useCart() {
return useCommerceCart<Cart>() return useCommerceCart<Cart>()
} }
const CartProvider: FunctionComponent<Props> = ({ children }) => {
return <CommerceCartProvider>{children}</CommerceCartProvider>
}
export { CartProvider, useCart }

View File

@ -1,9 +1,9 @@
import { ReactNode } from 'react'
import { import {
CommerceConfig,
CommerceProvider as CoreCommerceProvider, CommerceProvider as CoreCommerceProvider,
Connector,
useCommerce as useCoreCommerce, useCommerce as useCoreCommerce,
} from 'lib/commerce' } from 'lib/commerce'
import { ReactNode } from 'react'
async function getText(res: Response) { async function getText(res: Response) {
try { try {
@ -31,19 +31,21 @@ async function fetcher(url: string, query: string) {
throw await getError(res) throw await getError(res)
} }
export const bigcommerce: Connector = { export const bigcommerceConfig: CommerceConfig = {
locale: 'en-us', locale: 'en-us',
fetcher, fetcher,
} }
interface Props { export type BigcommerceConfig = Partial<CommerceConfig>
children?: ReactNode | any
export type BigcommerceProps = {
children?: ReactNode
config: BigcommerceConfig
} }
// TODO: The connector should be extendable when a developer is using it export function CommerceProvider({ children, config }: BigcommerceProps) {
export function CommerceProvider({ children }: Props) {
return ( return (
<CoreCommerceProvider connector={bigcommerce}> <CoreCommerceProvider config={{ ...config, ...bigcommerceConfig }}>
{children} {children}
</CoreCommerceProvider> </CoreCommerceProvider>
) )

View File

@ -1,31 +1,27 @@
import { createContext, useContext, FunctionComponent } from 'react' import { createContext, useContext, FC } from 'react'
import useSWR, { responseInterface } from 'swr' import useSWR, { responseInterface } from 'swr'
import { useCommerce } from '.' import { useCommerce } from '.'
interface Props {
children?: any
}
export type Cart = any export type CartResponse<C> = responseInterface<C, Error> & {
export type CartResponse<C extends Cart> = responseInterface<C, Error> & {
isEmpty: boolean isEmpty: boolean
} }
const CartContext = createContext<CartResponse<Cart> | any>(null) export type CartProviderProps =
| { query: string; url?: string }
| { query?: string; url: string }
const CartContext = createContext<CartResponse<any> | null>(null)
function getCartCookie() { function getCartCookie() {
// TODO: Figure how the cart should be persisted // TODO: Figure how the cart should be persisted
return null return null
} }
const CartProvider: FunctionComponent<Props> = ({ children }) => { const CartProvider: FC<CartProviderProps> = ({ children, query, url }) => {
const { hooks, fetcher } = useCommerce<Cart>() const { fetcher } = useCommerce()
const { useCart } = hooks
const cartId = getCartCookie() const cartId = getCartCookie()
const response = useSWR( const response = useSWR(() => (cartId ? [url, query] : null), fetcher)
() => (cartId ? [useCart.url, useCart.query, useCart.resolver] : null), // TODO: Do something to make this prop work
fetcher
)
const isEmpty = true const isEmpty = true
return ( return (
@ -35,7 +31,7 @@ const CartProvider: FunctionComponent<Props> = ({ children }) => {
) )
} }
function useCart<C extends Cart>() { function useCart<C>() {
return useContext(CartContext) as CartResponse<C> return useContext(CartContext) as CartResponse<C>
} }

View File

@ -1,29 +1,27 @@
import { createContext, ReactNode, useContext } from 'react' import { createContext, ReactNode, useContext } from 'react'
const Commerce = createContext<Connector | any>(null) const Commerce = createContext<CommerceConfig | null>(null)
export type CommerceProps = { export type CommerceProps = {
children?: ReactNode | any children?: ReactNode
connector: Connector config: CommerceConfig
} }
export type Connector = { export type CommerceConfig = {
fetcher: Fetcher<any> fetcher: Fetcher<any>
locale: string locale: string
} }
export type Fetcher<T> = (...args: any) => T | Promise<T> export type Fetcher<T> = (...args: any) => T | Promise<T>
export function CommerceProvider({ children, connector }: CommerceProps) { export function CommerceProvider({ children, config }: CommerceProps) {
if (!connector) { if (!config) {
throw new Error( throw new Error('CommerceProvider requires a valid config object')
'CommerceProvider requires a valid headless commerce connector'
)
} }
return <Commerce.Provider value={connector}>{children}</Commerce.Provider> return <Commerce.Provider value={config}>{children}</Commerce.Provider>
} }
export function useCommerce<T extends Connector>() { export function useCommerce<T extends CommerceConfig>() {
return useContext(Commerce) as T return useContext(Commerce) as T
} }