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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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