Code refactor: Simplify boolean expression before `&&` in Marketing page (#37452)

This commit is contained in:
Gan Eng Chin 2023-03-29 21:15:01 +08:00 committed by GitHub
commit 5094cc6742
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 43 additions and 26 deletions

View File

@ -47,6 +47,9 @@ export const CreateNewCampaignModal = ( props: CreateCampaignModalProps ) => {
const { loadInstalledPluginsAfterActivation } =
useInstalledPluginsWithoutChannels();
const hasCampaignTypes = !! campaignTypes?.length;
const hasRecommendedChannels = !! recommendedChannels?.length;
const onInstalledAndActivated = ( pluginSlug: string ) => {
refetchCampaignTypes();
refetchRegisteredChannels();
@ -64,7 +67,7 @@ export const CreateNewCampaignModal = ( props: CreateCampaignModalProps ) => {
>
<div className="woocommerce-marketing-new-campaigns">
<div className="woocommerce-marketing-new-campaigns__question-label">
{ !! campaignTypes?.length
{ hasCampaignTypes
? __(
'Where would you like to promote your products?',
'woocommerce'
@ -109,7 +112,7 @@ export const CreateNewCampaignModal = ( props: CreateCampaignModalProps ) => {
<FlexItem>
{ __( 'Create', 'woocommerce' ) }
</FlexItem>
{ !! isExternalURL( el.createUrl ) && (
{ isExternalURL( el.createUrl ) && (
<FlexItem>
<Icon
icon={ external }
@ -123,7 +126,7 @@ export const CreateNewCampaignModal = ( props: CreateCampaignModalProps ) => {
</Flex>
) ) }
</div>
{ !! recommendedChannels?.length && (
{ hasRecommendedChannels && (
<div className="woocommerce-marketing-add-channels">
<Flex direction="column">
<FlexItem>

View File

@ -16,13 +16,14 @@ import '../data';
const CouponsOverview = () => {
const { currentUserCan } = useUser();
const shouldShowExtensions =
const showExtensions = !! (
getAdminSetting( 'allowMarketplaceSuggestions', false ) &&
currentUserCan( 'install_plugins' );
currentUserCan( 'install_plugins' )
);
return (
<div className="woocommerce-marketing-coupons">
{ !! shouldShowExtensions && (
{ showExtensions && (
<RecommendedExtensions
title={ __(
'Recommended coupon extensions',

View File

@ -158,6 +158,8 @@ export const Campaigns = () => {
);
};
const showFooter = !! ( total && total > perPage );
return (
<Card className="woocommerce-marketing-campaigns-card">
<CardHeader>
@ -170,14 +172,14 @@ export const Campaigns = () => {
>
{ __( 'Create new campaign', 'woocommerce' ) }
</Button>
{ !! isModalOpen && (
{ isModalOpen && (
<CreateNewCampaignModal
onRequestClose={ () => setModalOpen( false ) }
/>
) }
</CardHeader>
{ getContent() }
{ !! ( total && total > perPage ) && (
{ showFooter && (
<CardFooter className="woocommerce-marketing-campaigns-card__footer">
<Pagination
showPerPagePicker={ false }

View File

@ -103,7 +103,7 @@ export const Channels = forwardRef< ChannelsRef, ChannelsProps >(
{ /* Recommended channels section. */ }
{ recommendedChannels.length >= 1 && (
<div>
{ !! hasRegisteredChannels && (
{ hasRegisteredChannels && (
<>
<CardDivider />
<CardBody>
@ -127,7 +127,7 @@ export const Channels = forwardRef< ChannelsRef, ChannelsProps >(
</CardBody>
</>
) }
{ !! expanded &&
{ expanded &&
recommendedChannels.map( ( el, idx ) => (
<Fragment key={ el.plugin }>
<SmartPluginCardBody

View File

@ -47,8 +47,9 @@ export const IntroductionBanner = ( {
* and clicking on the "Add channels" button in this introduction banner
* will scroll to the button in Channels card.
*/
const showAddChannelsButton =
!! dataRegistered?.length && !! dataRecommended?.length;
const showAddChannelsButton = !! (
dataRegistered?.length && dataRecommended?.length
);
return (
<Card className="woocommerce-marketing-introduction-banner">

View File

@ -61,14 +61,21 @@ export const MarketingOverviewMultichannel: React.FC = () => {
return <CenteredSpinner />;
}
const shouldShowCampaigns = !! (
const showCampaigns = !! (
dataRegistered?.length &&
( isIntroductionBannerDismissed || metaCampaigns?.total )
);
const shouldShowExtensions =
const showChannels = !! (
dataRegistered &&
dataRecommended &&
( dataRegistered.length || dataRecommended.length )
);
const showExtensions = !! (
getAdminSetting( 'allowMarketplaceSuggestions', false ) &&
currentUserCan( 'install_plugins' );
currentUserCan( 'install_plugins' )
);
const onInstalledAndActivated = ( pluginSlug: string ) => {
refetchCampaignTypes();
@ -86,18 +93,17 @@ export const MarketingOverviewMultichannel: React.FC = () => {
} }
/>
) }
{ shouldShowCampaigns && <Campaigns /> }
{ !! ( dataRegistered && dataRecommended ) &&
!! ( dataRegistered.length || dataRecommended.length ) && (
<Channels
ref={ channelsRef }
registeredChannels={ dataRegistered }
recommendedChannels={ dataRecommended }
onInstalledAndActivated={ onInstalledAndActivated }
/>
) }
{ showCampaigns && <Campaigns /> }
{ showChannels && (
<Channels
ref={ channelsRef }
registeredChannels={ dataRegistered }
recommendedChannels={ dataRecommended }
onInstalledAndActivated={ onInstalledAndActivated }
/>
) }
<InstalledExtensions />
{ !! shouldShowExtensions && <DiscoverTools /> }
{ showExtensions && <DiscoverTools /> }
<LearnMarketing />
</div>
);

View File

@ -0,0 +1,4 @@
Significance: minor
Type: dev
Simplify boolean expression before && in Marketing page.