mirror of
https://github.com/vercel/commerce.git
synced 2025-03-14 22:42:33 +00:00
Changed the way isEmpty works
This commit is contained in:
parent
a7baff45fc
commit
1db974dabd
@ -11,7 +11,7 @@ import s from './CartSidebarView.module.css'
|
||||
|
||||
const CartSidebarView: FC = () => {
|
||||
const { closeSidebar } = useUI()
|
||||
const { data, isEmpty } = useCart()
|
||||
const { data, isLoading, isEmpty } = useCart()
|
||||
|
||||
const { price: subTotal } = usePrice(
|
||||
data && {
|
||||
@ -19,7 +19,7 @@ const CartSidebarView: FC = () => {
|
||||
currencyCode: data.currency?.code || 'USD',
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
const { price: total } = usePrice(
|
||||
data && {
|
||||
amount: Number(data.total),
|
||||
@ -34,9 +34,7 @@ const CartSidebarView: FC = () => {
|
||||
return (
|
||||
<div
|
||||
className={cn(s.root, {
|
||||
[s.empty]: error,
|
||||
[s.empty]: success,
|
||||
[s.empty]: isEmpty,
|
||||
[s.empty]: error || success || isLoading || isEmpty,
|
||||
})}
|
||||
>
|
||||
<header className="px-4 pt-6 pb-4 sm:px-6">
|
||||
@ -56,7 +54,7 @@ const CartSidebarView: FC = () => {
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{isEmpty ? (
|
||||
{isLoading || isEmpty ? (
|
||||
<div className="flex-1 px-4 flex flex-col justify-center items-center">
|
||||
<span className="border border-dashed border-primary rounded-full flex items-center justify-center w-16 h-16 p-12 bg-secondary text-secondary">
|
||||
<Bag className="absolute" />
|
||||
|
@ -1,6 +1,7 @@
|
||||
import { normalizeCart } from '../lib/normalize'
|
||||
import type { HookFetcher } from '@commerce/utils/types'
|
||||
import type { SwrOptions } from '@commerce/utils/use-data'
|
||||
import defineProperty from '@commerce/utils/define-property'
|
||||
import useCommerceCart, { CartInput } from '@commerce/cart/use-cart'
|
||||
import type { Cart as BigCommerceCart } from '../api/cart'
|
||||
import update from '@framework/lib/immutability'
|
||||
@ -32,14 +33,16 @@ export function extendHook(
|
||||
|
||||
// Uses a getter to only calculate the prop when required
|
||||
// response.data is also a getter and it's better to not trigger it early
|
||||
Object.defineProperty(response, 'isEmpty', {
|
||||
get() {
|
||||
return Object.values(response.data?.line_items ?? {}).every(
|
||||
(items) => !items.length
|
||||
)
|
||||
},
|
||||
set: (x) => x,
|
||||
})
|
||||
if (!('isEmpty' in response)) {
|
||||
defineProperty(response, 'isEmpty', {
|
||||
get() {
|
||||
return Object.values(response.data?.line_items ?? {}).every(
|
||||
(items) => !items.length
|
||||
)
|
||||
},
|
||||
set: (x) => x,
|
||||
})
|
||||
}
|
||||
|
||||
return response.data
|
||||
? update(response, {
|
||||
|
@ -1,5 +1,6 @@
|
||||
import { HookFetcher } from '@commerce/utils/types'
|
||||
import { SwrOptions } from '@commerce/utils/use-data'
|
||||
import defineProperty from '@commerce/utils/define-property'
|
||||
import useCommerceWishlist from '@commerce/wishlist/use-wishlist'
|
||||
import type { Wishlist } from '../api/wishlist'
|
||||
import useCustomer from '../customer/use-customer'
|
||||
@ -58,12 +59,14 @@ export function extendHook(
|
||||
|
||||
// Uses a getter to only calculate the prop when required
|
||||
// response.data is also a getter and it's better to not trigger it early
|
||||
Object.defineProperty(response, 'isEmpty', {
|
||||
get() {
|
||||
return (response.data?.items?.length || 0) <= 0
|
||||
},
|
||||
set: (x) => x,
|
||||
})
|
||||
if (!('isEmpty' in response)) {
|
||||
defineProperty(response, 'isEmpty', {
|
||||
get() {
|
||||
return (response.data?.items?.length || 0) <= 0
|
||||
},
|
||||
set: (x) => x,
|
||||
})
|
||||
}
|
||||
|
||||
return response
|
||||
}
|
||||
|
@ -4,7 +4,7 @@ import type { HookInput, HookFetcher, HookFetcherOptions } from '../utils/types'
|
||||
import useData, { ResponseState, SwrOptions } from '../utils/use-data'
|
||||
import { useCommerce } from '..'
|
||||
|
||||
export type CartResponse<Result> = ResponseState<Result> & { isEmpty: boolean }
|
||||
export type CartResponse<Result> = ResponseState<Result> & { isEmpty?: boolean }
|
||||
|
||||
export type CartInput = {
|
||||
cartId: Cart['id']
|
||||
@ -25,5 +25,5 @@ export default function useCart<Result>(
|
||||
|
||||
const response = useData(options, input, fetcher, swrOptions)
|
||||
|
||||
return Object.assign(response, { isEmpty: true })
|
||||
return response
|
||||
}
|
||||
|
@ -3,7 +3,7 @@ import type { HookInput, HookFetcher, HookFetcherOptions } from '../utils/types'
|
||||
import useData, { ResponseState, SwrOptions } from '../utils/use-data'
|
||||
|
||||
export type WishlistResponse<Result> = ResponseState<Result> & {
|
||||
isEmpty: boolean
|
||||
isEmpty?: boolean
|
||||
}
|
||||
|
||||
export default function useWishlist<Result, Input = null>(
|
||||
@ -13,5 +13,5 @@ export default function useWishlist<Result, Input = null>(
|
||||
swrOptions?: SwrOptions<Result, Input>
|
||||
): WishlistResponse<Result> {
|
||||
const response = useData(options, input, fetcherFn, swrOptions)
|
||||
return Object.assign(response, { isEmpty: true })
|
||||
return response
|
||||
}
|
||||
|
@ -24,7 +24,7 @@ export async function getStaticProps({
|
||||
export default function Cart() {
|
||||
const error = null
|
||||
const success = null
|
||||
const { data, isEmpty } = useCart()
|
||||
const { data, isLoading, isEmpty } = useCart()
|
||||
|
||||
const { price: subTotal } = usePrice(
|
||||
data && {
|
||||
@ -42,7 +42,7 @@ export default function Cart() {
|
||||
return (
|
||||
<div className="grid lg:grid-cols-12">
|
||||
<div className="lg:col-span-8">
|
||||
{isEmpty ? (
|
||||
{isLoading || isEmpty ? (
|
||||
<div className="flex-1 px-12 py-24 flex flex-col justify-center items-center ">
|
||||
<span className="border border-dashed border-secondary flex items-center justify-center w-16 h-16 bg-primary p-12 rounded-lg text-primary">
|
||||
<Bag className="absolute" />
|
||||
|
@ -22,14 +22,14 @@ export async function getStaticProps({
|
||||
|
||||
export default function Wishlist() {
|
||||
const { data: customer } = useCustomer()
|
||||
const { data, isEmpty } = useWishlist()
|
||||
const { data, isLoading, isEmpty } = useWishlist()
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<div className="mt-3 mb-20">
|
||||
<Text variant="pageHeading">My Wishlist</Text>
|
||||
<div className="group flex flex-col">
|
||||
{isEmpty ? (
|
||||
{isLoading || isEmpty ? (
|
||||
<div className="flex-1 px-12 py-24 flex flex-col justify-center items-center ">
|
||||
<span className="border border-dashed border-secondary flex items-center justify-center w-16 h-16 bg-primary p-12 rounded-lg text-primary">
|
||||
<Heart className="absolute" />
|
||||
|
Loading…
x
Reference in New Issue
Block a user