From 3f2a75e159b2257e062e9b98b772bf59113b2aa7 Mon Sep 17 00:00:00 2001
From: Dawid Tarasiuk <tarasiukdawid@gmail.com>
Date: Wed, 17 Jun 2020 12:03:06 +0200
Subject: [PATCH] Replace maybe with optional chaining

---
 .../CategoryProductList.tsx                   |  85 ++++++++------
 .../components/ProductList/ProductList.tsx    | 110 ++++++++++--------
 .../ProductUpdatePage/ProductUpdatePage.tsx   |   7 +-
 3 files changed, 115 insertions(+), 87 deletions(-)

diff --git a/src/categories/components/CategoryProductList/CategoryProductList.tsx b/src/categories/components/CategoryProductList/CategoryProductList.tsx
index ed1c432f0..404a37cc6 100644
--- a/src/categories/components/CategoryProductList/CategoryProductList.tsx
+++ b/src/categories/components/CategoryProductList/CategoryProductList.tsx
@@ -19,7 +19,10 @@ import { ListActions, ListProps } from "@saleor/types";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
-import { CategoryDetails_category_products_edges_node } from "../../types/CategoryDetails";
+import {
+  CategoryDetails_category_products_edges_node,
+  CategoryDetails_category_products_edges_node_variants
+} from "../../types/CategoryDetails";
 
 const useStyles = makeStyles(
   theme => ({
@@ -95,6 +98,46 @@ export const CategoryProductList: React.FC<CategoryProductListProps> = props =>
 
   const numberOfColumns = 5;
 
+  const getProductPrice = (
+    variants: CategoryDetails_category_products_edges_node_variants[]
+  ) => {
+    if (!variants.length) {
+      return null;
+    }
+
+    const { max, min } = getProductPriceRange(variants);
+    const currency = variants[0].price.currency;
+
+    if (max === min) {
+      return (
+        <Money
+          money={{
+            amount: min,
+            currency
+          }}
+        />
+      );
+    } else {
+      return (
+        <>
+          <Money
+            money={{
+              amount: min,
+              currency
+            }}
+          />
+          {" - "}
+          <Money
+            money={{
+              amount: max,
+              currency
+            }}
+          />
+        </>
+      );
+    }
+  };
+
   return (
     <div className={classes.tableContainer}>
       <ResponsiveTable className={classes.table}>
@@ -208,41 +251,11 @@ export const CategoryProductList: React.FC<CategoryProductListProps> = props =>
                     )}
                   </TableCell>
                   <TableCell className={classes.colPrice}>
-                    {maybe<React.ReactNode>(() => {
-                      const { max, min } = getProductPriceRange(
-                        product.variants
-                      );
-                      const currency = product.variants[0].price.currency;
-
-                      if (max === min) {
-                        return (
-                          <Money
-                            money={{
-                              amount: min,
-                              currency
-                            }}
-                          />
-                        );
-                      } else {
-                        return (
-                          <>
-                            <Money
-                              money={{
-                                amount: min,
-                                currency
-                              }}
-                            />
-                            {" - "}
-                            <Money
-                              money={{
-                                amount: max,
-                                currency
-                              }}
-                            />
-                          </>
-                        );
-                      }
-                    }, <Skeleton />)}
+                    {product?.variants ? (
+                      getProductPrice(product.variants)
+                    ) : (
+                      <Skeleton />
+                    )}
                   </TableCell>
                 </TableRow>
               );
diff --git a/src/products/components/ProductList/ProductList.tsx b/src/products/components/ProductList/ProductList.tsx
index 043ac7584..57e5bbdd1 100644
--- a/src/products/components/ProductList/ProductList.tsx
+++ b/src/products/components/ProductList/ProductList.tsx
@@ -22,7 +22,10 @@ import {
   isAttributeColumnValue
 } from "@saleor/products/components/ProductListPage/utils";
 import { AvailableInGridAttributes_grid_edges_node } from "@saleor/products/types/AvailableInGridAttributes";
-import { ProductList_products_edges_node } from "@saleor/products/types/ProductList";
+import {
+  ProductList_products_edges_node,
+  ProductList_products_edges_node_variants
+} from "@saleor/products/types/ProductList";
 import { ProductListUrlSortField } from "@saleor/products/urls";
 import { ListActions, ListProps, SortPage } from "@saleor/types";
 import TDisplayColumn, {
@@ -139,6 +142,46 @@ export const ProductList: React.FC<ProductListProps> = props => {
   );
   const numberOfColumns = 2 + settings.columns.length;
 
+  const getProductPrice = (
+    variants: ProductList_products_edges_node_variants[]
+  ) => {
+    if (!variants.length) {
+      return null;
+    }
+
+    const { max, min } = getProductPriceRange(variants);
+    const currency = variants[0].price.currency;
+
+    if (max === min) {
+      return (
+        <Money
+          money={{
+            amount: min,
+            currency
+          }}
+        />
+      );
+    } else {
+      return (
+        <>
+          <Money
+            money={{
+              amount: min,
+              currency
+            }}
+          />
+          {" - "}
+          <Money
+            money={{
+              amount: max,
+              currency
+            }}
+          />
+        </>
+      );
+    }
+  };
+
   return (
     <div className={classes.tableContainer}>
       <ResponsiveTable className={classes.table}>
@@ -305,19 +348,18 @@ export const ProductList: React.FC<ProductListProps> = props => {
                     thumbnail={maybe(() => product.thumbnail.url)}
                     data-tc="name"
                   >
-                    {maybe<React.ReactNode>(
-                      () => (
-                        <div className={classes.colNameGrid}>
-                          <span>{product.name}</span>
-                          {product && product.productType && (
-                            <span className={classes.colNameType}>
-                              {product.productType.hasVariants
-                                ? "Configurable"
-                                : "Simple"}
-                            </span>
-                          )}
-                        </div>
-                      ),
+                    {product?.productType ? (
+                      <div className={classes.colNameGrid}>
+                        <span>{product.name}</span>
+                        {product && product.productType && (
+                          <span className={classes.colNameType}>
+                            {product.productType.hasVariants
+                              ? "Configurable"
+                              : "Simple"}
+                          </span>
+                        )}
+                      </div>
+                    ) : (
                       <Skeleton />
                     )}
                   </TableCellAvatar>
@@ -395,41 +437,11 @@ export const ProductList: React.FC<ProductListProps> = props => {
                     displayColumns={settings.columns}
                   >
                     <TableCell className={classes.colPrice}>
-                      {maybe<React.ReactNode>(() => {
-                        const { max, min } = getProductPriceRange(
-                          product.variants
-                        );
-                        const currency = product.variants[0].price.currency;
-
-                        if (max === min) {
-                          return (
-                            <Money
-                              money={{
-                                amount: min,
-                                currency
-                              }}
-                            />
-                          );
-                        } else {
-                          return (
-                            <>
-                              <Money
-                                money={{
-                                  amount: min,
-                                  currency
-                                }}
-                              />
-                              {" - "}
-                              <Money
-                                money={{
-                                  amount: max,
-                                  currency
-                                }}
-                              />
-                            </>
-                          );
-                        }
-                      }, <Skeleton />)}
+                      {product?.variants ? (
+                        getProductPrice(product.variants)
+                      ) : (
+                        <Skeleton />
+                      )}
                     </TableCell>
                   </DisplayColumn>
                 </TableRow>
diff --git a/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx b/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx
index cff3c653c..ec2d7df57 100644
--- a/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx
+++ b/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx
@@ -159,7 +159,8 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
 
   const categories = getChoices(categoryChoiceList);
   const collections = getChoices(collectionChoiceList);
-  const currency = maybe(() => product.variants[0].price.currency);
+  const currency =
+    product?.variants?.length && product.variants[0].price.currency;
   const hasVariants = maybe(() => product.productType.hasVariants, false);
 
   const handleSubmit = (data: ProductUpdatePageFormData) => {
@@ -263,7 +264,9 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
                       disabled={disabled}
                       variants={variants}
                       fallbackPrice={
-                        product ? product.variants[0].price : undefined
+                        product?.variants?.length
+                          ? product.variants[0].price
+                          : undefined
                       }
                       onRowClick={onVariantShow}
                       onVariantAdd={onVariantAdd}