cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Changed the way isEmpty works

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/cart/CartSidebarView/CartSidebarView.tsx
View File

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

19
framework/bigcommerce/cart/use-cart.tsx
View File

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

15
framework/bigcommerce/wishlist/use-wishlist.tsx
View File

@ -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
framework/commerce/cart/use-cart.tsx
View File

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

4
framework/commerce/wishlist/use-wishlist.tsx
View File

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

4
pages/cart.tsx
View File

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

4
pages/wishlist.tsx
View File

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