4
0
forked from crowetic/commerce

Changed the way isEmpty works

This commit is contained in:
Luis Alvarez 2021-01-20 15:29:02 -05:00
parent a7baff45fc
commit 1db974dabd
7 changed files with 32 additions and 28 deletions

View File

@ -11,7 +11,7 @@ import s from './CartSidebarView.module.css'
const CartSidebarView: FC = () => { const CartSidebarView: FC = () => {
const { closeSidebar } = useUI() const { closeSidebar } = useUI()
const { data, isEmpty } = useCart() const { data, isLoading, isEmpty } = useCart()
const { price: subTotal } = usePrice( const { price: subTotal } = usePrice(
data && { data && {
@ -19,7 +19,7 @@ const CartSidebarView: FC = () => {
currencyCode: data.currency?.code || 'USD', currencyCode: data.currency?.code || 'USD',
} }
) )
const { price: total } = usePrice( const { price: total } = usePrice(
data && { data && {
amount: Number(data.total), amount: Number(data.total),
@ -34,9 +34,7 @@ const CartSidebarView: FC = () => {
return ( return (
<div <div
className={cn(s.root, { className={cn(s.root, {
[s.empty]: error, [s.empty]: error || success || isLoading || isEmpty,
[s.empty]: success,
[s.empty]: isEmpty,
})} })}
> >
<header className="px-4 pt-6 pb-4 sm:px-6"> <header className="px-4 pt-6 pb-4 sm:px-6">
@ -56,7 +54,7 @@ const CartSidebarView: FC = () => {
</div> </div>
</header> </header>
{isEmpty ? ( {isLoading || isEmpty ? (
<div className="flex-1 px-4 flex flex-col justify-center items-center"> <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"> <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" /> <Bag className="absolute" />

View File

@ -1,6 +1,7 @@
import { normalizeCart } from '../lib/normalize' import { normalizeCart } from '../lib/normalize'
import type { HookFetcher } from '@commerce/utils/types' import type { HookFetcher } from '@commerce/utils/types'
import type { SwrOptions } from '@commerce/utils/use-data' import type { SwrOptions } from '@commerce/utils/use-data'
import defineProperty from '@commerce/utils/define-property'
import useCommerceCart, { CartInput } from '@commerce/cart/use-cart' import useCommerceCart, { CartInput } from '@commerce/cart/use-cart'
import type { Cart as BigCommerceCart } from '../api/cart' import type { Cart as BigCommerceCart } from '../api/cart'
import update from '@framework/lib/immutability' import update from '@framework/lib/immutability'
@ -32,14 +33,16 @@ export function extendHook(
// Uses a getter to only calculate the prop when required // 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 // response.data is also a getter and it's better to not trigger it early
Object.defineProperty(response, 'isEmpty', { if (!('isEmpty' in response)) {
get() { defineProperty(response, 'isEmpty', {
return Object.values(response.data?.line_items ?? {}).every( get() {
(items) => !items.length return Object.values(response.data?.line_items ?? {}).every(
) (items) => !items.length
}, )
set: (x) => x, },
}) set: (x) => x,
})
}
return response.data return response.data
? update(response, { ? update(response, {

View File

@ -1,5 +1,6 @@
import { HookFetcher } from '@commerce/utils/types' import { HookFetcher } from '@commerce/utils/types'
import { SwrOptions } from '@commerce/utils/use-data' import { SwrOptions } from '@commerce/utils/use-data'
import defineProperty from '@commerce/utils/define-property'
import useCommerceWishlist from '@commerce/wishlist/use-wishlist' import useCommerceWishlist from '@commerce/wishlist/use-wishlist'
import type { Wishlist } from '../api/wishlist' import type { Wishlist } from '../api/wishlist'
import useCustomer from '../customer/use-customer' import useCustomer from '../customer/use-customer'
@ -58,12 +59,14 @@ export function extendHook(
// Uses a getter to only calculate the prop when required // 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 // response.data is also a getter and it's better to not trigger it early
Object.defineProperty(response, 'isEmpty', { if (!('isEmpty' in response)) {
get() { defineProperty(response, 'isEmpty', {
return (response.data?.items?.length || 0) <= 0 get() {
}, return (response.data?.items?.length || 0) <= 0
set: (x) => x, },
}) set: (x) => x,
})
}
return response return response
} }

View File

@ -4,7 +4,7 @@ import type { HookInput, HookFetcher, HookFetcherOptions } from '../utils/types'
import useData, { ResponseState, SwrOptions } from '../utils/use-data' import useData, { ResponseState, SwrOptions } from '../utils/use-data'
import { useCommerce } from '..' import { useCommerce } from '..'
export type CartResponse<Result> = ResponseState<Result> & { isEmpty: boolean } export type CartResponse<Result> = ResponseState<Result> & { isEmpty?: boolean }
export type CartInput = { export type CartInput = {
cartId: Cart['id'] cartId: Cart['id']
@ -25,5 +25,5 @@ export default function useCart<Result>(
const response = useData(options, input, fetcher, swrOptions) const response = useData(options, input, fetcher, swrOptions)
return Object.assign(response, { isEmpty: true }) return response
} }

View File

@ -3,7 +3,7 @@ import type { HookInput, HookFetcher, HookFetcherOptions } from '../utils/types'
import useData, { ResponseState, SwrOptions } from '../utils/use-data' import useData, { ResponseState, SwrOptions } from '../utils/use-data'
export type WishlistResponse<Result> = ResponseState<Result> & { export type WishlistResponse<Result> = ResponseState<Result> & {
isEmpty: boolean isEmpty?: boolean
} }
export default function useWishlist<Result, Input = null>( export default function useWishlist<Result, Input = null>(
@ -13,5 +13,5 @@ export default function useWishlist<Result, Input = null>(
swrOptions?: SwrOptions<Result, Input> swrOptions?: SwrOptions<Result, Input>
): WishlistResponse<Result> { ): WishlistResponse<Result> {
const response = useData(options, input, fetcherFn, swrOptions) const response = useData(options, input, fetcherFn, swrOptions)
return Object.assign(response, { isEmpty: true }) return response
} }

View File

@ -24,7 +24,7 @@ export async function getStaticProps({
export default function Cart() { export default function Cart() {
const error = null const error = null
const success = null const success = null
const { data, isEmpty } = useCart() const { data, isLoading, isEmpty } = useCart()
const { price: subTotal } = usePrice( const { price: subTotal } = usePrice(
data && { data && {
@ -42,7 +42,7 @@ export default function Cart() {
return ( return (
<div className="grid lg:grid-cols-12"> <div className="grid lg:grid-cols-12">
<div className="lg:col-span-8"> <div className="lg:col-span-8">
{isEmpty ? ( {isLoading || isEmpty ? (
<div className="flex-1 px-12 py-24 flex flex-col justify-center items-center "> <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"> <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" /> <Bag className="absolute" />

View File

@ -22,14 +22,14 @@ export async function getStaticProps({
export default function Wishlist() { export default function Wishlist() {
const { data: customer } = useCustomer() const { data: customer } = useCustomer()
const { data, isEmpty } = useWishlist() const { data, isLoading, isEmpty } = useWishlist()
return ( return (
<Container> <Container>
<div className="mt-3 mb-20"> <div className="mt-3 mb-20">
<Text variant="pageHeading">My Wishlist</Text> <Text variant="pageHeading">My Wishlist</Text>
<div className="group flex flex-col"> <div className="group flex flex-col">
{isEmpty ? ( {isLoading || isEmpty ? (
<div className="flex-1 px-12 py-24 flex flex-col justify-center items-center "> <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"> <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" /> <Heart className="absolute" />