Stats: Refactor pages to use shared modules wrapper (#98966)

* Use StatsModuleListing on Insights page * Use StatsModuleListing on Subscribers page * Use StatsModuleListing on Traffic page
Automattic · Jan 30, 2025 · 6143329 · 6143329
1 parent f3a14e3
commit 6143329
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 39 deletions.
diff --git a/client/my-sites/stats/pages/insights/index.jsx b/client/my-sites/stats/pages/insights/index.jsx
@@ -26,9 +26,10 @@ import StatsModule from '../../stats-module';
 import PageViewTracker from '../../stats-page-view-tracker';
 import statsStrings from '../../stats-strings';
 import StatsUpsell from '../../stats-upsell/insights-upsell';
+import StatsModuleListing from '../shared/stats-module-listing';
 
 const StatsInsights = ( props ) => {
-	const { siteId, siteSlug, isOdysseyStats, isJetpack } = props;
+	const { siteId, siteSlug, isJetpack } = props;
 	const translate = useTranslate();
 	const moduleStrings = statsStrings();
 	const isEmptyStateV2 = config.isEnabled( 'stats/empty-module-v2' );
@@ -49,17 +50,6 @@ const StatsInsights = ( props ) => {
 	const shouldGateInsights = useShouldGateStats( STATS_FEATURE_PAGE_INSIGHTS );
 	const shouldRendeUpsell = config.isEnabled( 'stats/paid-wpcom-v3' ) && shouldGateInsights;
 
-	const statsModuleListClass = clsx(
-		'stats__module-list--insights',
-		'stats__module--unified',
-		'stats__module-list',
-		'stats__flexible-grid-container',
-		{
-			'is-odyssey-stats': isOdysseyStats,
-			'is-jetpack': isJetpack,
-		}
-	);
-
 	// Track the last viewed tab.
 	// Necessary to properly configure the fixed navigation headers.
 	sessionStorage.setItem( 'jp-stats-last-tab', 'insights' );
@@ -89,7 +79,7 @@ const StatsInsights = ( props ) => {
 						<AllTimeHighlightsSection siteId={ siteId } siteSlug={ siteSlug } />
 						<PostingActivity siteId={ siteId } />
 						<AllTimeViewsSection siteId={ siteId } slug={ siteSlug } />
-						<div className={ statsModuleListClass }>
+						<StatsModuleListing className="stats__module-list--insights" siteId={ siteId }>
 							{ isEmptyStateV2 && (
 								<StatsModuleTags
 									moduleStrings={ moduleStrings.tags }
@@ -140,7 +130,7 @@ const StatsInsights = ( props ) => {
 									) }
 								/>
 							) }
-						</div>
+						</StatsModuleListing>
 						<JetpackColophon />
 					</>
 				) }
@@ -152,11 +142,9 @@ const StatsInsights = ( props ) => {
 
 const connectComponent = connect( ( state ) => {
 	const siteId = getSelectedSiteId( state );
-	const isOdysseyStats = config.isEnabled( 'is_running_in_jetpack_site' );
 	return {
 		siteId,
 		siteSlug: getSelectedSiteSlug( state, siteId ),
-		isOdysseyStats,
 		isJetpack: isJetpackSite( state, siteId ),
 	};
 } );

diff --git a/client/my-sites/stats/pages/subscribers/index.tsx b/client/my-sites/stats/pages/subscribers/index.tsx
@@ -11,7 +11,7 @@ import statsStrings from 'calypso/my-sites/stats/stats-strings';
 import { EmptyListView } from 'calypso/my-sites/subscribers/components/empty-list-view';
 import { SubscriberLaunchpad } from 'calypso/my-sites/subscribers/components/subscriber-launchpad';
 import { useSelector } from 'calypso/state';
-import { isJetpackSite, getSiteSlug, isSimpleSite } from 'calypso/state/sites/selectors';
+import { getSiteSlug, isSimpleSite } from 'calypso/state/sites/selectors';
 import getEnvStatsFeatureSupportChecks from 'calypso/state/sites/selectors/get-env-stats-feature-supports';
 import { getSelectedSiteId } from 'calypso/state/ui/selectors';
 import useSubscribersTotalsQueries from '../../hooks/use-subscribers-totals-query';
@@ -20,6 +20,7 @@ import StatsModulePlaceholder from '../../stats-module/placeholder';
 import PageViewTracker from '../../stats-page-view-tracker';
 import SubscribersChartSection, { PeriodType } from '../../stats-subscribers-chart-section';
 import SubscribersHighlightSection from '../../stats-subscribers-highlight-section';
+import StatsModuleListing from '../shared/stats-module-listing';
 import type { Moment } from 'moment';
 
 function StatsSubscribersPageError() {
@@ -66,23 +67,15 @@ const StatsSubscribersPage = ( { period }: StatsSubscribersPageProps ) => {
 	// Use hooks for Redux pulls.
 	const siteId = useSelector( getSelectedSiteId );
 	const siteSlug = useSelector( ( state ) => getSiteSlug( state, siteId ) );
-	const isJetpack = useSelector( ( state ) => isJetpackSite( state, siteId ) );
 	const { supportsEmailStats, supportsSubscriberChart } = useSelector( ( state ) =>
 		getEnvStatsFeatureSupportChecks( state, siteId )
 	);
 	const today = new Date().toISOString().slice( 0, 10 );
 	const moduleStrings = statsStrings().emails as TranslationStringType;
 
-	const statsModuleListClass = clsx(
-		'stats__module-list stats__module--unified',
-		'stats__module-list',
-		'stats__flexible-grid-container',
-		{
-			'is-email-stats-unavailable': ! supportsEmailStats,
-			'is-jetpack': isJetpack,
-		},
-		'subscribers-page'
-	);
+	const className = clsx( 'subscribers-page', {
+		'is-email-stats-unavailable': ! supportsEmailStats,
+	} );
 
 	// TODO: Pass subscribersTotals as props to SubscribersHighlightSection to avoid duplicate queries.
 	const { data: subscribersTotals, isLoading, isError } = useSubscribersTotalsQueries( siteId );
@@ -137,7 +130,7 @@ const StatsSubscribersPage = ( { period }: StatsSubscribersPageProps ) => {
 									/>
 								</>
 							) }
-							<div className={ statsModuleListClass }>
+							<StatsModuleListing className={ className } siteId={ siteId }>
 								<Followers
 									path="followers"
 									className={ clsx(
@@ -160,7 +153,7 @@ const StatsSubscribersPage = ( { period }: StatsSubscribersPageProps ) => {
 										) }
 									/>
 								) }
-							</div>
+							</StatsModuleListing>
 						</>
 					) ) }
 				<JetpackColophon />

diff --git a/client/my-sites/stats/site.jsx b/client/my-sites/stats/site.jsx
@@ -69,6 +69,7 @@ import StatsFeedbackPresentor from './feedback';
 import { shouldGateStats } from './hooks/use-should-gate-stats';
 import MiniCarousel from './mini-carousel';
 import { StatsGlobalValuesContext } from './pages/providers/global-provider';
+import StatsModuleListing from './pages/shared/stats-module-listing';
 import PromoCards from './promo-cards';
 import StatsCardUpdateJetpackVersion from './stats-card-upsell/stats-card-update-jetpack-version';
 import ChartTabs from './stats-chart-tabs';
@@ -525,13 +526,7 @@ function StatsBody( { siteId, chartTab = 'views', date, context, isInternal, ...
 		'is-period-year': period === 'year',
 	} );
 
-	const moduleListClasses = clsx(
-		'is-events',
-		'stats__module-list',
-		'stats__module-list--traffic',
-		'stats__module--unified',
-		'stats__flexible-grid-container'
-	);
+	const moduleListClassNames = clsx( 'is-events', 'stats__module-list--traffic' );
 
 	const halfWidthModuleClasses = clsx(
 		'stats__flexible-grid-item--half',
@@ -624,7 +619,7 @@ function StatsBody( { siteId, chartTab = 'views', date, context, isInternal, ...
 					<>
 						{ ! isOdysseyStats && <MiniCarousel slug={ slug } isSitePrivate={ isSitePrivate } /> }
 
-						<div className={ moduleListClasses }>
+						<StatsModuleListing className={ moduleListClassNames } siteId={ siteId }>
 							<StatsModuleTopPosts
 								moduleStrings={ moduleStrings.posts }
 								period={ props.period }
@@ -759,7 +754,7 @@ function StatsBody( { siteId, chartTab = 'views', date, context, isInternal, ...
 									}
 								/>
 							) }
-						</div>
+						</StatsModuleListing>
 					</>
 				) }