From f492dae5a261447d23b67993943b6e32700e5f95 Mon Sep 17 00:00:00 2001
From: Tiago Noronha <hello@tiagonoronha.com>
Date: Wed, 20 Feb 2019 16:18:10 +0000
Subject: [PATCH] Simplify name of consts

---
 .../client/layout/store-alerts/index.js       | 127 +++++++++---------
 1 file changed, 63 insertions(+), 64 deletions(-)

diff --git a/plugins/woocommerce-admin/client/layout/store-alerts/index.js b/plugins/woocommerce-admin/client/layout/store-alerts/index.js
index ded28fffb9f..e9c5f13b061 100644
--- a/plugins/woocommerce-admin/client/layout/store-alerts/index.js
+++ b/plugins/woocommerce-admin/client/layout/store-alerts/index.js
@@ -67,96 +67,95 @@ class StoreAlerts extends Component {
 		const { alerts } = this.props;
 
 		this.state = {
-			currentAlert: alerts ? 0 : null,
+			currentIndex: alerts ? 0 : null,
 		};
 
 		this.previousAlert = this.previousAlert.bind( this );
 		this.nextAlert = this.nextAlert.bind( this );
-		this.totalAlerts = this.totalAlerts.bind( this );
-	}
-
-	totalAlerts() {
-		const { alerts } = this.props;
-		return alerts.length;
 	}
 
 	previousAlert( event ) {
 		event.stopPropagation();
-		const { currentAlert } = this.state;
+		const { currentIndex } = this.state;
 
-		if ( currentAlert > 0 ) {
+		if ( currentIndex > 0 ) {
 			this.setState( {
-				currentAlert: currentAlert - 1,
+				currentIndex: currentIndex - 1,
 			} );
 		}
 	}
 
 	nextAlert( event ) {
 		event.stopPropagation();
-		const { currentAlert } = this.state;
+		const { alerts } = this.props;
+		const { currentIndex } = this.state;
 
-		if ( currentAlert < this.totalAlerts() - 1 ) {
+		if ( currentIndex < alerts.length - 1 ) {
 			this.setState( {
-				currentAlert: currentAlert + 1,
+				currentIndex: currentIndex + 1,
 			} );
 		}
 	}
 
 	render() {
 		const { alerts } = this.props;
-		const { currentAlert } = this.state;
-		const alert = alerts[ currentAlert ] ? alerts[ currentAlert ] : null;
-		const type = alertTypes[ alert.type ] ? alertTypes[ alert.type ] : null;
-		const className = classnames( 'woocommerce-store-alerts', {
-			'is-alert-emergency': type && 'emergency' === alert.type,
-			'is-alert-alert': type && 'alert' === alert.type,
-			'is-alert-critical': type && 'critical' === alert.type,
-		} );
+		const { currentIndex } = this.state;
+		const numberOfAlerts = alerts.length;
+		const alert = alerts[ currentIndex ] ? alerts[ currentIndex ] : null;
+		const type = alert && alert.type ? alert.type : null;
+		const icon = type && alertTypes[ type ] ? alertTypes[ type ].icon : null;
 
+		const className = classnames( 'woocommerce-store-alerts', {
+			'is-alert-emergency': 'emergency' === type,
+			'is-alert-alert': 'alert' === type,
+			'is-alert-critical': 'critical' === type,
+		} );
 		return (
-			<Card
-				title={ [
-					type && <Dashicon key="icon" icon={ type.icon } />,
-					<Fragment key="title">{ alert.title }</Fragment>,
-				] }
-				className={ className }
-				action={
-					this.totalAlerts() > 1 && (
-						<div className="woocommerce-store-alerts__pagination">
-							<IconButton
-								icon="arrow-left-alt2"
-								onClick={ this.previousAlert }
-								disabled={ 0 === currentAlert }
-								label={ __( 'Previous Alert', 'wc-admin' ) }
-							/>
-							<span
-								className="woocommerce-store-alerts__pagination-label"
-								role="status"
-								aria-live="polite"
-							>
-								{ interpolateComponents( {
-									mixedString: __( '{{current /}} of {{total /}}', 'wc-admin' ),
-									components: {
-										current: <Fragment>{ currentAlert + 1 }</Fragment>,
-										total: <Fragment>{ this.totalAlerts() }</Fragment>,
-									},
-								} ) }
-							</span>
-							<IconButton
-								icon="arrow-right-alt2"
-								onClick={ this.nextAlert }
-								disabled={ this.totalAlerts() - 1 === currentAlert }
-								label={ __( 'Next Alert', 'wc-admin' ) }
-							/>
-						</div>
-					)
-				}
-			>
-				<div className="woocommerce-store-alerts__message">{ alert.message }</div>
-				<Button isPrimary className="woocommerce-store-alerts__button" href={ alert.action.url }>
-					{ alert.action.label }
-				</Button>
-			</Card>
+			numberOfAlerts > 0 && (
+				<Card
+					title={ [
+						icon && <Dashicon key="icon" icon={ icon } />,
+						<Fragment key="title">{ alert.title }</Fragment>,
+					] }
+					className={ className }
+					action={
+						numberOfAlerts > 1 && (
+							<div className="woocommerce-store-alerts__pagination">
+								<IconButton
+									icon="arrow-left-alt2"
+									onClick={ this.previousAlert }
+									disabled={ 0 === currentIndex }
+									label={ __( 'Previous Alert', 'wc-admin' ) }
+								/>
+								<span
+									className="woocommerce-store-alerts__pagination-label"
+									role="status"
+									aria-live="polite"
+								>
+									{ interpolateComponents( {
+										mixedString: __( '{{current /}} of {{total /}}', 'wc-admin' ),
+										components: {
+											current: <Fragment>{ currentIndex + 1 }</Fragment>,
+											total: <Fragment>{ numberOfAlerts }</Fragment>,
+										},
+									} ) }
+								</span>
+								<IconButton
+									icon="arrow-right-alt2"
+									onClick={ this.nextAlert }
+									disabled={ numberOfAlerts - 1 === currentIndex }
+									label={ __( 'Next Alert', 'wc-admin' ) }
+								/>
+							</div>
+						)
+					}
+				>
+					<div className="woocommerce-store-alerts__message">{ alert.message }</div>
+					<Button isPrimary className="woocommerce-store-alerts__button" href={ alert.action.url }>
+						{ alert.action.label }
+					</Button>
+				</Card>
+			)
 		);
 	}
 }