From 4325287ddc7d31e257173e82bfc089bdc254954b Mon Sep 17 00:00:00 2001
From: wpalani <abdulrahmanalani95@gmail.com>
Date: Mon, 27 Nov 2023 13:50:44 -0700
Subject: [PATCH] Move handlePageLoad function to react hook

---
 src/app/index.js                        |  3 +++
 src/app/util/hooks/index.js             |  1 +
 src/app/util/hooks/useHandlePageLoad.js | 18 ++++++++++++++++++
 3 files changed, 22 insertions(+)
 create mode 100644 src/app/util/hooks/index.js
 create mode 100644 src/app/util/hooks/useHandlePageLoad.js

diff --git a/src/app/index.js b/src/app/index.js
index 3d9c3622f..e913f06dc 100644
--- a/src/app/index.js
+++ b/src/app/index.js
@@ -14,6 +14,7 @@ import { ErrorBoundary } from 'react-error-boundary';
 // eslint-disable-next-line import/no-unresolved
 import { store as noticesStore } from '@wordpress/notices';
 import { kebabCase, filter } from 'lodash';
+import { useHandlePageLoad } from './util/hooks';
 import { Root } from '@newfold/ui-component-library';
 import { AppNav } from './components/app-nav';
 import { SiteInfoBar } from './components/site-info';
@@ -50,6 +51,8 @@ const AppBody = ( props ) => {
 	const hashedPath = '#' + location.pathname;
 	const { booted, hasError } = useContext( AppStore );
 
+	useHandlePageLoad();
+
 	return (
 		<main
 			id="wppbh-app-rendered"
diff --git a/src/app/util/hooks/index.js b/src/app/util/hooks/index.js
new file mode 100644
index 000000000..b4be7862f
--- /dev/null
+++ b/src/app/util/hooks/index.js
@@ -0,0 +1 @@
+export { default as useHandlePageLoad } from './useHandlePageLoad.js';
diff --git a/src/app/util/hooks/useHandlePageLoad.js b/src/app/util/hooks/useHandlePageLoad.js
new file mode 100644
index 000000000..ff64f706a
--- /dev/null
+++ b/src/app/util/hooks/useHandlePageLoad.js
@@ -0,0 +1,18 @@
+import { useLocation } from 'react-router-dom';
+
+const useHandlePageLoad = () => {
+	const location = useLocation();
+	const routeContents = document.querySelector( '.wppbh-app-body-inner' );
+
+	useEffect( () => {
+		window.scrollTo( 0, 0 );
+		if ( routeContents ) {
+			routeContents.focus( { preventScroll: true } );
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ location.pathname ] );
+
+	return true;
+};
+
+export default useHandlePageLoad;