Resolve eslint errors for the `@typescript-eslint/no-use-before-defin…

…e` rule.

js/src/components/tree-select-control/index.js

@@ -380,26 +380,6 @@ const TreeSelectControl = ( {
 		);
 	};
 
-	/**
-	 * Handles a change on the Tree options. Could be a click on a parent option
-	 * or a child option
-	 *
-	 * @param {boolean} checked Indicates if the item should be checked
-	 * @param {InnerOption} option The option to change
-	 */
-	const handleOptionsChange = ( checked, option ) => {
-		if ( option.hasChildren ) {
-			handleParentChange( checked, option );
-		} else {
-			handleSingleChange( checked, option );
-		}
-
-		setInputControlValue( '' );
-		if ( ! nodesExpanded.includes( option.parent ) ) {
-			controlRef.current.focus();
-		}
-	};
-
 	/**
 	 * Handles a change of a child element.
 	 *
@@ -438,6 +418,26 @@ const TreeSelectControl = ( {
 		onChange( newValue );
 	};
 
+	/**
+	 * Handles a change on the Tree options. Could be a click on a parent option
+	 * or a child option
+	 *
+	 * @param {boolean} checked Indicates if the item should be checked
+	 * @param {InnerOption} option The option to change
+	 */
+	const handleOptionsChange = ( checked, option ) => {
+		if ( option.hasChildren ) {
+			handleParentChange( checked, option );
+		} else {
+			handleSingleChange( checked, option );
+		}
+
+		setInputControlValue( '' );
+		if ( ! nodesExpanded.includes( option.parent ) ) {
+			controlRef.current.focus();
+		}
+	};
+
 	/**
 	 * Handles a change of a Tag element. We map them to Value format.
 	 *

js/src/data/actions.js

@@ -534,6 +534,13 @@ export function* disconnectAllAccounts() {
 	}
 }
 
+export function receiveGoogleAdsAccountBillingStatus( billingStatus ) {
+	return {
+		type: TYPES.RECEIVE_ACCOUNTS_GOOGLE_ADS_BILLING_STATUS,
+		billingStatus,
+	};
+}
+
 export function* fetchGoogleAdsAccountBillingStatus() {
 	try {
 		const response = yield apiFetch( {
@@ -763,13 +770,6 @@ export function receiveAdsAccount( account ) {
 	};
 }
 
-export function receiveGoogleAdsAccountBillingStatus( billingStatus ) {
-	return {
-		type: TYPES.RECEIVE_ACCOUNTS_GOOGLE_ADS_BILLING_STATUS,
-		billingStatus,
-	};
-}
-
 /**
  * Save the target audience countries.
  *
@@ -945,6 +945,13 @@ export function receiveReport( reportKey, data ) {
 	};
 }
 
+export function* receiveMCSetup( mcSetup ) {
+	return {
+		type: TYPES.RECEIVE_MC_SETUP,
+		mcSetup,
+	};
+}
+
 export function* fetchMCSetup() {
 	try {
 		const response = yield apiFetch( {
@@ -963,13 +970,6 @@ export function* fetchMCSetup() {
 	}
 }
 
-export function* receiveMCSetup( mcSetup ) {
-	return {
-		type: TYPES.RECEIVE_MC_SETUP,
-		mcSetup,
-	};
-}
-
 /**
  * Creates a wp-data action with data payload to be dispatched the received
  * MC product statistics to wp-data store.

js/src/data/utils.js

@@ -100,31 +100,24 @@ export function getReportKey( category, type, reportQuery ) {
 }
 
 /**
- * Calculate performance data by each metric.
+ * Calculate delta.
  *
- * @param {ReportFieldsSchema} primary The primary report fields fetched from report API.
- * @param {ReportFieldsSchema} secondary The secondary report fields fetched from report API.
- * @param {Array<string>} [fields] Array of expected metrics.
- * @return {PerformanceData} The calculated performance data of each metric.
+ * @param {number} [value] The primary report field fetched from report API.
+ * @param {number} [base] The secondary report field fetched from report API.
+ * @return {number | null} The delta percentage calculated by the `value` compared to the `base` and then rounded to second decimal.
+ *                         `null` if any number is not number type, or the result is not finite.
  */
-export function mapReportFieldsToPerformance(
-	primary = {},
-	secondary = {},
-	fields
-) {
-	return ( fields || Object.keys( primary ) ).reduce(
-		( acc, key ) => ( {
-			...acc,
-			[ key ]: fieldsToPerformance(
-				primary[ key ],
-				secondary[ key ],
-				! primary[ key ] || ! secondary[ key ]
-					? MISSING_FREE_LISTINGS_DATA.FOR_REQUEST
-					: MISSING_FREE_LISTINGS_DATA.NONE
-			),
-		} ),
-		{}
-	);
+export function calculateDelta( value, base ) {
+	let delta = null;
+	if ( typeof value === 'number' && typeof base === 'number' ) {
+		delta = 0;
+		if ( value !== base ) {
+			const percent = ( ( value - base ) / base ) * 100;
+			delta = Number.isFinite( percent ) ? round( percent ) : null;
+		}
+	}
+
+	return delta;
 }
 
 /**
@@ -147,24 +140,31 @@ export const fieldsToPerformance = (
 } );
 
 /**
- * Calculate delta.
+ * Calculate performance data by each metric.
  *
- * @param {number} [value] The primary report field fetched from report API.
- * @param {number} [base] The secondary report field fetched from report API.
- * @return {number | null} The delta percentage calculated by the `value` compared to the `base` and then rounded to second decimal.
- *                         `null` if any number is not number type, or the result is not finite.
+ * @param {ReportFieldsSchema} primary The primary report fields fetched from report API.
+ * @param {ReportFieldsSchema} secondary The secondary report fields fetched from report API.
+ * @param {Array<string>} [fields] Array of expected metrics.
+ * @return {PerformanceData} The calculated performance data of each metric.
  */
-export function calculateDelta( value, base ) {
-	let delta = null;
-	if ( typeof value === 'number' && typeof base === 'number' ) {
-		delta = 0;
-		if ( value !== base ) {
-			const percent = ( ( value - base ) / base ) * 100;
-			delta = Number.isFinite( percent ) ? round( percent ) : null;
-		}
-	}
-
-	return delta;
+export function mapReportFieldsToPerformance(
+	primary = {},
+	secondary = {},
+	fields
+) {
+	return ( fields || Object.keys( primary ) ).reduce(
+		( acc, key ) => ( {
+			...acc,
+			[ key ]: fieldsToPerformance(
+				primary[ key ],
+				secondary[ key ],
+				! primary[ key ] || ! secondary[ key ]
+					? MISSING_FREE_LISTINGS_DATA.FOR_REQUEST
+					: MISSING_FREE_LISTINGS_DATA.NONE
+			),
+		} ),
+		{}
+	);
 }
 
 /**

js/src/gtag-events/utils.js

@@ -23,20 +23,6 @@ export const trackEvent = ( eventName, eventParams ) => {
 	} );
 };
 
-/**
- * Track an add_to_cart event.
- *
- * @param {Product} product
- * @param {number} quantity
- */
-export const trackAddToCartEvent = ( product, quantity = 1 ) => {
-	trackEvent( 'add_to_cart', {
-		ecomm_pagetype: 'cart',
-		event_category: 'ecommerce',
-		items: [ getCartItemObject( product, quantity ) ],
-	} );
-};
-
 /**
  * Formats data into a cart Item object.
  *
@@ -68,6 +54,20 @@ export const getCartItemObject = ( product, quantity ) => {
 	return item;
 };
 
+/**
+ * Track an add_to_cart event.
+ *
+ * @param {Product} product
+ * @param {number} quantity
+ */
+export const trackAddToCartEvent = ( product, quantity = 1 ) => {
+	trackEvent( 'add_to_cart', {
+		ecomm_pagetype: 'cart',
+		event_category: 'ecommerce',
+		items: [ getCartItemObject( product, quantity ) ],
+	} );
+};
+
 /**
  * Formats a regular price into a price object.
  *

js/src/hooks/useCategories.js

@@ -24,46 +24,16 @@ const getDeletedCategoryName = ( categoryId ) => {
 };
 
 /**
- * Returns the categories and selected categories in the SelectControl format and also the categories in string format
- * It also maps the deleted (and previously selected) categories
+ * Return a category in SelectControl format
  *
- * @param {Array<string>} [selected] The selected category ID's
- * @return {{categories: Array, selected: Array, names: string, hasFinishedResolution: boolean}} The categories ready to insert in Select Control as well as the selected categories and the categories separated by commas together with the resolution state
+ * @param {Object} category The category to be formatted
+ * @return {{label: string, value: number, key: number}} The category formatted in SelectControl format
  */
-const useCategories = ( selected = [] ) => {
-	const { data, hasFinishedResolution } =
-		useAppSelectDispatch( 'getStoreCategories' );
-
-	if ( ! hasFinishedResolution ) {
-		return {
-			hasFinishedResolution,
-			categories: [],
-			selected: [],
-			names: '',
-		};
-	}
-
-	// Parse deleted categories previously selected in a rule
-	const deletedCategories = selected
-		.filter(
-			( category ) => ! data.find( ( e ) => e.id.toString() === category )
-		)
-		.map( ( category ) => {
-			return {
-				id: category,
-				name: getDeletedCategoryName( category ),
-				parent: 0,
-			};
-		} );
-
-	const categories = [ ...data, ...deletedCategories ];
-	const selectedCategories = getSelected( selected, categories );
-
+const getSelectControlFormat = ( category ) => {
 	return {
-		hasFinishedResolution,
-		selected: selectedCategories,
-		categories: formatCategoriesForSelectControl( categories ),
-		names: getCategoryNames( selectedCategories ),
+		key: category.id,
+		label: category.name,
+		value: category.id,
 	};
 };
 
@@ -107,16 +77,46 @@ const getSelected = ( selected, allCategories ) => {
 };
 
 /**
- * Return a category in SelectControl format
+ * Returns the categories and selected categories in the SelectControl format and also the categories in string format
+ * It also maps the deleted (and previously selected) categories
  *
- * @param {Object} category The category to be formatted
- * @return {{label: string, value: number, key: number}} The category formatted in SelectControl format
+ * @param {Array<string>} [selected] The selected category ID's
+ * @return {{categories: Array, selected: Array, names: string, hasFinishedResolution: boolean}} The categories ready to insert in Select Control as well as the selected categories and the categories separated by commas together with the resolution state
  */
-const getSelectControlFormat = ( category ) => {
+const useCategories = ( selected = [] ) => {
+	const { data, hasFinishedResolution } =
+		useAppSelectDispatch( 'getStoreCategories' );
+
+	if ( ! hasFinishedResolution ) {
+		return {
+			hasFinishedResolution,
+			categories: [],
+			selected: [],
+			names: '',
+		};
+	}
+
+	// Parse deleted categories previously selected in a rule
+	const deletedCategories = selected
+		.filter(
+			( category ) => ! data.find( ( e ) => e.id.toString() === category )
+		)
+		.map( ( category ) => {
+			return {
+				id: category,
+				name: getDeletedCategoryName( category ),
+				parent: 0,
+			};
+		} );
+
+	const categories = [ ...data, ...deletedCategories ];
+	const selectedCategories = getSelected( selected, categories );
+
 	return {
-		key: category.id,
-		label: category.name,
-		value: category.id,
+		hasFinishedResolution,
+		selected: selectedCategories,
+		categories: formatCategoriesForSelectControl( categories ),
+		names: getCategoryNames( selectedCategories ),
 	};
 };
 

js/src/hooks/useMCIssuesTotals.js

@@ -4,6 +4,15 @@
 import { ISSUE_TYPE_ACCOUNT, ISSUE_TYPE_PRODUCT } from '.~/constants';
 import useMCIssuesTypeFilter from '.~/hooks/useMCIssuesTypeFilter';
 
+const getTotal = ( issueTypes ) => {
+	const total = Object.values( issueTypes ).reduce(
+		( accumulator, current ) => accumulator + current,
+		0
+	);
+
+	return Number.isInteger( total ) ? total : undefined;
+};
+
 /**
  * Returns the issues totals for both Issue types (product & account)
  *
@@ -25,13 +34,4 @@ const useMCIssuesTotals = () => {
 	};
 };
 
-const getTotal = ( issueTypes ) => {
-	const total = Object.values( issueTypes ).reduce(
-		( accumulator, current ) => accumulator + current,
-		0
-	);
-
-	return Number.isInteger( total ) ? total : undefined;
-};
-
 export default useMCIssuesTotals;