Stats: Refactor "stats-redirect" folder (#95507)

* Remove the StatsRedirectFlow component and its usage * Refactor StatsPageLoader folder * Use StatsPageLoader to wrap purchase page
Automattic · Oct 22, 2024 · 0ba0ed5 · 0ba0ed5
1 parent 8bab616
commit 0ba0ed5
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 62 deletions.
diff --git a/client/my-sites/stats/controller.jsx b/client/my-sites/stats/controller.jsx
@@ -14,7 +14,7 @@ import PageLoading from './pages/shared/page-loading';
 import StatsSite from './site';
 import StatsEmailDetail from './stats-email-detail';
 import StatsEmailSummary from './stats-email-summary';
-import LoadStatsPage from './stats-redirect/load-stats-page';
+import StatsPageLoader from './stats-page-loader';
 
 function getNumPeriodAgo( momentSiteZone, date, period ) {
 	const endOfCurrentPeriod = momentSiteZone.endOf( period );
@@ -141,14 +141,14 @@ export function overview( context, next ) {
 
 	context.primary =
 		siteId !== null ? (
-			<LoadStatsPage>
+			<StatsPageLoader>
 				<AsyncLoad
 					require="calypso/my-sites/stats/overview"
 					placeholder={ PageLoading }
 					period={ activeFilter.period }
 					path={ context.pathname }
 				/>
-			</LoadStatsPage>
+			</StatsPageLoader>
 		) : (
 			<AsyncLoad
 				require="calypso/my-sites/stats/overview"
@@ -202,15 +202,15 @@ export function site( context, next ) {
 	const chartTab = validTabs.includes( queryOptions.tab ) ? queryOptions.tab : 'views';
 
 	context.primary = (
-		<LoadStatsPage>
+		<StatsPageLoader>
 			<StatsSite
 				path={ context.pathname }
 				date={ date }
 				chartTab={ chartTab }
 				context={ context }
 				period={ rangeOfPeriod( activeFilter.period, date ) }
 			/>
-		</LoadStatsPage>
+		</StatsPageLoader>
 	);
 
 	next();
@@ -286,7 +286,7 @@ export function summary( context, next ) {
 	}
 
 	context.primary = (
-		<LoadStatsPage>
+		<StatsPageLoader>
 			<AsyncLoad
 				require="calypso/my-sites/stats/summary"
 				placeholder={ PageLoading }
@@ -297,7 +297,7 @@ export function summary( context, next ) {
 				period={ period }
 				{ ...extraProps }
 			/>
-		</LoadStatsPage>
+		</StatsPageLoader>
 	);
 
 	next();
@@ -315,15 +315,15 @@ export function post( context, next ) {
 	}
 
 	context.primary = (
-		<LoadStatsPage>
+		<StatsPageLoader>
 			<AsyncLoad
 				require="calypso/my-sites/stats/stats-post-detail"
 				placeholder={ PageLoading }
 				path={ context.path }
 				postId={ postId }
 				context={ context }
 			/>
-		</LoadStatsPage>
+		</StatsPageLoader>
 	);
 
 	next();
@@ -353,7 +353,7 @@ export function follows( context, next ) {
 	}
 
 	context.primary = (
-		<LoadStatsPage>
+		<StatsPageLoader>
 			<AsyncLoad
 				require="calypso/my-sites/stats/comment-follows"
 				placeholder={ PageLoading }
@@ -364,7 +364,7 @@ export function follows( context, next ) {
 				domain={ siteDomain }
 				siteId={ siteId }
 			/>
-		</LoadStatsPage>
+		</StatsPageLoader>
 	);
 
 	next();

diff --git a/client/my-sites/stats/pages/purchase/controller.tsx b/client/my-sites/stats/pages/purchase/controller.tsx
@@ -1,15 +1,17 @@
 import AsyncLoad from 'calypso/components/async-load';
+import StatsPageLoader from '../../stats-page-loader';
 import PageLoading from '../shared/page-loading';
 import type { Context } from '@automattic/calypso-router';
 
 function purchase( context: Context, next: () => void ) {
 	context.primary = (
-		// DO NOT WRAP WITH <LoadStatsPage /> or you will get an infinite loop
-		<AsyncLoad
-			require="calypso/my-sites/stats/pages/purchase"
-			placeholder={ PageLoading }
-			query={ context.query }
-		/>
+		<StatsPageLoader>
+			<AsyncLoad
+				require="calypso/my-sites/stats/pages/purchase"
+				placeholder={ PageLoading }
+				query={ context.query }
+			/>
+		</StatsPageLoader>
 	);
 	next();
 }

diff --git a/client/my-sites/stats/pages/purchase/index.tsx b/client/my-sites/stats/pages/purchase/index.tsx
@@ -11,7 +11,6 @@ import { useEffect, useMemo } from 'react';
 import StatsNavigation from 'calypso/blocks/stats-navigation';
 import DocumentHead from 'calypso/components/data/document-head';
 import QueryProductsList from 'calypso/components/data/query-products-list';
-import QuerySitePurchases from 'calypso/components/data/query-site-purchases';
 import InlineSupportLink from 'calypso/components/inline-support-link';
 import JetpackColophon from 'calypso/components/jetpack-colophon';
 import Main from 'calypso/components/main';
@@ -24,13 +23,13 @@ import isVipSite from 'calypso/state/selectors/is-vip-site';
 import { getSiteSlug, getSiteOption } from 'calypso/state/sites/selectors';
 import { getSelectedSiteId } from 'calypso/state/ui/selectors';
 import useStatsPurchases from '../../hooks/use-stats-purchases';
+import StatsLoader from '../../stats-page-loader/stats-loader';
 import PageViewTracker from '../../stats-page-view-tracker';
 import { StatsPurchaseNoticePage } from '../../stats-purchase/stats-purchase-notice';
 import {
 	StatsSingleItemPagePurchase,
 	StatsSingleItemPersonalPurchasePage,
 } from '../../stats-purchase/stats-purchase-single-item';
-import StatsLoader from '../../stats-redirect/stats-loader';
 import './style.scss';
 
 const StatsPurchasePage = ( {
@@ -199,9 +198,6 @@ const StatsPurchasePage = ( {
 						/>
 					</>
 				) }
-
-				{ /* Only query site purchases on Calypso via existing data component */ }
-				<QuerySitePurchases siteId={ siteId } />
 				<QueryProductsList type="jetpack" />
 				{ isLoading && (
 					<div className="stats-purchase-page__loader">

diff --git a/.../stats/stats-redirect/load-stats-page.tsx → ...y-sites/stats/stats-page-loader/index.tsx b/.../stats/stats-redirect/load-stats-page.tsx → ...y-sites/stats/stats-page-loader/index.tsx
@@ -14,8 +14,7 @@ import getCurrentRouteParameterized from 'calypso/state/selectors/get-current-ro
 import isJetpackModuleActive from 'calypso/state/selectors/is-jetpack-module-active';
 import { isJetpackSite } from 'calypso/state/sites/selectors';
 import { getSelectedSiteId } from 'calypso/state/ui/selectors';
-import { StatsGlobalValuesProvider } from './../pages/providers/global-provider';
-import StatsRedirectFlow from './index';
+import { StatsGlobalValuesProvider } from '../pages/providers/global-provider';
 
 type AsyncLoadProps = {
 	children: ReactNode;
@@ -68,7 +67,7 @@ const InsufficientPermissionsNotice = () => {
 	);
 };
 
-export default function LoadStatsPage( { children }: AsyncLoadProps ) {
+export default function StatsPageLoader( { children }: AsyncLoadProps ) {
 	const siteId = useSelector( getSelectedSiteId ) as number;
 	const isOdysseyStats = config.isEnabled( 'is_running_in_jetpack_site' );
 	const isJetpack = useSelector( ( state ) => isJetpackSite( state, siteId ) );
@@ -119,7 +118,7 @@ export default function LoadStatsPage( { children }: AsyncLoadProps ) {
 		<StatsGlobalValuesProvider>
 			<>
 				<QuerySitePurchases siteId={ siteId } />
-				<StatsRedirectFlow>{ children }</StatsRedirectFlow>
+				{ children }
 			</>
 		</StatsGlobalValuesProvider>
 	);

diff --git a/...tes/stats/stats-redirect/stats-loader.tsx → .../stats/stats-page-loader/stats-loader.tsx b/...tes/stats/stats-redirect/stats-loader.tsx → .../stats/stats-page-loader/stats-loader.tsx
diff --git a/client/my-sites/stats/stats-redirect/index.tsx b/client/my-sites/stats/stats-redirect/index.tsx