From 607eba6a1074247f5351edf4b02ad13dee101cbf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= <flesz3@o2.pl>
Date: Mon, 23 Nov 2020 10:38:46 +0100
Subject: [PATCH] Use proper loading and null value logic (#848)

---
 src/components/Percent/Percent.tsx            | 10 ++++---
 .../components/VoucherList/VoucherList.tsx    | 26 +++++++++----------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/components/Percent/Percent.tsx b/src/components/Percent/Percent.tsx
index 4a34cf72c..d0876ed24 100644
--- a/src/components/Percent/Percent.tsx
+++ b/src/components/Percent/Percent.tsx
@@ -9,10 +9,12 @@ interface PercentProps {
 const Percent: React.FC<PercentProps> = ({ amount }) => (
   <LocaleConsumer>
     {({ locale }) =>
-      (amount / 100).toLocaleString(locale, {
-        maximumFractionDigits: 2,
-        style: "percent"
-      })
+      amount
+        ? (amount / 100).toLocaleString(locale, {
+            maximumFractionDigits: 2,
+            style: "percent"
+          })
+        : "-"
     }
   </LocaleConsumer>
 );
diff --git a/src/discounts/components/VoucherList/VoucherList.tsx b/src/discounts/components/VoucherList/VoucherList.tsx
index c1fa415cd..284f111b7 100644
--- a/src/discounts/components/VoucherList/VoucherList.tsx
+++ b/src/discounts/components/VoucherList/VoucherList.tsx
@@ -221,6 +221,8 @@ const VoucherList: React.FC<VoucherListProps> = props => {
             const channel = voucher?.channelListings?.find(
               listing => listing.channel.id === selectedChannel
             );
+            const hasChannelsLoaded = voucher?.channelListings?.length;
+
             return (
               <TableRow
                 className={!!voucher ? classes.tableRow : undefined}
@@ -241,10 +243,8 @@ const VoucherList: React.FC<VoucherListProps> = props => {
                   {maybe<React.ReactNode>(() => voucher.code, <Skeleton />)}
                 </TableCell>
                 <TableCell className={classes.colMinSpent}>
-                  {channel?.minSpent ? (
-                    <Money money={channel.minSpent} />
-                  ) : channel && channel.minSpent === null ? (
-                    "-"
+                  {hasChannelsLoaded ? (
+                    <Money money={channel?.minSpent} />
                   ) : (
                     <Skeleton />
                   )}
@@ -269,21 +269,19 @@ const VoucherList: React.FC<VoucherListProps> = props => {
                   className={classes.colValue}
                   onClick={voucher ? onRowClick(voucher.id) : undefined}
                 >
-                  {voucher &&
-                  voucher.discountValueType &&
-                  channel?.discountValue ? (
+                  {hasChannelsLoaded ? (
                     voucher.discountValueType ===
                     DiscountValueTypeEnum.FIXED ? (
                       <Money
-                        money={{
-                          amount: channel.discountValue,
-                          currency: channel.currency
-                        }}
+                        money={
+                          channel?.discountValue && {
+                            amount: channel?.discountValue,
+                            currency: channel?.currency
+                          }
+                        }
                       />
-                    ) : channel?.discountValue ? (
-                      <Percent amount={channel.discountValue} />
                     ) : (
-                      "-"
+                      <Percent amount={channel?.discountValue} />
                     )
                   ) : (
                     <Skeleton />