EditCardDetails: Refactor to a functional component (#35237)

client/me/purchases/payment/edit-card-details/index.jsx

@@ -5,7 +5,7 @@
  */
 import page from 'page';
 import PropTypes from 'prop-types';
-import React, { Component, Fragment } from 'react';
+import React, { Fragment } from 'react';
 import { connect } from 'react-redux';
 
 /**
@@ -26,105 +26,84 @@ import { getByPurchaseId, hasLoadedUserPurchasesFromServer } from 'state/purchas
 import { getCurrentUserId } from 'state/current-user/selectors';
 import { getSelectedSite } from 'state/ui/selectors';
 import { getStoredCardById, hasLoadedStoredCardsFromServer } from 'state/stored-cards/selectors';
-import { isDataLoading } from 'me/purchases/utils';
 import { isRequestingSites } from 'state/sites/selectors';
 import { managePurchase, purchasesRoot } from 'me/purchases/paths';
 import { recordTracksEvent } from 'state/analytics/actions';
 
-class EditCardDetails extends Component {
-	static propTypes = {
-		card: PropTypes.object,
-		clearPurchases: PropTypes.func.isRequired,
-		hasLoadedSites: PropTypes.bool.isRequired,
-		hasLoadedStoredCardsFromServer: PropTypes.bool.isRequired,
-		hasLoadedUserPurchasesFromServer: PropTypes.bool.isRequired,
-		purchaseId: PropTypes.number.isRequired,
-		purchase: PropTypes.object,
-		selectedSite: PropTypes.object,
-		siteSlug: PropTypes.string.isRequired,
-		userId: PropTypes.number,
-	};
-
-	createCardToken = ( ...args ) => createCardToken( 'card_update', ...args );
-
-	redirectIfDataIsInvalid( props = this.props ) {
-		if ( isDataLoading( props ) ) {
-			return true;
-		}
+function EditCardDetails( props ) {
+	const isDataLoading = ! props.hasLoadedSites || ! props.hasLoadedUserPurchasesFromServer;
+	const isDataValid = ( { purchase, selectedSite } ) => purchase && selectedSite;
 
-		if ( ! this.isDataValid( props ) ) {
-			page( purchasesRoot );
-		}
+	if ( ! isDataLoading && ! isDataValid( props ) ) {
+		// Redirect if invalid data
+		page( purchasesRoot );
 	}
 
-	isDataValid( props = this.props ) {
-		const { purchase, selectedSite } = props;
+	if ( isDataLoading || ! props.hasLoadedStoredCardsFromServer ) {
+		return (
+			<Fragment>
+				<QueryStoredCards />
+
+				<QueryUserPurchases userId={ props.userId } />
 
-		return purchase && selectedSite;
+				<CreditCardFormLoadingPlaceholder title={ titles.editCardDetails } />
+			</Fragment>
+		);
 	}
 
-	recordFormSubmitEvent = () =>
-		void this.props.recordTracksEvent( 'calypso_purchases_credit_card_form_submit', {
-			product_slug: this.props.purchase.productSlug,
+	const recordFormSubmitEvent = () =>
+		void props.recordTracksEvent( 'calypso_purchases_credit_card_form_submit', {
+			product_slug: props.purchase.productSlug,
 		} );
 
-	successCallback = () => {
-		const { id } = this.props.purchase;
-
-		this.props.clearPurchases();
-
-		page( managePurchase( this.props.siteSlug, id ) );
+	const successCallback = () => {
+		const { id } = props.purchase;
+		props.clearPurchases();
+		page( managePurchase( props.siteSlug, id ) );
 	};
 
-	componentWillMount() {
-		this.redirectIfDataIsInvalid();
-	}
-
-	componentWillReceiveProps( nextProps ) {
-		this.redirectIfDataIsInvalid( nextProps );
-	}
-
-	render() {
-		if ( isDataLoading( this.props ) || ! this.props.hasLoadedStoredCardsFromServer ) {
-			return (
-				<Fragment>
-					<QueryStoredCards />
-
-					<QueryUserPurchases userId={ this.props.userId } />
-
-					<CreditCardFormLoadingPlaceholder title={ titles.editCardDetails } />
-				</Fragment>
-			);
-		}
-
-		return (
-			<Main>
-				<TrackPurchasePageView
-					eventName="calypso_edit_card_details_purchase_view"
-					purchaseId={ this.props.purchaseId }
-				/>
-				<PageViewTracker
-					path="/me/purchases/:site/:purchaseId/payment/edit/:cardId"
-					title="Purchases > Edit Card Details"
-				/>
-				<HeaderCake backHref={ managePurchase( this.props.siteSlug, this.props.purchaseId ) }>
-					{ titles.editCardDetails }
-				</HeaderCake>
-
-				<CreditCardForm
-					apiParams={ { purchaseId: this.props.purchase.id } }
-					createCardToken={ this.createCardToken }
-					initialValues={ this.props.card }
-					purchase={ this.props.purchase }
-					recordFormSubmitEvent={ this.recordFormSubmitEvent }
-					siteSlug={ this.props.siteSlug }
-					successCallback={ this.successCallback }
-				/>
-			</Main>
-		);
-	}
+	const createCardUpdateToken = ( ...args ) => createCardToken( 'card_update', ...args );
+
+	return (
+		<Main>
+			<TrackPurchasePageView
+				eventName="calypso_edit_card_details_purchase_view"
+				purchaseId={ props.purchaseId }
+			/>
+			<PageViewTracker
+				path="/me/purchases/:site/:purchaseId/payment/edit/:cardId"
+				title="Purchases > Edit Card Details"
+			/>
+			<HeaderCake backHref={ managePurchase( props.siteSlug, props.purchaseId ) }>
+				{ titles.editCardDetails }
+			</HeaderCake>
+
+			<CreditCardForm
+				apiParams={ { purchaseId: props.purchase.id } }
+				createCardToken={ createCardUpdateToken }
+				initialValues={ props.card }
+				purchase={ props.purchase }
+				recordFormSubmitEvent={ recordFormSubmitEvent }
+				siteSlug={ props.siteSlug }
+				successCallback={ successCallback }
+			/>
+		</Main>
+	);
 }
 
+EditCardDetails.propTypes = {
+	card: PropTypes.object,
+	clearPurchases: PropTypes.func.isRequired,
+	hasLoadedSites: PropTypes.bool.isRequired,
+	hasLoadedStoredCardsFromServer: PropTypes.bool.isRequired,
+	hasLoadedUserPurchasesFromServer: PropTypes.bool.isRequired,
+	purchaseId: PropTypes.number.isRequired,
+	purchase: PropTypes.object,
+	selectedSite: PropTypes.object,
+	siteSlug: PropTypes.string.isRequired,
+	userId: PropTypes.number,
+};
+
 const mapStateToProps = ( state, { cardId, purchaseId } ) => ( {
 	card: getStoredCardById( state, cardId ),
 	hasLoadedSites: ! isRequestingSites( state ),