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 React from "react";
import { FormattedMessage, useIntl } from "react-intl"; 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( const useStyles = makeStyles(
theme => ({ theme => ({
@ -95,6 +98,46 @@ export const CategoryProductList: React.FC<CategoryProductListProps> = props =>
const numberOfColumns = 5; 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 ( return (
<div className={classes.tableContainer}> <div className={classes.tableContainer}>
<ResponsiveTable className={classes.table}> <ResponsiveTable className={classes.table}>
@ -208,41 +251,11 @@ export const CategoryProductList: React.FC<CategoryProductListProps> = props =>
)} )}
</TableCell> </TableCell>
<TableCell className={classes.colPrice}> <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> </TableCell>
</TableRow> </TableRow>
); );

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

@ -22,7 +22,10 @@ import {
isAttributeColumnValue isAttributeColumnValue
} from "@saleor/products/components/ProductListPage/utils"; } from "@saleor/products/components/ProductListPage/utils";
import { AvailableInGridAttributes_grid_edges_node } from "@saleor/products/types/AvailableInGridAttributes"; 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 { ProductListUrlSortField } from "@saleor/products/urls";
import { ListActions, ListProps, SortPage } from "@saleor/types"; import { ListActions, ListProps, SortPage } from "@saleor/types";
import TDisplayColumn, { import TDisplayColumn, {
@ -139,6 +142,46 @@ export const ProductList: React.FC<ProductListProps> = props => {
); );
const numberOfColumns = 2 + settings.columns.length; 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 ( return (
<div className={classes.tableContainer}> <div className={classes.tableContainer}>
<ResponsiveTable className={classes.table}> <ResponsiveTable className={classes.table}>
@ -305,19 +348,18 @@ export const ProductList: React.FC<ProductListProps> = props => {
thumbnail={maybe(() => product.thumbnail.url)} thumbnail={maybe(() => product.thumbnail.url)}
data-tc="name" data-tc="name"
> >
{maybe<React.ReactNode>( {product?.productType ? (
() => ( <div className={classes.colNameGrid}>
<div className={classes.colNameGrid}> <span>{product.name}</span>
<span>{product.name}</span> {product && product.productType && (
{product && product.productType && ( <span className={classes.colNameType}>
<span className={classes.colNameType}> {product.productType.hasVariants
{product.productType.hasVariants ? "Configurable"
? "Configurable" : "Simple"}
: "Simple"} </span>
</span> )}
)} </div>
</div> ) : (
),
<Skeleton /> <Skeleton />
)} )}
</TableCellAvatar> </TableCellAvatar>
@ -395,41 +437,11 @@ export const ProductList: React.FC<ProductListProps> = props => {
displayColumns={settings.columns} displayColumns={settings.columns}
> >
<TableCell className={classes.colPrice}> <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> </TableCell>
</DisplayColumn> </DisplayColumn>
</TableRow> </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 categories = getChoices(categoryChoiceList);
const collections = getChoices(collectionChoiceList); 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 hasVariants = maybe(() => product.productType.hasVariants, false);
const handleSubmit = (data: ProductUpdatePageFormData) => { const handleSubmit = (data: ProductUpdatePageFormData) => {
@ -263,7 +264,9 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
disabled={disabled} disabled={disabled}
variants={variants} variants={variants}
fallbackPrice={ fallbackPrice={
product ? product.variants[0].price : undefined product?.variants?.length
? product.variants[0].price
: undefined
} }
onRowClick={onVariantShow} onRowClick={onVariantShow}
onVariantAdd={onVariantAdd} onVariantAdd={onVariantAdd}