Code tweaks. Removing unnecessary useCallback hook.

Automattic · Feb 2, 2024 · 2e79ab4 · 2e79ab4
1 parent 8e04df2
commit 2e79ab4
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 37 deletions.
diff --git a/projects/packages/my-jetpack/_inc/components/jetpack-manage-banner/index.jsx b/projects/packages/my-jetpack/_inc/components/jetpack-manage-banner/index.jsx
@@ -14,12 +14,13 @@ const JetpackManageBanner = props => {
 	const { isAgencyAccount } = props;
 	const { recordEvent } = useAnalytics();
 
+	// Track banner view.
 	useEffect( () => {
-		recordEvent( 'jetpack_myjetpack_manage_banner_view' );
+		recordEvent( 'jetpack_myjetpack_manage_banner_view', {} );
 	}, [ recordEvent ] );
 
-	// Handle click events
-	const bannerClickHandler = useCallback(
+	// Track click event.
+	const trackClick = useCallback(
 		target => {
 			recordEvent( 'jetpack_myjetpack_manage_banner_click', {
 				target: target,
@@ -29,31 +30,28 @@ const JetpackManageBanner = props => {
 		[ recordEvent ]
 	);
 
-	const learnMoreClick = useCallback( () => {
-		bannerClickHandler( 'jp-manage-learn-more' );
-	}, [ bannerClickHandler ] );
-	const dashboardSitesClick = useCallback( () => {
-		bannerClickHandler( 'jp-manage-dashboard-sites' );
-	}, [ bannerClickHandler ] );
-	const signUpClick = useCallback( () => {
-		bannerClickHandler( 'jp-manage-sign-up' );
-	}, [ bannerClickHandler ] );
+	// Handle CTA banner clicks.
+	const handleLearnMoreClick = useCallback( () => {
+		trackClick( 'jp-manage-learn-more' );
+	}, [ trackClick ] );
+	const handleDashboardSitesClick = useCallback( () => {
+		trackClick( 'jp-manage-dashboard-sites' );
+	}, [ trackClick ] );
+	const handleSignUpClick = useCallback( () => {
+		trackClick( 'jp-manage-sign-up' );
+	}, [ trackClick ] );
 
-	// Set up the secondary CTA
-	const secondaryCtaLabel = __( 'Learn more', 'jetpack-my-jetpack' );
-	const secondaryCtaURL = getRedirectUrl( 'my-jetpack-jetpack-manage-learn-more' );
-
-	// Set up the primary CTA
+	// Set up the primary CTA.
 	let primaryCtaLabel, primaryCtaURL, primaryCtaOnClick;
 
 	if ( isAgencyAccount ) {
 		primaryCtaLabel = __( 'Manage sites', 'jetpack-my-jetpack' );
 		primaryCtaURL = getRedirectUrl( 'my-jetpack-jetpack-manage-dashboard' );
-		primaryCtaOnClick = dashboardSitesClick;
+		primaryCtaOnClick = handleDashboardSitesClick;
 	} else {
 		primaryCtaLabel = __( 'Sign up for free', 'jetpack-my-jetpack' );
 		primaryCtaURL = getRedirectUrl( 'my-jetpack-jetpack-manage-sign-up' );
-		primaryCtaOnClick = signUpClick;
+		primaryCtaOnClick = handleSignUpClick;
 	}
 
 	return (
@@ -64,10 +62,10 @@ const JetpackManageBanner = props => {
 				'Jetpack Manage has the tools you need to manage multiple WordPress sites. Monitor site security, performance, and traffic, and get alerted if a site needs attention. Plus, get bulk discounts.',
 				'jetpack-my-jetpack'
 			) }
-			secondaryCtaLabel={ secondaryCtaLabel }
-			secondaryCtaURL={ secondaryCtaURL }
+			secondaryCtaLabel={ __( 'Learn more', 'jetpack-my-jetpack' ) }
+			secondaryCtaURL={ getRedirectUrl( 'my-jetpack-jetpack-manage-learn-more' ) }
 			secondaryCtaIsExternalLink={ true }
-			secondaryCtaOnClick={ learnMoreClick }
+			secondaryCtaOnClick={ handleLearnMoreClick }
 			primaryCtaLabel={ primaryCtaLabel }
 			primaryCtaURL={ primaryCtaURL }
 			primaryCtaIsExternalLink={ true }

diff --git a/projects/plugins/jetpack/_inc/client/components/jetpack-manage-banner/index.jsx b/projects/plugins/jetpack/_inc/client/components/jetpack-manage-banner/index.jsx
@@ -6,15 +6,16 @@ import React, { useCallback, useEffect } from 'react';
 import jetpackManageIcon from './jetpack-manage.svg';
 
 const JetpackManageBanner = props => {
+	// Track banner view.
 	useEffect( () => {
 		analytics.tracks.recordEvent( 'jetpack_manage_banner_view', {
 			feature: 'manage',
 			page: props.path,
 		} );
 	}, [ props.path ] );
 
-	// Handle click events
-	const trackEvent = useCallback(
+	// Track click event.
+	const trackClick = useCallback(
 		target => {
 			analytics.tracks.recordJetpackClick( {
 				target: target,
@@ -25,23 +26,20 @@ const JetpackManageBanner = props => {
 		[ props.path ]
 	);
 
+	// Handle CTA banner clicks.
 	const handleLearnMoreClick = useCallback( () => {
-		trackEvent( 'jp-manage-learn-more' );
-	}, [ trackEvent ] );
+		trackClick( 'jp-manage-learn-more' );
+	}, [ trackClick ] );
 
 	const handleManageSitesClick = useCallback( () => {
-		trackEvent( 'jp-manage-dashboard-sites' );
-	}, [ trackEvent ] );
+		trackClick( 'jp-manage-dashboard-sites' );
+	}, [ trackClick ] );
 
 	const handleSignUpForFreeClick = useCallback( () => {
-		trackEvent( 'jp-manage-sign-up' );
-	}, [ trackEvent ] );
+		trackClick( 'jp-manage-sign-up' );
+	}, [ trackClick ] );
 
-	// Set up the secondary CTA
-	const ctaLearnMoreLabel = __( 'Learn more', 'jetpack' );
-	const ctaLearnMoreUrl = getRedirectUrl( 'jetpack-at-a-glance-to-jetpack-manage-learn-more' );
-
-	// Set up the primary CTA
+	// Set up the primary CTA.
 	let primaryCtaLabel, primaryCtaURL, primaryCtaOnClick;
 
 	if ( props.isAgencyAccount ) {
@@ -62,8 +60,8 @@ const JetpackManageBanner = props => {
 				'Jetpack Manage has the tools you need to manage multiple WordPress sites. Monitor site security, performance, and traffic, and get alerted if a site needs attention. Plus, get bulk discounts.',
 				'jetpack'
 			) }
-			secondaryCtaLabel={ ctaLearnMoreLabel }
-			secondaryCtaURL={ ctaLearnMoreUrl }
+			secondaryCtaLabel={ __( 'Learn more', 'jetpack' ) }
+			secondaryCtaURL={ getRedirectUrl( 'jetpack-at-a-glance-to-jetpack-manage-learn-more' ) }
 			secondaryCtaIsExternalLink={ true }
 			secondaryCtaOnClick={ handleLearnMoreClick }
 			primaryCtaLabel={ primaryCtaLabel }