From 29a3d4f0a88b41e5e7de17bec0ad74f706b4757d Mon Sep 17 00:00:00 2001
From: paul sealock <psealock@gmail.com>
Date: Wed, 4 Sep 2024 15:52:37 +1200
Subject: [PATCH] refactor legacy

---
 .../client/settings/index.js                  | 43 +++++++++++++++----
 .../client/settings/legacy-settings.js        | 43 -------------------
 2 files changed, 35 insertions(+), 51 deletions(-)
 delete mode 100644 plugins/woocommerce-admin/client/settings/legacy-settings.js

diff --git a/plugins/woocommerce-admin/client/settings/index.js b/plugins/woocommerce-admin/client/settings/index.js
index daff0bcc546..f88a4342fb5 100644
--- a/plugins/woocommerce-admin/client/settings/index.js
+++ b/plugins/woocommerce-admin/client/settings/index.js
@@ -10,7 +10,8 @@ import { useEffect } from '@wordpress/element';
  * Internal dependencies
  */
 import { Tabs } from './tabs';
-import LegacySettings from './legacy-settings';
+import { SectionNav } from './section-nav';
+import { Content } from './content';
 import { possiblyRenderSettingsSlots } from './settings-slots';
 import { registerTaxSettingsConflictErrorFill } from './conflict-error-slotfill';
 import { registerPaymentsSettingsBannerFill } from '../payments/payments-settings-banner-slotfill';
@@ -58,13 +59,27 @@ const NotFound = () => {
 	return <h1>Not Found</h1>;
 };
 
-const getRoute = ( settingsData, page ) => {
-	const isLegacy = Object.keys( settingsData ).includes( page );
-	if ( isLegacy ) {
+const useSettingsLocation = () => {
+	const { section, path } = getQuery();
+	const page = path.split( '/settings/' ).pop();
+	return { section, page };
+};
+
+const getRoute = () => {
+	const { section, page } = useSettingsLocation();
+	const settingsData = window.wcSettings?.admin?.settingsPages;
+	const sections = settingsData[ page ]?.sections;
+	const contentData =
+		Array.isArray( sections ) && sections.length === 0
+			? {}
+			: sections[ section || '' ];
+	const isPage = Object.keys( settingsData ).includes( page );
+
+	if ( isPage ) {
 		return {
 			page,
 			areas: {
-				content: <LegacySettings />,
+				content: <Content data={ contentData } />,
 				edit: null,
 			},
 			widths: {
@@ -88,7 +103,9 @@ const getRoute = ( settingsData, page ) => {
 
 const Settings = ( { params } ) => {
 	useFullScreen( [ 'woocommerce-settings' ] );
+	const { page } = params;
 	const settingsData = window.wcSettings?.admin?.settingsPages;
+	const title = settingsData[ page ]?.label;
 	const { section } = getQuery();
 
 	// Be sure to render Settings slots when the params change.
@@ -101,7 +118,7 @@ const Settings = ( { params } ) => {
 		return () => {
 			removeSettingsScripts( scripts );
 		};
-	}, [ params.page, section ] );
+	}, [ page, section ] );
 
 	// Register the slot fills for the settings page just once.
 	useEffect( () => {
@@ -114,7 +131,7 @@ const Settings = ( { params } ) => {
 		return <div>Error getting data</div>;
 	}
 
-	const { areas } = getRoute( settingsData, params.page );
+	const { areas } = getRoute();
 
 	return (
 		<>
@@ -128,7 +145,17 @@ const Settings = ( { params } ) => {
 				</div>
 				{ areas.content && (
 					<div className="woocommerce-settings-layout-content">
-						{ areas.content }
+						<div className="woocommerce-settings-layout-title">
+							<h1>{ title }</h1>
+						</div>
+						<SectionNav
+							data={ settingsData[ page ] }
+							section={ section }
+						>
+							<div className="woocommerce-settings-layout-main">
+								{ areas.content }
+							</div>
+						</SectionNav>
 					</div>
 				) }
 				{ areas.edit && (
diff --git a/plugins/woocommerce-admin/client/settings/legacy-settings.js b/plugins/woocommerce-admin/client/settings/legacy-settings.js
deleted file mode 100644
index 70171621053..00000000000
--- a/plugins/woocommerce-admin/client/settings/legacy-settings.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * External dependencies
- */
-import { getQuery } from '@woocommerce/navigation';
-
-/**
- * Internal dependencies
- */
-import { SectionNav } from './section-nav';
-import { Content } from './content';
-
-const useSettingsLocation = () => {
-	const { section, path } = getQuery();
-	const page = path.split( '/settings/' ).pop();
-	return { section, page };
-};
-
-const LegacySettings = () => {
-	const { section, page } = useSettingsLocation();
-	const settingsData = window.wcSettings?.admin?.settingsPages;
-	const sections = settingsData[ page ]?.sections;
-	const contentData =
-		Array.isArray( sections ) && sections.length === 0
-			? {}
-			: sections[ section || '' ];
-
-	const title = settingsData[ page ]?.label;
-
-	return (
-		<>
-			<div className="woocommerce-settings-layout-title">
-				<h1>{ title }</h1>
-			</div>
-			<SectionNav data={ settingsData[ page ] } section={ section }>
-				<div className="woocommerce-settings-layout-main">
-					<Content data={ contentData } />
-				</div>
-			</SectionNav>
-		</>
-	);
-};
-
-export default LegacySettings;