forked from crowetic/commerce
Updated hooks
This commit is contained in:
parent
d5c761a44d
commit
7273c4deb3
@ -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 }
|
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
|
@ -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>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user