From 987d5401ee090865dcbe36b0368026101c4289cb Mon Sep 17 00:00:00 2001 From: Wojciech Date: Tue, 6 Aug 2024 12:20:21 +0200 Subject: [PATCH] Fix loading state in Discounts --- .changeset/fresh-bikes-crash.md | 5 +++++ .../DiscountCategories/DiscountCategories.tsx | 12 +++++------- .../DiscountCollections/DiscountCollections.tsx | 10 +++++----- .../DiscountProducts/DiscountProducts.tsx | 17 +++++++++-------- .../DiscountVariants/DiscountVariants.tsx | 11 +++++++---- .../SaleDetailsPage/SaleDetailsPage.tsx | 6 +++--- .../VoucherDetailsPage/VoucherDetailsPage.tsx | 4 ++-- src/utils/maps.ts | 9 +++++++++ 8 files changed, 45 insertions(+), 29 deletions(-) create mode 100644 .changeset/fresh-bikes-crash.md diff --git a/.changeset/fresh-bikes-crash.md b/.changeset/fresh-bikes-crash.md new file mode 100644 index 00000000000..f2418b31ad0 --- /dev/null +++ b/.changeset/fresh-bikes-crash.md @@ -0,0 +1,5 @@ +--- +"saleor-dashboard": patch +--- + +You can now see a message instead of a loading animation when there are no categories, collections, products or variants assigned in Discounts diff --git a/src/discounts/components/DiscountCategories/DiscountCategories.tsx b/src/discounts/components/DiscountCategories/DiscountCategories.tsx index 9e92952ab87..c9c3b88e499 100644 --- a/src/discounts/components/DiscountCategories/DiscountCategories.tsx +++ b/src/discounts/components/DiscountCategories/DiscountCategories.tsx @@ -9,14 +9,14 @@ import TableHead from "@dashboard/components/TableHead"; import { TablePaginationWithContext } from "@dashboard/components/TablePagination"; import TableRowLink from "@dashboard/components/TableRowLink"; import { SaleDetailsFragment, VoucherDetailsFragment } from "@dashboard/graphql"; -import { mapEdgesToItems } from "@dashboard/utils/maps"; +import { getLoadableList, mapEdgesToItems } from "@dashboard/utils/maps"; import { TableBody, TableCell, TableFooter } from "@material-ui/core"; import { DeleteIcon, IconButton } from "@saleor/macaw-ui"; import { Skeleton } from "@saleor/macaw-ui-next"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; -import { maybe, renderCollection } from "../../../misc"; +import { renderCollection } from "../../../misc"; import { ListActions, ListProps } from "../../../types"; import { messages } from "./messages"; import { useStyles } from "./styles"; @@ -87,7 +87,7 @@ const DiscountCategories: React.FC = props => { {renderCollection( - mapEdgesToItems(discount?.categories), + getLoadableList(discount?.categories), category => { const isSelected = category ? isChecked(category.id) : false; @@ -108,10 +108,8 @@ const DiscountCategories: React.FC = props => { onChange={() => toggle(category.id)} /> - {maybe(() => category.name, )} - - {maybe(() => category.products.totalCount, )} - + {category ? category.name : } + {category ? category.products.totalCount : } = props => { {renderCollection( - mapEdgesToItems(sale?.collections), + getLoadableList(sale?.collections), collection => { const isSelected = collection ? isChecked(collection.id) : false; @@ -107,10 +107,10 @@ const DiscountCollections: React.FC = props => { /> - {maybe(() => collection.name, )} + {collection ? collection.name : } - {maybe(() => collection.products.totalCount, )} + {collection ? collection.products.totalCount : } diff --git a/src/discounts/components/DiscountProducts/DiscountProducts.tsx b/src/discounts/components/DiscountProducts/DiscountProducts.tsx index 238a5e26676..a386ff94565 100644 --- a/src/discounts/components/DiscountProducts/DiscountProducts.tsx +++ b/src/discounts/components/DiscountProducts/DiscountProducts.tsx @@ -11,6 +11,7 @@ import { TablePaginationWithContext } from "@dashboard/components/TablePaginatio import TableRowLink from "@dashboard/components/TableRowLink"; import { SaleDetailsFragment, VoucherDetailsFragment } from "@dashboard/graphql"; import { productUrl } from "@dashboard/products/urls"; +import { getLoadableList, mapEdgesToItems } from "@dashboard/utils/maps"; import { TableBody, TableCell, TableFooter } from "@material-ui/core"; import { DeleteIcon, IconButton } from "@saleor/macaw-ui"; import { Skeleton } from "@saleor/macaw-ui-next"; @@ -18,14 +19,12 @@ import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; import { maybe, renderCollection } from "../../../misc"; -import { ListActions, ListProps, RelayToFlat } from "../../../types"; +import { ListActions, ListProps } from "../../../types"; import { messages } from "./messages"; import { useStyles } from "./styles"; export interface SaleProductsProps extends ListProps, ListActions { - products: - | RelayToFlat - | RelayToFlat; + discount: SaleDetailsFragment | VoucherDetailsFragment; onProductAssign: () => void; onProductUnassign: (id: string) => void; } @@ -33,7 +32,7 @@ export interface SaleProductsProps extends ListProps, ListActions { const numberOfColumns = 5; const DiscountProducts: React.FC = props => { const { - products, + discount, disabled, onProductAssign, onProductUnassign, @@ -46,6 +45,8 @@ const DiscountProducts: React.FC = props => { const classes = useStyles(props); const intl = useIntl(); + const productsList = mapEdgesToItems(discount?.products); + return ( @@ -71,12 +72,12 @@ const DiscountProducts: React.FC = props => { colSpan={numberOfColumns} selected={selected} disabled={disabled} - items={products} + items={productsList} toggleAll={toggleAll} toolbar={toolbar} > - 0 && classes.colNameLabel}> + 0 && classes.colNameLabel}> @@ -95,7 +96,7 @@ const DiscountProducts: React.FC = props => { {renderCollection( - products, + getLoadableList(discount?.products), product => { const isSelected = product ? isChecked(product.id) : false; diff --git a/src/discounts/components/DiscountVariants/DiscountVariants.tsx b/src/discounts/components/DiscountVariants/DiscountVariants.tsx index 04480413769..e5c607f6279 100644 --- a/src/discounts/components/DiscountVariants/DiscountVariants.tsx +++ b/src/discounts/components/DiscountVariants/DiscountVariants.tsx @@ -10,6 +10,7 @@ import { TablePaginationWithContext } from "@dashboard/components/TablePaginatio import TableRowLink from "@dashboard/components/TableRowLink"; import { SaleDetailsFragment } from "@dashboard/graphql"; import { productVariantEditPath } from "@dashboard/products/urls"; +import { getLoadableList, mapEdgesToItems } from "@dashboard/utils/maps"; import { TableBody, TableCell, TableFooter } from "@material-ui/core"; import { DeleteIcon, IconButton } from "@saleor/macaw-ui"; import { Skeleton } from "@saleor/macaw-ui-next"; @@ -17,12 +18,12 @@ import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; import { maybe, renderCollection } from "../../../misc"; -import { ListActions, ListProps, RelayToFlat } from "../../../types"; +import { ListActions, ListProps } from "../../../types"; import { messages } from "./messages"; import { useStyles } from "./styles"; export interface SaleVariantsProps extends ListProps, ListActions { - variants: RelayToFlat | null; + discount: SaleDetailsFragment; onVariantAssign: () => void; onVariantUnassign: (id: string) => void; } @@ -30,7 +31,7 @@ export interface SaleVariantsProps extends ListProps, ListActions { const numberOfColumns = 5; const DiscountVariants: React.FC = props => { const { - variants, + discount, disabled, onVariantAssign, onVariantUnassign, @@ -43,6 +44,8 @@ const DiscountVariants: React.FC = props => { const classes = useStyles(props); const intl = useIntl(); + const variants = mapEdgesToItems(discount?.variants); + return ( @@ -91,7 +94,7 @@ const DiscountVariants: React.FC = props => { {renderCollection( - variants, + getLoadableList(discount?.variants), variant => { const isSelected = variant ? isChecked(variant.id) : false; diff --git a/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx b/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx index a9169f63e04..f3df8fbb391 100644 --- a/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx +++ b/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx @@ -24,7 +24,7 @@ import { } from "@dashboard/graphql"; import { SubmitPromise } from "@dashboard/hooks/useForm"; import useNavigator from "@dashboard/hooks/useNavigator"; -import { mapEdgesToItems, mapMetadataItemToInput } from "@dashboard/utils/maps"; +import { mapMetadataItemToInput } from "@dashboard/utils/maps"; import useMetadataChangeTrigger from "@dashboard/utils/metadata/useMetadataChangeTrigger"; import { sprinkles } from "@saleor/macaw-ui-next"; import React from "react"; @@ -249,7 +249,7 @@ const SaleDetailsPage: React.FC = ({ disabled={disabled} onProductAssign={onProductAssign} onProductUnassign={onProductUnassign} - products={mapEdgesToItems(sale?.products)} + discount={sale} isChecked={isChecked} selected={selected} toggle={toggle} @@ -261,7 +261,7 @@ const SaleDetailsPage: React.FC = ({ disabled={disabled} onVariantAssign={onVariantAssign} onVariantUnassign={onVariantUnassign} - variants={mapEdgesToItems(sale?.variants)} + discount={sale} isChecked={isChecked} selected={selected} toggle={toggle} diff --git a/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx b/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx index f2a13c8b462..65684f71730 100644 --- a/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx +++ b/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx @@ -28,7 +28,7 @@ import { import { UseListSettings } from "@dashboard/hooks/useListSettings"; import { LocalPagination } from "@dashboard/hooks/useLocalPaginator"; import useNavigator from "@dashboard/hooks/useNavigator"; -import { mapEdgesToItems, mapMetadataItemToInput } from "@dashboard/utils/maps"; +import { mapMetadataItemToInput } from "@dashboard/utils/maps"; import useMetadataChangeTrigger from "@dashboard/utils/metadata/useMetadataChangeTrigger"; import { Text } from "@saleor/macaw-ui-next"; import React from "react"; @@ -324,7 +324,7 @@ const VoucherDetailsPage: React.FC = ({ disabled={disabled} onProductAssign={onProductAssign} onProductUnassign={onProductUnassign} - products={mapEdgesToItems(voucher?.products)} + discount={voucher} isChecked={isChecked} selected={selected} toggle={toggle} diff --git a/src/utils/maps.ts b/src/utils/maps.ts index ae5c5ae11a1..b987bc9a8ca 100644 --- a/src/utils/maps.ts +++ b/src/utils/maps.ts @@ -127,3 +127,12 @@ export function mapPersonNodeToChoice(nodes: T[]): Option[] { label: getFullName({ firstName, lastName }), })); } + +export function getLoadableList(data: Connection | undefined | null): T[] | undefined { + // "undefined" is a loading state + if (typeof data === "undefined") { + return undefined; + } + + return mapEdgesToItems(data) ?? []; +}