Enable localization of read/search page with url param (#78656)

client/blocks/reader-post-card/index.jsx

@@ -1,4 +1,5 @@
 import { Card } from '@automattic/components';
+import { localeRegexString } from '@automattic/i18n-utils';
 import classnames from 'classnames';
 import closest from 'component-closest';
 import { truncate, get } from 'lodash';
@@ -143,7 +144,11 @@ class ReaderPostCard extends Component {
 		const isDiscover = post.is_discover;
 		const title = truncate( post.title, { length: 140, separator: /,? +/ } );
 		const isConversations = currentRoute.startsWith( '/read/conversations' );
-		const isReaderSearchPage = currentRoute.startsWith( '/read/search' );
+
+		const isReaderSearchPage = new RegExp( `^(/${ localeRegexString })?/read/search` ).test(
+			currentRoute
+		);
+
 		const classes = classnames( 'reader-post-card', {
 			'has-thumbnail': !! post.canonical_media,
 			'is-photo': isPhotoPost,

client/controller/index.node.js

@@ -36,7 +36,7 @@ const ProviderWrappedLoggedOutLayout = ( {
 	currentQuery,
 	primary,
 	secondary,
-	headerSection,
+	renderHeaderSection,
 	redirectUri,
 	i18n,
 	showGdprBanner,
@@ -52,7 +52,7 @@ const ProviderWrappedLoggedOutLayout = ( {
 					<LayoutLoggedOut
 						primary={ primary }
 						secondary={ secondary }
-						headerSection={ headerSection }
+						renderHeaderSection={ renderHeaderSection }
 						redirectUri={ redirectUri }
 						showGdprBanner={ showGdprBanner }
 					/>

client/controller/index.web.js

@@ -35,7 +35,7 @@ export const ProviderWrappedLayout = ( {
 	currentQuery,
 	primary,
 	secondary,
-	headerSection,
+	renderHeaderSection,
 	redirectUri,
 } ) => {
 	const state = store.getState();
@@ -47,7 +47,7 @@ export const ProviderWrappedLayout = ( {
 			primary={ primary }
 			secondary={ secondary }
 			redirectUri={ redirectUri }
-			headerSection={ headerSection }
+			renderHeaderSection={ renderHeaderSection }
 		/>
 	);
 

client/controller/shared.js

@@ -15,7 +15,7 @@ export function makeLayoutMiddleware( LayoutComponent ) {
 			query,
 			primary,
 			secondary,
-			headerSection,
+			renderHeaderSection,
 			showGdprBanner,
 			cachedMarkup,
 		} = context;
@@ -36,7 +36,7 @@ export function makeLayoutMiddleware( LayoutComponent ) {
 					currentQuery={ query }
 					primary={ primary }
 					secondary={ secondary }
-					headerSection={ headerSection }
+					renderHeaderSection={ renderHeaderSection }
 					redirectUri={ context.originalUrl }
 					showGdprBanner={ showGdprBanner }
 				/>
@@ -70,7 +70,6 @@ export function setLocaleMiddleware( param = 'lang' ) {
 			context.lang = paramsLocale;
 			context.store.dispatch( setLocale( paramsLocale ) );
 		}
-
 		next();
 	};
 }

client/layout/logged-out.jsx

@@ -1,5 +1,9 @@
 import config from '@automattic/calypso-config';
-import { useLocalizeUrl, removeLocaleFromPathLocaleInFront } from '@automattic/i18n-utils';
+import {
+	useLocalizeUrl,
+	removeLocaleFromPathLocaleInFront,
+	localeRegexString,
+} from '@automattic/i18n-utils';
 import { UniversalNavbarHeader, UniversalNavbarFooter } from '@automattic/wpcom-template-parts';
 import classNames from 'classnames';
 import { localize } from 'i18n-calypso';
@@ -49,7 +53,7 @@ const LayoutLoggedOut = ( {
 	oauth2Client,
 	primary,
 	secondary,
-	headerSection,
+	renderHeaderSection,
 	sectionGroup,
 	sectionName,
 	sectionTitle,
@@ -77,13 +81,15 @@ const LayoutLoggedOut = ( {
 
 	const isReaderTagPage = sectionName === 'reader' && currentRoute.startsWith( '/tag/' );
 
-	const isReaderSearchPage = sectionName === 'reader' && currentRoute.startsWith( '/read/search' );
+	const isReaderSearchPage =
+		sectionName === 'reader' &&
+		currentRoute.match( new RegExp( `^(/${ localeRegexString })?/read/search` ) );
 
 	const classes = {
 		[ 'is-group-' + sectionGroup ]: sectionGroup,
 		[ 'is-section-' + sectionName ]: sectionName,
 		'focus-content': true,
-		'has-header-section': headerSection,
+		'has-header-section': renderHeaderSection,
 		'has-no-sidebar': ! secondary,
 		'has-no-masterbar': masterbarIsHidden,
 		'is-jetpack-login': isJetpackLogin,
@@ -161,7 +167,9 @@ const LayoutLoggedOut = ( {
 			<BodySectionCssClass group={ sectionGroup } section={ sectionName } bodyClass={ bodyClass } />
 			<div className="layout__header-section">
 				{ masterbar }
-				{ headerSection && <div className="layout__header-section-content">{ headerSection }</div> }
+				{ renderHeaderSection && (
+					<div className="layout__header-section-content">{ renderHeaderSection() }</div>
+				) }
 			</div>
 			{ isJetpackCloud() && (
 				<AsyncLoad require="calypso/jetpack-cloud/style" placeholder={ null } />

client/reader/search-stream/suggestion.jsx

@@ -1,3 +1,4 @@
+import { retrieveLocaleFromPathLocaleInFront } from '@automattic/i18n-utils';
 import PropTypes from 'prop-types';
 import { stringify } from 'qs';
 import { Component } from 'react';
@@ -35,8 +36,11 @@ export class Suggestion extends Component {
 			q: suggestion,
 			sort,
 		};
+		const localeFromPath = retrieveLocaleFromPathLocaleInFront( window.location.pathname );
 
-		const searchUrl = '/read/search?' + stringify( args );
+		const searchUrl = localeFromPath
+			? `/${ localeFromPath }/read/search?${ stringify( args ) }`
+			: `/read/search?${ stringify( args ) }`;
 
 		return (
 			<a onClick={ this.handleSuggestionClick } href={ searchUrl }>

client/reader/search/controller.js

@@ -56,7 +56,7 @@ const exported = {
 		function reportSortChange( newSort ) {
 			replaceSearchUrl( searchSlug, newSort !== 'relevance' ? newSort : undefined );
 		}
-		context.headerSection = renderHeaderSection();
+		context.renderHeaderSection = renderHeaderSection;
 
 		context.primary = (
 			<AsyncLoad

client/reader/search/index.js

@@ -1,5 +1,7 @@
+import { getLanguageRouteParam, removeLocaleFromPathLocaleInFront } from '@automattic/i18n-utils';
 import page from 'page';
 import { makeLayout, render as clientRender } from 'calypso/controller';
+import { setLocaleMiddleware } from 'calypso/controller/shared';
 import { sidebar, updateLastRoute } from 'calypso/reader/controller';
 import { isUserLoggedIn } from 'calypso/state/current-user/selectors';
 import { fetchTrendingTags } from '../tags/controller';
@@ -12,12 +14,24 @@ const fetchTrendingTagsIfLoggedOut = ( context, next ) => {
 	next();
 };
 
+const redirectLoggedInUrl = ( context, next ) => {
+	if ( isUserLoggedIn( context.store.getState() ) ) {
+		const pathWithoutLocale = removeLocaleFromPathLocaleInFront( context.path );
+		if ( pathWithoutLocale !== context.path ) {
+			return page.redirect( pathWithoutLocale );
+		}
+	}
+	next();
+};
 export default function () {
+	const langParam = getLanguageRouteParam();
 	// Old recommendations page
 	page( '/recommendations', '/read/search' );
 
 	page(
-		'/read/search',
+		[ '/read/search', `/${ langParam }/read/search` ],
+		redirectLoggedInUrl,
+		setLocaleMiddleware(),
 		fetchTrendingTagsIfLoggedOut,
 		updateLastRoute,
 		sidebar,

client/reader/stats.js

@@ -1,3 +1,4 @@
+import { localeRegexString } from '@automattic/i18n-utils';
 import debugFactory from 'debug';
 import { pick } from 'lodash';
 import { gaRecordEvent } from 'calypso/lib/analytics/ga';
@@ -77,7 +78,7 @@ function getLocation( path ) {
 	if ( path.indexOf( '/read/recommendations/posts' ) === 0 ) {
 		return 'recommended_posts';
 	}
-	if ( path.indexOf( '/read/search' ) === 0 ) {
+	if ( path.match( new RegExp( `^(/${ localeRegexString })?/read/search` ) ) ) {
 		return 'search';
 	}
 	if ( path.indexOf( '/read/conversations/a8c' ) === 0 ) {

client/reader/tag-stream/controller.js

@@ -35,7 +35,7 @@ export const tagListing = ( context, next ) => {
 	} );
 
 	if ( ! isUserLoggedIn( context.store.getState() ) ) {
-		context.headerSection = renderHeaderSection();
+		context.renderHeaderSection = renderHeaderSection;
 	}
 	context.primary = (
 		<>

client/reader/tags/controller.tsx

@@ -29,7 +29,7 @@ export interface AlphabeticTagsResult {
 
 export const tagsListing = ( context: PageJSContext, next: () => void ) => {
 	if ( ! isUserLoggedIn( context.store.getState() ) ) {
-		context.headerSection = renderHeaderSection();
+		context.renderHeaderSection = renderHeaderSection;
 	}
 	context.primary = (
 		<>
@@ -64,16 +64,16 @@ export const fetchTrendingTags = ( context: PageJSContext, next: ( e?: Error ) =
 	}
 	performanceMark( context as PartialContext, 'fetchTrendingTags' );
 
-	const currentUserLocale = getCurrentUserLocale( context.store.getState() );
+	const localeSlug = getCurrentUserLocale( context.store.getState() ) || context.lang;
 
 	context.queryClient
 		.fetchQuery(
-			[ 'trending-tags', currentUserLocale ?? '' ],
+			[ 'trending-tags', localeSlug ?? '' ],
 			() => {
 				return wpcom.req.get( '/read/trending/tags', {
 					apiVersion: '1.2',
 					count: '6',
-					lang: currentUserLocale, // Note: undefined will be omitted by the query string builder.
+					lang: localeSlug, // Note: undefined will be omitted by the query string builder.
 				} );
 			},
 			{ staleTime: 86400000 } // 24 hours

client/sections.js

@@ -360,7 +360,7 @@ const sections = [
 	},
 	{
 		name: 'reader',
-		paths: [ '/read/search', '/recommendations' ],
+		paths: [ '/read/search', '/([a-z]{2,3}|[a-z]{2}-[a-z]{2})/read/search', '/recommendations' ],
 		module: 'calypso/reader/search',
 		group: 'reader',
 		enableLoggedOut: true,

client/state/data-layer/wpcom/read/streams/index.js

@@ -1,4 +1,5 @@
 import warn from '@wordpress/warning';
+import i18n from 'i18n-calypso';
 import { random, map, includes, get } from 'lodash';
 import { getDiscoverStreamTags } from 'calypso/reader/discover/helper';
 import { keyForPost } from 'calypso/reader/post-key';
@@ -329,14 +330,16 @@ export function requestPage( action ) {
 	// eslint-disable-next-line no-extra-boolean-cast
 	const number = !! gap ? PER_GAP : fetchCount;
 
+	const lang = i18n.getLocaleSlug();
+
 	return http( {
 		method: 'GET',
 		path: path( { ...action.payload } ),
 		apiVersion,
 		apiNamespace: api.apiNamespace ?? null,
 		query: isPoll
 			? pollQuery( [], { ...algorithm } )
-			: query( { ...pageHandle, ...algorithm, number }, action.payload ),
+			: query( { ...pageHandle, ...algorithm, number, lang }, action.payload ),
 		onSuccess: action,
 		onFailure: action,
 	} );

client/state/data-layer/wpcom/read/streams/test/index.js

@@ -24,6 +24,7 @@ describe( 'streams', () => {
 			meta: QUERY_META,
 			number: INITIAL_FETCH,
 			content_width: 675,
+			lang: 'en',
 		};
 
 		it( 'should return an http request', () => {
@@ -143,6 +144,7 @@ describe( 'streams', () => {
 						query: {
 							sort: 'date',
 							q: 'foo',
+							lang: 'en',
 							number: INITIAL_FETCH,
 							content_width: 675,
 						},
@@ -157,6 +159,7 @@ describe( 'streams', () => {
 						query: {
 							sort: 'relevance',
 							q: 'foo:bar',
+							lang: 'en',
 							number: INITIAL_FETCH,
 							content_width: 675,
 						},

packages/i18n-utils/src/utils.ts

@@ -5,13 +5,17 @@ import i18n, { getLocaleSlug } from 'i18n-calypso';
 import { find, map, pickBy, includes } from 'lodash';
 
 /**
+ * This regex is defined as a string so that it can be combined with other regexes.
+ *
  * a locale can consist of three component
  * aa: language code
  * -bb: regional code
  * _cc: variant suffix
  * while the language code is mandatory, the other two are optional.
  */
-const localeRegex = /^[A-Z]{2,3}(-[A-Z]{2,3})?(_[A-Z]{2,6})?$/i;
+export const localeRegexString = '[a-zA-Z]{2,3}(-[a-zA-Z]{2,3})?(_[a-zA-Z]{2,6})?';
+
+const localeOnlyRegex = new RegExp( '^' + localeRegexString + '$' );
 
 export function getPathParts( path: string ) {
 	// Remove trailing slash then split. If there is a trailing slash,
@@ -124,9 +128,9 @@ export function getLanguageRouteParam( name = 'lang', optional = true ) {
  */
 export function getLanguage( langSlug: string | undefined ): Language | undefined {
 	langSlug = getMappedLanguageSlug( langSlug );
-	if ( langSlug && localeRegex.test( langSlug ) ) {
+	if ( langSlug && localeOnlyRegex.test( langSlug ) ) {
 		// Find for the langSlug first. If we can't find it, split it and find its parent slug.
-		// Please see the comment above `localeRegex` to see why we can split by - or _ and find the parent slug.
+		// Please see the comment above `localeOnlyRegex` to see why we can split by - or _ and find the parent slug.
 		return ( find( languages, { langSlug } ) ||
 			find( languages, { langSlug: langSlug.split( /[-_]/ )[ 0 ] } ) ) as Language | undefined;
 	}