dev: refactor Homescreen component to use useQuery hook (#34183)

- added useQuery hook for usage in functional components
- refactored Homescreen component to useQuery instead of prop drilling

packages/js/navigation/changelog/add-use-query-hook

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Added useQuery hook for usage in React functional components

packages/js/navigation/src/index.js

@@ -1,7 +1,12 @@
 /**
  * External dependencies
  */
-import { createElement } from '@wordpress/element';
+import {
+	createElement,
+	useState,
+	useEffect,
+	useLayoutEffect,
+} from '@wordpress/element';
 import { addQueryArgs } from '@wordpress/url';
 import { parse } from 'qs';
 import { pick } from 'lodash';
@@ -178,6 +183,30 @@ export function getQuery() {
 	return {};
 }
 
+/**
+ * Like getQuery but in useHook format for easy usage in React functional components
+ *
+ * @return {Record<string, string>} Current query object, defaults to empty object.
+ */
+export const useQuery = () => {
+	const [ queryState, setQueryState ] = useState( {} );
+	const [ locationChanged, setLocationChanged ] = useState( true );
+	useLayoutEffect( () => {
+		return addHistoryListener( () => {
+			setLocationChanged( true );
+		} );
+	}, [] );
+
+	useEffect( () => {
+		if ( locationChanged ) {
+			const query = getQuery();
+			setQueryState( query );
+			setLocationChanged( false );
+		}
+	}, [ locationChanged ] );
+	return queryState;
+};
+
 /**
  * This function returns an event handler for the given `param`
  *

plugins/woocommerce-admin/client/homescreen/index.tsx

@@ -9,7 +9,7 @@ import {
 	withOnboardingHydration,
 	WCDataSelector,
 } from '@woocommerce/data';
-import { getHistory, getNewPath } from '@woocommerce/navigation';
+import { getHistory, getNewPath, useQuery } from '@woocommerce/navigation';
 /**
  * Internal dependencies
  */
@@ -18,7 +18,6 @@ import { getAdminSetting } from '~/utils/admin-settings';
 
 type HomescreenProps = ReturnType< typeof withSelectHandler > & {
 	hasFinishedResolution: boolean;
-	query: Record< string, string >;
 };
 
 const Homescreen = ( {
@@ -27,12 +26,12 @@ const Homescreen = ( {
 		skipped: profilerSkipped,
 	} = {},
 	hasFinishedResolution,
-	query,
 }: HomescreenProps ) => {
 	if ( hasFinishedResolution && ! profilerCompleted && ! profilerSkipped ) {
 		getHistory().push( getNewPath( {}, '/setup-wizard', {} ) );
 	}
 
+	const query = useQuery();
 	// @ts-expect-error Layout is a pure JS component
 	return <Layout query={ query } />;
 };

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

@@ -67,7 +67,7 @@ export const Layout = ( {
 	const hasTwoColumnContent =
 		shouldShowStoreLinks || window.wcAdminFeatures.analytics;
 	const [ showInbox, setShowInbox ] = useState( true );
-	const isDashboardShown = ! query.task;
+	const isDashboardShown = ! query.task; // ?&task=<x> query param is used to show tasks instead of the homescreen
 	const activeSetupTaskList = useActiveSetupTasklist();
 
 	const twoColumns =

plugins/woocommerce/changelog/dev-refactor-homescreen-use-query

@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Refactored homescreen component to use useQuery hook