Replace maybe with optional chaining

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>(() => {
+                    {product?.variants ? (
-                      const { max, min } = getProductPriceRange(
+                      getProductPrice(product.variants)
-                        product.variants
+                    ) : (
-                      );
+                      <Skeleton />
-                      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 />)}
                   </TableCell>
                 </TableRow>
               );

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,8 +348,7 @@ export const ProductList: React.FC<ProductListProps> = props => {
                     thumbnail={maybe(() => product.thumbnail.url)}
                     data-tc="name"
                   >
-                    {maybe<React.ReactNode>(
+                    {product?.productType ? (
-                      () => (
                       <div className={classes.colNameGrid}>
                         <span>{product.name}</span>
                         {product && product.productType && (
@@ -317,7 +359,7 @@ export const ProductList: React.FC<ProductListProps> = props => {
                           </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>(() => {
+                      {product?.variants ? (
-                        const { max, min } = getProductPriceRange(
+                        getProductPrice(product.variants)
-                          product.variants
+                      ) : (
-                        );
+                        <Skeleton />
-                        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 />)}
                     </TableCell>
                   </DisplayColumn>
                 </TableRow>

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}