fix: fixed all instances of no-use-before-define lint rule violations

packages/js/api/.eslintrc.js

@@ -5,7 +5,6 @@ module.exports = {
 	rules: {
 		// These warning rules are stop gaps for eslint issues that need to be fixed later.
 		'@typescript-eslint/no-explicit-any': 'off',
-		'@typescript-eslint/no-use-before-define': 'off',
 		'@typescript-eslint/ban-ts-comment': 'off',
 		'@typescript-eslint/no-unused-vars': 'off',
 	},

plugins/woocommerce-admin/.eslintrc.js

@@ -10,7 +10,6 @@ module.exports = {
 			files: [ 'client/**/*.js', 'client/**/*.jsx', 'client/**/*.tsx' ],
 			rules: {
 				'react/react-in-jsx-scope': 'off',
-				'@typescript-eslint/no-use-before-define': 'warn',
 			},
 		},
 	],

plugins/woocommerce-admin/client/activity-panel/activity-panel.js

@@ -73,6 +73,19 @@ export const ActivityPanel = ( { isEmbedded, query } ) => {
 	const { updateUserPreferences, ...userData } = useUserPreferences();
 	const activeSetupList = useActiveSetupTasklist();
 
+	const closePanel = () => {
+		setIsPanelClosing( true );
+		setIsPanelOpen( false );
+	};
+
+	const clearPanel = () => {
+		if ( ! isPanelOpen ) {
+			setIsPanelClosing( false );
+			setIsPanelSwitching( false );
+			setCurrentTab( '' );
+		}
+	};
+
 	useEffect( () => {
 		return addHistoryListener( () => {
 			closePanel();
@@ -217,19 +230,6 @@ export const ActivityPanel = ( { isEmbedded, query } ) => {
 		setIsPanelSwitching( panelSwitching );
 	};
 
-	const closePanel = () => {
-		setIsPanelClosing( true );
-		setIsPanelOpen( false );
-	};
-
-	const clearPanel = () => {
-		if ( ! isPanelOpen ) {
-			setIsPanelClosing( false );
-			setIsPanelSwitching( false );
-			setCurrentTab( '' );
-		}
-	};
-
 	const isHomescreen = () => {
 		return query.page === 'wc-admin' && ! query.path;
 	};

plugins/woocommerce-admin/client/activity-panel/highlight-tooltip/index.js

@@ -43,6 +43,30 @@ function HighlightTooltip( {
 	);
 	const [ node, setNode ] = useState( null );
 	const [ anchorRect, setAnchorRect ] = useState( null );
+	const showTooltip = ( container ) => {
+		const element = document.getElementById( id );
+		if ( element && useAnchor ) {
+			setAnchorRect( element.getBoundingClientRect() );
+		}
+		if ( container ) {
+			container.classList.add( SHOW_CLASS );
+		}
+		setShowHighlight( true );
+		onShow();
+	};
+
+	const triggerShowTooltip = ( container ) => {
+		let timeoutId = null;
+		if ( delay > 0 ) {
+			timeoutId = setTimeout( () => {
+				timeoutId = null;
+				showTooltip( container );
+			}, delay );
+		} else if ( ! showHighlight ) {
+			showTooltip( container );
+		}
+		return timeoutId;
+	};
 
 	useEffect( () => {
 		const element = document.getElementById( id );
@@ -93,11 +117,6 @@ function HighlightTooltip( {
 		}
 	}, [ show ] );
 
-	useLayoutEffect( () => {
-		window.addEventListener( 'resize', updateSize );
-		return () => window.removeEventListener( 'resize', updateSize );
-	}, [] );
-
 	function updateSize() {
 		if ( useAnchor ) {
 			const element = document.getElementById( id );
@@ -105,30 +124,10 @@ function HighlightTooltip( {
 		}
 	}
 
-	const triggerShowTooltip = ( container ) => {
-		let timeoutId = null;
-		if ( delay > 0 ) {
-			timeoutId = setTimeout( () => {
-				timeoutId = null;
-				showTooltip( container );
-			}, delay );
-		} else if ( ! showHighlight ) {
-			showTooltip( container );
-		}
-		return timeoutId;
-	};
-
-	const showTooltip = ( container ) => {
-		const element = document.getElementById( id );
-		if ( element && useAnchor ) {
-			setAnchorRect( element.getBoundingClientRect() );
-		}
-		if ( container ) {
-			container.classList.add( SHOW_CLASS );
-		}
-		setShowHighlight( true );
-		onShow();
-	};
+	useLayoutEffect( () => {
+		window.addEventListener( 'resize', updateSize );
+		return () => window.removeEventListener( 'resize', updateSize );
+	}, [] );
 
 	const triggerClose = () => {
 		setShowHighlight( false );

plugins/woocommerce-admin/client/activity-panel/panel.js

@@ -22,6 +22,9 @@ export const Panel = ( {
 } ) => {
 	const panelClass = 'woocommerce-layout__activity-panel-wrapper';
 
+	const focusOnMountRef = useFocusOnMount();
+	const containerRef = useRef( null );
+
 	const handleFocusOutside = ( event ) => {
 		const isClickOnModalOrSnackbar =
 			event.relatedTarget &&
@@ -50,9 +53,7 @@ export const Panel = ( {
 		}
 	};
 
-	const focusOnMountRef = useFocusOnMount();
 	const useFocusOutsideProps = useFocusOutside( handleFocusOutside );
-	const containerRef = useRef( null );
 
 	const mergedContainerRef = useCallback( ( node ) => {
 		containerRef.current = node;

plugins/woocommerce-admin/client/analytics/settings/historical-data/actions.js

@@ -28,6 +28,26 @@ function HistoricalDataActions( {
 	setImportStarted,
 	updateImportation,
 } ) {
+	const makeQuery = ( path, errorMessage, importStarted = false ) => {
+		updateImportation( path, importStarted )
+			.then( ( response ) => {
+				if ( response.status === 'success' ) {
+					createNotice( 'success', response.message );
+				} else {
+					createNotice( 'error', errorMessage );
+					setImportStarted( false );
+					stopImport();
+				}
+			} )
+			.catch( ( error ) => {
+				if ( error && error.message ) {
+					createNotice( 'error', error.message );
+					setImportStarted( false );
+					stopImport();
+				}
+			} );
+	};
+
 	const onStartImport = () => {
 		const path = addQueryArgs(
 			'/wc-analytics/reports/import',
@@ -53,26 +73,6 @@ function HistoricalDataActions( {
 		makeQuery( path, errorMessage );
 	};
 
-	const makeQuery = ( path, errorMessage, importStarted = false ) => {
-		updateImportation( path, importStarted )
-			.then( ( response ) => {
-				if ( response.status === 'success' ) {
-					createNotice( 'success', response.message );
-				} else {
-					createNotice( 'error', errorMessage );
-					setImportStarted( false );
-					stopImport();
-				}
-			} )
-			.catch( ( error ) => {
-				if ( error && error.message ) {
-					createNotice( 'error', error.message );
-					setImportStarted( false );
-					stopImport();
-				}
-			} );
-	};
-
 	const deletePreviousData = () => {
 		const path = '/wc-analytics/reports/import/delete';
 		const errorMessage = __(

plugins/woocommerce-admin/client/homescreen/layout.js

@@ -97,6 +97,19 @@ export const Layout = ( {
 	const shouldStickColumns = isWideViewport.current && twoColumns;
 	const shouldShowMobileAppModal = query.mobileAppModal ?? false;
 
+	const renderTaskList = () => {
+		return (
+			<Suspense fallback={ <TasksPlaceholder query={ query } /> }>
+				{ activeSetupTaskList && isDashboardShown && (
+					<>
+						<ProgressTitle taskListId={ activeSetupTaskList } />
+					</>
+				) }
+				<TaskLists query={ query } />
+			</Suspense>
+		);
+	};
+
 	const renderColumns = () => {
 		return (
 			<>
@@ -124,19 +137,6 @@ export const Layout = ( {
 		);
 	};
 
-	const renderTaskList = () => {
-		return (
-			<Suspense fallback={ <TasksPlaceholder query={ query } /> }>
-				{ activeSetupTaskList && isDashboardShown && (
-					<>
-						<ProgressTitle taskListId={ activeSetupTaskList } />
-					</>
-				) }
-				<TaskLists query={ query } />
-			</Suspense>
-		);
-	};
-
 	return (
 		<>
 			{ isDashboardShown && (

plugins/woocommerce-admin/client/layout/index.js

@@ -108,23 +108,6 @@ const WithReactRouterProps = ( { children } ) => {
 	} );
 };
 
-/**
- * Wraps _Layout with WithReactRouterProps for non-embedded page renders
- * We need this because the hooks fail for embedded page renders as there is no Router context above it.
- *
- * @param {Object} props React component props
- */
-const LayoutSwitchWrapper = ( props ) => {
-	if ( props.isEmbedded ) {
-		return <_Layout { ...props } />;
-	}
-	return (
-		<WithReactRouterProps>
-			<_Layout { ...props } />
-		</WithReactRouterProps>
-	);
-};
-
 function _Layout( {
 	activePlugins,
 	installedPlugins,
@@ -287,6 +270,23 @@ _Layout.propTypes = {
 	} ).isRequired,
 };
 
+/**
+ * Wraps _Layout with WithReactRouterProps for non-embedded page renders
+ * We need this because the hooks fail for embedded page renders as there is no Router context above it.
+ *
+ * @param {Object} props React component props
+ */
+const LayoutSwitchWrapper = ( props ) => {
+	if ( props.isEmbedded ) {
+		return <_Layout { ...props } />;
+	}
+	return (
+		<WithReactRouterProps>
+			<_Layout { ...props } />
+		</WithReactRouterProps>
+	);
+};
+
 const dataEndpoints = getAdminSetting( 'dataEndpoints' );
 const Layout = compose(
 	withPluginsHydration( {

plugins/woocommerce-admin/client/marketing/data/actions.js

@@ -62,6 +62,29 @@ export function setError( category, error ) {
 	};
 }
 
+export function* loadInstalledPluginsAfterActivation( activatedPluginSlug ) {
+	try {
+		const response = yield apiFetch( {
+			path: `${ API_NAMESPACE }/overview/installed-plugins`,
+		} );
+
+		if ( response ) {
+			yield receiveInstalledPlugins( response );
+			yield removeActivatingPlugin( activatedPluginSlug );
+		} else {
+			throw new Error();
+		}
+	} catch ( error ) {
+		yield handleFetchError(
+			error,
+			__(
+				'There was an error loading installed extensions.',
+				'woocommerce'
+			)
+		);
+	}
+}
+
 export function* activateInstalledPlugin( pluginSlug ) {
 	const { createNotice } = dispatch( 'core/notices' );
 	yield receiveActivatingPlugin( pluginSlug );
@@ -102,29 +125,6 @@ export function* activateInstalledPlugin( pluginSlug ) {
 	return true;
 }
 
-export function* loadInstalledPluginsAfterActivation( activatedPluginSlug ) {
-	try {
-		const response = yield apiFetch( {
-			path: `${ API_NAMESPACE }/overview/installed-plugins`,
-		} );
-
-		if ( response ) {
-			yield receiveInstalledPlugins( response );
-			yield removeActivatingPlugin( activatedPluginSlug );
-		} else {
-			throw new Error();
-		}
-	} catch ( error ) {
-		yield handleFetchError(
-			error,
-			__(
-				'There was an error loading installed extensions.',
-				'woocommerce'
-			)
-		);
-	}
-}
-
 export function* installAndActivateRecommendedPlugin(
 	recommendedPluginSlug,
 	category

plugins/woocommerce-admin/client/marketplace/components/feedback-modal/feedback-modal.tsx

@@ -82,36 +82,6 @@ export default function FeedbackModal(): JSX.Element {
 	};
 	const { createNotice } = useDispatch( 'core/notices' );
 
-	function maybeShowSnackbar() {
-		// Don't show if we're still loading content
-		if ( isLoading ) {
-			return;
-		}
-
-		// Don't show if the user has already given feedback or otherwise suppressed
-		if ( isDismissedForever() ) {
-			return;
-		}
-
-		// Don't show if we've already shown today or user has declined today
-		const today = new Date().toDateString();
-		if (
-			today ===
-			localStorage.getItem( LOCALSTORAGE_KEY_LAST_REQUESTED_DATE )
-		) {
-			return;
-		}
-
-		const timer = setTimeout( showSnackbar, SNACKBAR_TIMEOUT );
-
-		// Without this, navigating between screens will create a series of snackbars
-		dismissToday();
-
-		return () => {
-			clearTimeout( timer );
-		};
-	}
-
 	function showSnackbar() {
 		createNotice(
 			'success',
@@ -167,6 +137,36 @@ export default function FeedbackModal(): JSX.Element {
 		);
 	}
 
+	function maybeShowSnackbar() {
+		// Don't show if we're still loading content
+		if ( isLoading ) {
+			return;
+		}
+
+		// Don't show if the user has already given feedback or otherwise suppressed
+		if ( isDismissedForever() ) {
+			return;
+		}
+
+		// Don't show if we've already shown today or user has declined today
+		const today = new Date().toDateString();
+		if (
+			today ===
+			localStorage.getItem( LOCALSTORAGE_KEY_LAST_REQUESTED_DATE )
+		) {
+			return;
+		}
+
+		const timer = setTimeout( showSnackbar, SNACKBAR_TIMEOUT );
+
+		// Without this, navigating between screens will create a series of snackbars
+		dismissToday();
+
+		return () => {
+			clearTimeout( timer );
+		};
+	}
+
 	useEffect( maybeShowSnackbar, [ isLoading ] );
 
 	// We don't want the "How easy was it to find an extension?" dialog to appear forever:

plugins/woocommerce-admin/client/profile-wizard/steps/industry.js

@@ -27,21 +27,6 @@ import { getAdminSetting } from '~/utils/admin-settings';
 
 const onboarding = getAdminSetting( 'onboarding', {} );
 
-const Loader = ( props ) => {
-	if ( props.isLoading ) {
-		return (
-			<div
-				className="woocommerce-admin__industry__spinner"
-				style={ { textAlign: 'center' } }
-			>
-				<Spinner />
-			</div>
-		);
-	}
-
-	return <Industry { ...props } />;
-};
-
 class Industry extends Component {
 	constructor( props ) {
 		const profileItems = get( props, 'profileItems', {} );
@@ -313,6 +298,21 @@ class Industry extends Component {
 	}
 }
 
+const Loader = ( props ) => {
+	if ( props.isLoading ) {
+		return (
+			<div
+				className="woocommerce-admin__industry__spinner"
+				style={ { textAlign: 'center' } }
+			>
+				<Spinner />
+			</div>
+		);
+	}
+
+	return <Industry { ...props } />;
+};
+
 export default compose(
 	withSelect( ( select ) => {
 		const {

plugins/woocommerce-admin/client/store-management-links/index.js

@@ -25,6 +25,28 @@ import { QuickLinkCategory } from './quick-link-category';
 import { QuickLink } from './quick-link';
 import { getAdminSetting } from '~/utils/admin-settings';
 
+export function getLinkTypeAndHref( { path, tab = null, type, href = null } ) {
+	return (
+		{
+			'wc-admin': {
+				href: `admin.php?page=wc-admin&path=%2F${ path }`,
+				linkType: 'wc-admin',
+			},
+			'wp-admin': {
+				href: path,
+				linkType: 'wp-admin',
+			},
+			'wc-settings': {
+				href: `admin.php?page=wc-settings&tab=${ tab }`,
+				linkType: 'wp-admin',
+			},
+		}[ type ] || {
+			href,
+			linkType: 'external',
+		}
+	);
+}
+
 export function getItemsByCategory( shopUrl ) {
 	return [
 		{
@@ -112,28 +134,6 @@ export function getItemsByCategory( shopUrl ) {
 	];
 }
 
-export function getLinkTypeAndHref( { path, tab = null, type, href = null } ) {
-	return (
-		{
-			'wc-admin': {
-				href: `admin.php?page=wc-admin&path=%2F${ path }`,
-				linkType: 'wc-admin',
-			},
-			'wp-admin': {
-				href: path,
-				linkType: 'wp-admin',
-			},
-			'wc-settings': {
-				href: `admin.php?page=wc-settings&tab=${ tab }`,
-				linkType: 'wp-admin',
-			},
-		}[ type ] || {
-			href,
-			linkType: 'external',
-		}
-	);
-}
-
 export const generateExtensionLinks = ( links ) => {
 	return links.reduce( ( acc, { icon, href, title } ) => {
 		const url = new URL( href, window.location.href );