Return immediately if no alerts found

This commit is contained in:
Tiago Noronha 2019-03-04 13:52:20 +00:00
parent 416d41279f
commit f8e97b8152
1 changed files with 49 additions and 46 deletions

View File

@ -61,6 +61,11 @@ class StoreAlerts extends Component {
render() { render() {
const { alerts } = this.props; const { alerts } = this.props;
if ( ! alerts || alerts.length === 0 ) {
return null;
}
const { currentIndex } = this.state; const { currentIndex } = this.state;
const numberOfAlerts = alerts.length; const numberOfAlerts = alerts.length;
const alert = alerts[ currentIndex ] ? alerts[ currentIndex ] : null; const alert = alerts[ currentIndex ] ? alerts[ currentIndex ] : null;
@ -78,52 +83,50 @@ class StoreAlerts extends Component {
) ); ) );
return ( return (
numberOfAlerts > 0 && ( <Card
<Card title={ [
title={ [ alert.icon && <Dashicon key="icon" icon={ alert.icon } />,
alert.icon && <Dashicon key="icon" icon={ alert.icon } />, <Fragment key="title">{ alert.title }</Fragment>,
<Fragment key="title">{ alert.title }</Fragment>, ] }
] } className={ className }
className={ className } action={
action={ numberOfAlerts > 1 && (
numberOfAlerts > 1 && ( <div className="woocommerce-store-alerts__pagination">
<div className="woocommerce-store-alerts__pagination"> <IconButton
<IconButton icon="arrow-left-alt2"
icon="arrow-left-alt2" onClick={ this.previousAlert }
onClick={ this.previousAlert } disabled={ 0 === currentIndex }
disabled={ 0 === currentIndex } label={ __( 'Previous Alert', 'wc-admin' ) }
label={ __( 'Previous Alert', 'wc-admin' ) } />
/> <span
<span className="woocommerce-store-alerts__pagination-label"
className="woocommerce-store-alerts__pagination-label" role="status"
role="status" aria-live="polite"
aria-live="polite" >
> { interpolateComponents( {
{ interpolateComponents( { mixedString: __( '{{current /}} of {{total /}}', 'wc-admin' ),
mixedString: __( '{{current /}} of {{total /}}', 'wc-admin' ), components: {
components: { current: <Fragment>{ currentIndex + 1 }</Fragment>,
current: <Fragment>{ currentIndex + 1 }</Fragment>, total: <Fragment>{ numberOfAlerts }</Fragment>,
total: <Fragment>{ numberOfAlerts }</Fragment>, },
}, } ) }
} ) } </span>
</span> <IconButton
<IconButton icon="arrow-right-alt2"
icon="arrow-right-alt2" onClick={ this.nextAlert }
onClick={ this.nextAlert } disabled={ numberOfAlerts - 1 === currentIndex }
disabled={ numberOfAlerts - 1 === currentIndex } label={ __( 'Next Alert', 'wc-admin' ) }
label={ __( 'Next Alert', 'wc-admin' ) } />
/> </div>
</div> )
) }
} >
> <div
<div className="woocommerce-store-alerts__message"
className="woocommerce-store-alerts__message" dangerouslySetInnerHTML={ sanitizeHTML( alert.content ) }
dangerouslySetInnerHTML={ sanitizeHTML( alert.content ) } />
/> { actions && <div className="woocommerce-store-alerts__actions">{ actions }</div> }
{ actions && <div className="woocommerce-store-alerts__actions">{ actions }</div> } </Card>
</Card>
)
); );
} }
} }