Me: Use Redux analytics instead of eventRecorder in Security2faSetupB…

…ackupCodes (Automattic#20198)

* Me: Use Redux analytics in Security2faSetupBackupCodes

* Me: Remove unnecessary debug code in Security2faSetupBackupCodes

* Me: Refactor Security2faSetupBackupCodes to a React.Component

* Me: Sort some imports in Security2faSetupBackupCodes

* Me: Replace var usages in Security2faSetupBackupCodes

client/me/security-2fa-setup-backup-codes/index.jsx

@@ -3,50 +3,40 @@
 /**
  * External dependencies
  */
-
+import React from 'react';
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 import { localize } from 'i18n-calypso';
-import React from 'react';
-import createReactClass from 'create-react-class';
-import debugFactory from 'debug';
-const debug = debugFactory( 'calypso:me:security:2fa-setup-backup-codes' );
 
 /**
  * Internal dependencies
  */
+import Notice from 'components/notice';
 import Security2faBackupCodesList from 'me/security-2fa-backup-codes-list';
 import Security2faProgress from 'me/security-2fa-progress';
-import twoStepAuthorization from 'lib/two-step-authorization';
-import eventRecorder from 'me/event-recorder';
 import support from 'lib/url/support';
-import Notice from 'components/notice';
-
-const Security2faSetupBackupCodes = createReactClass( {
-	displayName: 'Security2faSetupBackupCodes',
+import twoStepAuthorization from 'lib/two-step-authorization';
+import { recordGoogleEvent } from 'state/analytics/actions';
 
-	mixins: [ eventRecorder ],
+class Security2faSetupBackupCodes extends React.Component {
+	state = {
+		backupCodes: [],
+		lastError: false,
+	};
 
-	propTypes: {
+	static propTypes = {
 		onFinished: PropTypes.func.isRequired,
-	},
+	};
 
-	componentDidMount: function() {
-		debug( this.constructor.displayName + ' React component is mounted.' );
+	componentDidMount() {
 		twoStepAuthorization.backupCodes( this.onRequestComplete );
-	},
-
-	componentWillUnmount: function() {
-		debug( this.constructor.displayName + ' React component will unmount.' );
-	},
+	}
 
-	getInitialState: function() {
-		return {
-			backupCodes: [],
-			lastError: false,
-		};
-	},
+	getClickHandler = action => {
+		return () => this.props.recordGoogleEvent( 'Me', 'Clicked on ' + action );
+	};
 
-	onRequestComplete: function( error, data ) {
+	onRequestComplete = ( error, data ) => {
 		if ( error ) {
 			this.setState( {
 				lastError: this.props.translate(
@@ -59,36 +49,35 @@ const Security2faSetupBackupCodes = createReactClass( {
 		this.setState( {
 			backupCodes: data.codes,
 		} );
-	},
+	};
 
-	onFinished: function() {
+	onFinished = () => {
 		this.props.onFinished();
-	},
+	};
 
-	possiblyRenderError: function() {
-		var errorMessage;
+	possiblyRenderError() {
 		if ( ! this.state.lastError ) {
 			return;
 		}
 
-		errorMessage = this.props.translate(
+		const errorMessage = this.props.translate(
 			'There was an error retrieving back up codes. Please {{supportLink}}contact support{{/supportLink}}',
 			{
 				components: {
 					supportLink: (
 						<a
 							href={ support.CALYPSO_CONTACT }
-							onClick={ this.recordClickEvent( 'No Backup Codes Contact Support Link' ) }
+							onClick={ this.getClickHandler( 'No Backup Codes Contact Support Link' ) }
 						/>
 					),
 				},
 			}
 		);
 
 		return <Notice showDismiss={ false } status="is-error" text={ errorMessage } />;
-	},
+	}
 
-	renderList: function() {
+	renderList() {
 		if ( this.state.lastError ) {
 			return null;
 		}
@@ -100,9 +89,9 @@ const Security2faSetupBackupCodes = createReactClass( {
 				showList
 			/>
 		);
-	},
+	}
 
-	render: function() {
+	render() {
 		return (
 			<div>
 				<Security2faProgress step={ 3 } />
@@ -118,7 +107,9 @@ const Security2faSetupBackupCodes = createReactClass( {
 				{ this.renderList() }
 			</div>
 		);
-	},
-} );
+	}
+}
 
-export default localize( Security2faSetupBackupCodes );
+export default connect( null, {
+	recordGoogleEvent,
+} )( localize( Security2faSetupBackupCodes ) );