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

Refactor Gift Card List Top Alert (#1388)

Browse source
This commit is contained in:
Dawid Tarasiuk 2021-09-22 09:45:24 +03:00 committed by GitHub
parent c566539cc1
commit eaed88a23a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 62 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeader.tsx
View file

@ -5,18 +5,13 @@ import CardMenu, { CardMenuItem } from "@saleor/components/CardMenu";
import PageHeader from "@saleor/components/PageHeader"; import PageHeader from "@saleor/components/PageHeader";
import useNavigator from "@saleor/hooks/useNavigator"; import useNavigator from "@saleor/hooks/useNavigator";
import { sectionNames } from "@saleor/intl"; import { sectionNames } from "@saleor/intl";
import { Alert } from "@saleor/macaw-ui";
import { productAddUrl } from "@saleor/products/urls";
import { productTypeAddUrl } from "@saleor/productTypes/urls";
import { ProductTypeKindEnum } from "@saleor/types/globalTypes";
import React from "react"; import React from "react";
import { useIntl } from "react-intl"; import { useIntl } from "react-intl";
import { giftCardSettingsUrl } from "../../urls"; import { giftCardSettingsUrl } from "../../urls";
import { giftCardsListHeaderMenuItemsMessages as messages } from "../messages"; import { giftCardsListHeaderMenuItemsMessages as messages } from "../messages";
import useGiftCardListDialogs from "../providers/GiftCardListDialogsProvider/hooks/useGiftCardListDialogs"; import useGiftCardListDialogs from "../providers/GiftCardListDialogsProvider/hooks/useGiftCardListDialogs";
import { useGiftCardProductsCountQuery } from "../queries"; import GiftCardsListHeaderAlert from "./GiftCardsListHeaderAlert";
import GiftCardsListHeaderAlertContent from "./GiftCardsListHeaderAlertContent";
const GiftCardsListHeader: React.FC = () => { const GiftCardsListHeader: React.FC = () => {
const intl = useIntl(); const intl = useIntl();
@ -24,11 +19,6 @@ const GiftCardsListHeader: React.FC = () => {
const { openCreateDialog } = useGiftCardListDialogs(); const { openCreateDialog } = useGiftCardListDialogs();
const {
data: giftCardProductsCount,
loading: giftCardProductsCountLoading
} = useGiftCardProductsCountQuery();
const openSettings = () => navigate(giftCardSettingsUrl); const openSettings = () => navigate(giftCardSettingsUrl);
const menuItems: CardMenuItem[] = [ const menuItems: CardMenuItem[] = [
@ -49,24 +39,6 @@ const GiftCardsListHeader: React.FC = () => {
// } // }
]; ];
const giftCardProductTypesExist =
giftCardProductsCount?.giftCardProductTypes.totalCount > 0;
const giftCardProductsExist =
giftCardProductsCount?.giftCardProducts.totalCount > 0;
const showNoGiftCardProductsAlert =
!giftCardProductsCountLoading &&
(!giftCardProductTypesExist || !giftCardProductsExist);
const handleCreateGiftCardProductType = () =>
navigate(
productTypeAddUrl({
kind: ProductTypeKindEnum.GIFT_CARD
})
);
const handleCreateGiftCardProduct = () => navigate(productAddUrl());
return ( return (
<> <>
<PageHeader title={intl.formatMessage(sectionNames.giftCards)}> <PageHeader title={intl.formatMessage(sectionNames.giftCards)}>
@ -81,20 +53,7 @@ const GiftCardsListHeader: React.FC = () => {
{intl.formatMessage(messages.issueButtonLabel)} {intl.formatMessage(messages.issueButtonLabel)}
</Button> </Button>
</PageHeader> </PageHeader>
{showNoGiftCardProductsAlert && ( <GiftCardsListHeaderAlert />
<Alert
title={intl.formatMessage(messages.noGiftCardsAlertTitle)}
variant="warning"
close={false}
>
<GiftCardsListHeaderAlertContent
giftCardProductTypesExist={giftCardProductTypesExist}
giftCardProductsExist={giftCardProductsExist}
handleCreateGiftCardProductType={handleCreateGiftCardProductType}
handleCreateGiftCardProduct={handleCreateGiftCardProduct}
/>
</Alert>
)}
<VerticalSpacer spacing={2} /> <VerticalSpacer spacing={2} />
</> </>
); );

60
src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeaderAlert.tsx Normal file
View file

@ -0,0 +1,60 @@
import useNavigator from "@saleor/hooks/useNavigator";
import { Alert } from "@saleor/macaw-ui";
import { productAddUrl } from "@saleor/products/urls";
import { productTypeAddUrl } from "@saleor/productTypes/urls";
import { ProductTypeKindEnum } from "@saleor/types/globalTypes";
import React from "react";
import { useIntl } from "react-intl";
import { giftCardsListHeaderMenuItemsMessages as messages } from "../messages";
import { useGiftCardProductsCountQuery } from "../queries";
import GiftCardsListHeaderAlertContent from "./GiftCardsListHeaderAlertContent";
const GiftCardsListHeaderAlert: React.FC = () => {
const intl = useIntl();
const navigate = useNavigator();
const {
data: giftCardProductsCount,
loading: giftCardProductsCountLoading
} = useGiftCardProductsCountQuery();
const giftCardProductTypesExist =
giftCardProductsCount?.giftCardProductTypes.totalCount > 0;
const giftCardProductsExist =
giftCardProductsCount?.giftCardProducts.totalCount > 0;
const showNoGiftCardProductsAlert =
!giftCardProductsCountLoading &&
(!giftCardProductTypesExist || !giftCardProductsExist);
const handleCreateGiftCardProductType = () =>
navigate(
productTypeAddUrl({
kind: ProductTypeKindEnum.GIFT_CARD
})
);
const handleCreateGiftCardProduct = () => navigate(productAddUrl());
if (showNoGiftCardProductsAlert) {
return (
<Alert
title={intl.formatMessage(messages.noGiftCardsAlertTitle)}
variant="warning"
close={false}
>
<GiftCardsListHeaderAlertContent
giftCardProductTypesExist={giftCardProductTypesExist}
giftCardProductsExist={giftCardProductsExist}
handleCreateGiftCardProductType={handleCreateGiftCardProductType}
handleCreateGiftCardProduct={handleCreateGiftCardProduct}
/>
</Alert>
);
}
return null;
};
export default GiftCardsListHeaderAlert;