forked from crowetic/commerce
Fix cart provider
This commit is contained in:
parent
b5b5d1343f
commit
0483e97954
@ -38,13 +38,11 @@ const CartItem = ({
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// Reset the quantity state if the item quantity changes
|
// Reset the quantity state if the item quantity changes
|
||||||
if (item.quantity !== quantity) {
|
if (item.quantity !== Number(quantity)) {
|
||||||
setQuantity(item.quantity)
|
setQuantity(item.quantity)
|
||||||
}
|
}
|
||||||
}, [item.quantity])
|
}, [item.quantity])
|
||||||
|
|
||||||
console.log('ITEM', item)
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<li className="flex flex-row space-x-6">
|
<li className="flex flex-row space-x-6">
|
||||||
<div className="h-12 w-12 bg-violet"></div>
|
<div className="h-12 w-12 bg-violet"></div>
|
||||||
|
@ -27,7 +27,7 @@ export default function useUpdateItem() {
|
|||||||
const fn = useCartUpdateItem<Cart, UpdateItemBody>(fetcher)
|
const fn = useCartUpdateItem<Cart, UpdateItemBody>(fetcher)
|
||||||
const updateItem: typeof fn = async (input) => {
|
const updateItem: typeof fn = async (input) => {
|
||||||
const data = await fn(input)
|
const data = await fn(input)
|
||||||
await mutate(data)
|
await mutate(data, false)
|
||||||
return data
|
return data
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { createContext, useContext, FC, useCallback, useMemo } from 'react'
|
import { FC, createContext, useContext, useMemo } from 'react'
|
||||||
import useSWR, { responseInterface } from 'swr'
|
import useSWR, { responseInterface } from 'swr'
|
||||||
import Cookies from 'js-cookie'
|
import Cookies from 'js-cookie'
|
||||||
import { useCommerce } from '..'
|
import { useCommerce } from '..'
|
||||||
@ -11,28 +11,23 @@ export type CartProviderProps =
|
|||||||
| { query: string; url?: string }
|
| { query: string; url?: string }
|
||||||
| { query?: string; url: string }
|
| { query?: string; url: string }
|
||||||
|
|
||||||
const CartContext = createContext<CartResponse<any> | null>(null)
|
const CartContext = createContext<{ query?: string; url?: string }>({})
|
||||||
|
|
||||||
const CartProvider: FC<CartProviderProps> = ({ children, query, url }) => {
|
const CartProvider: FC<CartProviderProps> = ({ children, query, url }) => {
|
||||||
|
const value = useMemo(() => ({ query, url }), [query, url])
|
||||||
|
return <CartContext.Provider value={value}>{children}</CartContext.Provider>
|
||||||
|
}
|
||||||
|
|
||||||
|
function useCart<C>() {
|
||||||
const { fetcher: fetch, cartCookie } = useCommerce()
|
const { fetcher: fetch, cartCookie } = useCommerce()
|
||||||
const fetcher = (url?: string, query?: string) => fetch({ url, query })
|
const fetcher = (url?: string, query?: string) => fetch({ url, query })
|
||||||
const cartId = Cookies.get(cartCookie)
|
const cartId = Cookies.get(cartCookie)
|
||||||
|
const { url, query } = useContext(CartContext)
|
||||||
const response = useSWR(() => (cartId ? [url, query] : null), fetcher, {
|
const response = useSWR(() => (cartId ? [url, query] : null), fetcher, {
|
||||||
revalidateOnFocus: false,
|
revalidateOnFocus: false,
|
||||||
})
|
})
|
||||||
|
|
||||||
return (
|
return Object.assign(response, { isEmpty: true }) as CartResponse<C>
|
||||||
// Avoid destructuring the `response` obj from SWR so we don't trigger the getters
|
|
||||||
// early, also the result of useSWR is memoized and it's better to keep it that way
|
|
||||||
// so we don't re-render every consumer
|
|
||||||
<CartContext.Provider value={Object.assign(response, { isEmpty: true })}>
|
|
||||||
{children}
|
|
||||||
</CartContext.Provider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function useCart<C>() {
|
|
||||||
return useContext(CartContext) as CartResponse<C>
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export { CartProvider, useCart }
|
export { CartProvider, useCart }
|
||||||
|
Loading…
x
Reference in New Issue
Block a user