djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Replace maybe with optional chaining

Browse source
This commit is contained in:
Dawid Tarasiuk 2020-06-17 12:03:06 +02:00
parent 0f5a49ab48
commit 3f2a75e159
3 changed files with 115 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
src/categories/components/CategoryProductList/CategoryProductList.tsx
View file

@ -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>
);

90
src/products/components/ProductList/ProductList.tsx
View file

@ -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>(() => {
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>

7
src/products/components/ProductUpdatePage/ProductUpdatePage.tsx
View file

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