Boot: Don't render empty Layout (#26944)

* Boot: Don't render empty Layout

* Framework: Don't auto-inject page.js' onClick handler

* Layout: Manually add page.js' onClick handler

* Install the page.clickHandler on the root layout element

* Render empty layout for logged out home page

Makes e2e tests happy, should eventually be replaced with some more systematic approach
to how to handle logged-out pages and redirects to login page.

Co-authored-by: ockham
Co-authored-by: jsnajdr

Author: ockham

client/boot/app.js

@@ -33,7 +33,7 @@ const boot = currentUser => {
 		setupMiddlewares( currentUser, reduxStore );
 		invoke( project, 'setupMiddlewares', currentUser, reduxStore );
 		detectHistoryNavigation.start();
-		page.start( { decodeURLComponents: false } );
+		page.start( { click: false, decodeURLComponents: false } );
 	} );
 };
 

client/boot/common.js

@@ -26,6 +26,7 @@ import { getSections } from 'sections-helper';
 import { checkFormHandler } from 'lib/protect-form';
 import notices from 'notices';
 import authController from 'auth/controller';
+import { makeLayout, render as clientRender } from 'controller';
 
 const debug = debugFactory( 'calypso' );
 
@@ -102,9 +103,10 @@ const loggedOutMiddleware = currentUser => {
 			}
 		} );
 	} else if ( config.isEnabled( 'devdocs/redirect-loggedout-homepage' ) ) {
-		page( '/', () => {
-			page.redirect( '/devdocs/start' );
-		} );
+		page( '/', '/devdocs/start' );
+	} else {
+		// render an empty layout with masterbar links for logged-out home page
+		page( '/', makeLayout, clientRender );
 	}
 
 	const validSections = getSections().reduce( ( acc, section ) => {

client/boot/project/wordpress-com.js

@@ -3,8 +3,6 @@
  * External dependencies
  */
 import { startsWith } from 'lodash';
-import React from 'react';
-import ReactDom from 'react-dom';
 import store from 'store';
 import page from 'page';
 import debugFactory from 'debug';
@@ -31,22 +29,9 @@ import { setNextLayoutFocus, activateNextLayoutFocus } from 'state/ui/layout-foc
 import Logger from 'lib/catch-js-errors';
 import setupMySitesRoute from 'my-sites';
 import setupGlobalKeyboardShortcuts from 'lib/keyboard-shortcuts/global';
-import * as controller from 'controller';
 
 const debug = debugFactory( 'calypso' );
 
-function renderLayout( reduxStore ) {
-	const Layout = controller.ReduxWrappedLayout;
-
-	const layoutElement = React.createElement( Layout, {
-		store: reduxStore,
-	} );
-
-	ReactDom.render( layoutElement, document.getElementById( 'wpcom' ) );
-
-	debug( 'Main layout rendered.' );
-}
-
 export const configureReduxStore = ( currentUser, reduxStore ) => {
 	debug( 'Executing WordPress.com configure Redux store.' );
 
@@ -74,38 +59,32 @@ export function setupMiddlewares( currentUser, reduxStore ) {
 		analytics.setSuperProps( superProps );
 	}
 
-	// Render Layout only for non-isomorphic sections.
-	// Isomorphic sections will take care of rendering their Layout last themselves.
-	if ( ! document.getElementById( 'primary' ) ) {
-		renderLayout( reduxStore );
-
-		if ( config.isEnabled( 'catch-js-errors' ) ) {
-			const errorLogger = new Logger();
-			//Save errorLogger to a singleton for use in arbitrary logging.
-			require( 'lib/catch-js-errors/log' ).registerLogger( errorLogger );
-			//Save data to JS error logger
-			errorLogger.saveDiagnosticData( {
-				user_id: currentUser.get().ID,
-				calypso_env: config( 'env_id' ),
-			} );
-			errorLogger.saveDiagnosticReducer( function() {
-				const state = reduxStore.getState();
-				return {
-					blog_id: getSelectedSiteId( state ),
-					calypso_section: getSectionName( state ),
-				};
-			} );
-			errorLogger.saveDiagnosticReducer( () => ( { tests: getSavedVariations() } ) );
-			analytics.on( 'record-event', ( eventName, eventProperties ) =>
-				errorLogger.saveExtraData( { lastTracksEvent: eventProperties } )
+	if ( config.isEnabled( 'catch-js-errors' ) && ! document.getElementById( 'primary' ) ) {
+		const errorLogger = new Logger();
+		//Save errorLogger to a singleton for use in arbitrary logging.
+		require( 'lib/catch-js-errors/log' ).registerLogger( errorLogger );
+		//Save data to JS error logger
+		errorLogger.saveDiagnosticData( {
+			user_id: currentUser.get().ID,
+			calypso_env: config( 'env_id' ),
+		} );
+		errorLogger.saveDiagnosticReducer( function() {
+			const state = reduxStore.getState();
+			return {
+				blog_id: getSelectedSiteId( state ),
+				calypso_section: getSectionName( state ),
+			};
+		} );
+		errorLogger.saveDiagnosticReducer( () => ( { tests: getSavedVariations() } ) );
+		analytics.on( 'record-event', ( eventName, eventProperties ) =>
+			errorLogger.saveExtraData( { lastTracksEvent: eventProperties } )
+		);
+		page( '*', function( context, next ) {
+			errorLogger.saveNewPath(
+				context.canonicalPath.replace( getSiteFragment( context.canonicalPath ), ':siteId' )
 			);
-			page( '*', function( context, next ) {
-				errorLogger.saveNewPath(
-					context.canonicalPath.replace( getSiteFragment( context.canonicalPath ), ':siteId' )
-				);
-				next();
-			} );
-		}
+			next();
+		} );
 	}
 
 	// If `?sb` or `?sp` are present on the path set the focus of layout

client/layout/index.jsx

@@ -7,6 +7,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
+import page from 'page';
 
 /**
  * Internal dependencies
@@ -59,6 +60,11 @@ class Layout extends Component {
 		colorSchemePreference: PropTypes.string,
 	};
 
+	// Intercepts <a href> clicks in the document and passes them to the `page` router to handle.
+	// If the link is internal to Calypso, the router will handle the navigation with `pushState`
+	// instead of letting the browser reload the whole app by performing a classic navigation.
+	pageClickHandler = e => page.clickHandler( e.nativeEvent );
+
 	render() {
 		const sectionClass = classnames(
 				'layout',
@@ -78,7 +84,8 @@ class Layout extends Component {
 			} );
 
 		return (
-			<div className={ sectionClass }>
+			// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+			<div className={ sectionClass } onClick={ this.pageClickHandler }>
 				<DocumentHead />
 				<QuerySites primaryAndRecent />
 				<QuerySites allSites />