4
0
forked from crowetic/commerce

Fix cart provider

This commit is contained in:
Luis Alvarez 2020-10-06 21:00:36 -05:00
parent b5b5d1343f
commit 0483e97954
3 changed files with 11 additions and 18 deletions

View File

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

View File

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

View File

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