Use proper loading and null value logic (#848)
This commit is contained in:
parent
c96d252fd1
commit
607eba6a10
2 changed files with 18 additions and 18 deletions
|
@ -9,10 +9,12 @@ interface PercentProps {
|
||||||
const Percent: React.FC<PercentProps> = ({ amount }) => (
|
const Percent: React.FC<PercentProps> = ({ amount }) => (
|
||||||
<LocaleConsumer>
|
<LocaleConsumer>
|
||||||
{({ locale }) =>
|
{({ locale }) =>
|
||||||
(amount / 100).toLocaleString(locale, {
|
amount
|
||||||
maximumFractionDigits: 2,
|
? (amount / 100).toLocaleString(locale, {
|
||||||
style: "percent"
|
maximumFractionDigits: 2,
|
||||||
})
|
style: "percent"
|
||||||
|
})
|
||||||
|
: "-"
|
||||||
}
|
}
|
||||||
</LocaleConsumer>
|
</LocaleConsumer>
|
||||||
);
|
);
|
||||||
|
|
|
@ -221,6 +221,8 @@ const VoucherList: React.FC<VoucherListProps> = props => {
|
||||||
const channel = voucher?.channelListings?.find(
|
const channel = voucher?.channelListings?.find(
|
||||||
listing => listing.channel.id === selectedChannel
|
listing => listing.channel.id === selectedChannel
|
||||||
);
|
);
|
||||||
|
const hasChannelsLoaded = voucher?.channelListings?.length;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TableRow
|
<TableRow
|
||||||
className={!!voucher ? classes.tableRow : undefined}
|
className={!!voucher ? classes.tableRow : undefined}
|
||||||
|
@ -241,10 +243,8 @@ const VoucherList: React.FC<VoucherListProps> = props => {
|
||||||
{maybe<React.ReactNode>(() => voucher.code, <Skeleton />)}
|
{maybe<React.ReactNode>(() => voucher.code, <Skeleton />)}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell className={classes.colMinSpent}>
|
<TableCell className={classes.colMinSpent}>
|
||||||
{channel?.minSpent ? (
|
{hasChannelsLoaded ? (
|
||||||
<Money money={channel.minSpent} />
|
<Money money={channel?.minSpent} />
|
||||||
) : channel && channel.minSpent === null ? (
|
|
||||||
"-"
|
|
||||||
) : (
|
) : (
|
||||||
<Skeleton />
|
<Skeleton />
|
||||||
)}
|
)}
|
||||||
|
@ -269,21 +269,19 @@ const VoucherList: React.FC<VoucherListProps> = props => {
|
||||||
className={classes.colValue}
|
className={classes.colValue}
|
||||||
onClick={voucher ? onRowClick(voucher.id) : undefined}
|
onClick={voucher ? onRowClick(voucher.id) : undefined}
|
||||||
>
|
>
|
||||||
{voucher &&
|
{hasChannelsLoaded ? (
|
||||||
voucher.discountValueType &&
|
|
||||||
channel?.discountValue ? (
|
|
||||||
voucher.discountValueType ===
|
voucher.discountValueType ===
|
||||||
DiscountValueTypeEnum.FIXED ? (
|
DiscountValueTypeEnum.FIXED ? (
|
||||||
<Money
|
<Money
|
||||||
money={{
|
money={
|
||||||
amount: channel.discountValue,
|
channel?.discountValue && {
|
||||||
currency: channel.currency
|
amount: channel?.discountValue,
|
||||||
}}
|
currency: channel?.currency
|
||||||
|
}
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
) : channel?.discountValue ? (
|
|
||||||
<Percent amount={channel.discountValue} />
|
|
||||||
) : (
|
) : (
|
||||||
"-"
|
<Percent amount={channel?.discountValue} />
|
||||||
)
|
)
|
||||||
) : (
|
) : (
|
||||||
<Skeleton />
|
<Skeleton />
|
||||||
|
|
Loading…
Reference in a new issue