Stats Locations: add support for preserving geo mode in summary view

client/my-sites/stats/features/modules/stats-locations/stats-locations.tsx

@@ -13,7 +13,10 @@ import { QueryStatsParams } from 'calypso/my-sites/stats/hooks/utils';
 import StatsCardUpsell from 'calypso/my-sites/stats/stats-card-upsell';
 import StatsListCard from 'calypso/my-sites/stats/stats-list/stats-list-card';
 import StatsModulePlaceholder from 'calypso/my-sites/stats/stats-module/placeholder';
-import { trackStatsAnalyticsEvent } from 'calypso/my-sites/stats/utils';
+import {
+	getPathWithUpdatedQueryString,
+	trackStatsAnalyticsEvent,
+} from 'calypso/my-sites/stats/utils';
 import { useSelector } from 'calypso/state';
 import getEnvStatsFeatureSupportChecks from 'calypso/state/sites/selectors/get-env-stats-feature-supports';
 import { getSiteStatsNormalizedData } from 'calypso/state/stats/lists/selectors';
@@ -57,16 +60,25 @@ type SelectOptionType = {
 interface StatsModuleLocationsProps {
 	query: QueryStatsParams;
 	summaryUrl?: string;
+	initialGeoMode?: string;
 }
 
-const StatsLocations: React.FC< StatsModuleLocationsProps > = ( { query, summaryUrl } ) => {
+const StatsLocations: React.FC< StatsModuleLocationsProps > = ( {
+	query,
+	summaryUrl,
+	initialGeoMode,
+} ) => {
 	const translate = useTranslate();
 	const siteId = useSelector( getSelectedSiteId ) as number;
 	const statType = STAT_TYPE_COUNTRY_VIEWS;
 	const isOdysseyStats = config.isEnabled( 'is_running_in_jetpack_site' );
 	const supportUrl = isOdysseyStats ? JETPACK_SUPPORT_URL_TRAFFIC : SUPPORT_URL;
 
-	const [ selectedOption, setSelectedOption ] = useState( OPTION_KEYS.COUNTRIES );
+	const urlGeoMode =
+		initialGeoMode || new URLSearchParams( window.location.search ).get( 'geoMode' );
+	const [ selectedOption, setSelectedOption ] = useState(
+		urlGeoMode && urlGeoMode in GEO_MODES ? urlGeoMode : OPTION_KEYS.COUNTRIES
+	);
 
 	const [ countryFilter, setCountryFilter ] = useState< string | null >( null );
 
@@ -274,6 +286,19 @@ const StatsLocations: React.FC< StatsModuleLocationsProps > = ( { query, summary
 		return null;
 	};
 
+	const getFinalSummaryUrl = () => {
+		if ( ! summaryUrl ) {
+			return undefined;
+		}
+
+		return getPathWithUpdatedQueryString(
+			{
+				geoMode: selectedOption,
+			},
+			summaryUrl
+		);
+	};
+
 	const moduleOverlay = getModuleOverlay();
 
 	return (
@@ -314,7 +339,7 @@ const StatsLocations: React.FC< StatsModuleLocationsProps > = ( { query, summary
 						showMore={
 							summaryUrl
 								? {
-										url: summaryUrl,
+										url: getFinalSummaryUrl(),
 										label:
 											Array.isArray( locationData ) && locationData.length >= 10
 												? translate( 'View all', {
@@ -340,7 +365,7 @@ const StatsLocations: React.FC< StatsModuleLocationsProps > = ( { query, summary
 					footerAction={
 						summaryUrl
 							? {
-									url: summaryUrl,
+									url: getFinalSummaryUrl(),
 									label: translate( 'View more' ),
 							  }
 							: undefined

client/my-sites/stats/summary/index.jsx

@@ -175,7 +175,6 @@ class StatsSummary extends Component {
 				title = translate( 'Locations' );
 				path = 'locations';
 				statType = 'statsCountryViews';
-
 				summaryView = (
 					<Fragment key="countries-summary">
 						{ this.renderSummaryHeader( path, statType, false, moduleQuery ) }
@@ -185,6 +184,7 @@ class StatsSummary extends Component {
 							query={ moduleQuery }
 							summary
 							listItemClassName={ listItemClassName }
+							initialGeoMode={ urlParams.get( 'geoMode' ) }
 						/>
 					</Fragment>
 				);