From a115a4d39238bba2cb1bab023a7483962e6f3fc5 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Wed, 29 Aug 2018 01:25:25 +0200 Subject: [PATCH 1/5] Boot: Don't render empty Layout --- client/boot/project/wordpress-com.js | 71 ++++++++++------------------ 1 file changed, 25 insertions(+), 46 deletions(-) diff --git a/client/boot/project/wordpress-com.js b/client/boot/project/wordpress-com.js index 60a305e083804..31c7077772480 100644 --- a/client/boot/project/wordpress-com.js +++ b/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 From 4c99b20b059929105407e5d29435f5d11cac21b3 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Mon, 1 Oct 2018 14:41:53 -0400 Subject: [PATCH 2/5] Framework: Don't auto-inject page.js' onClick handler --- client/boot/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/boot/app.js b/client/boot/app.js index 5db2d2ccf43f1..a98ee6b7e118b 100644 --- a/client/boot/app.js +++ b/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 } ); } ); }; From 1bcdcf14c54393f876ab8a2dc90b579095227362 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Tue, 2 Oct 2018 15:31:47 -0400 Subject: [PATCH 3/5] Layout: Manually add page.js' onClick handler --- client/layout/index.jsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/client/layout/index.jsx b/client/layout/index.jsx index 03196f97ac61c..5466969fbe682 100644 --- a/client/layout/index.jsx +++ b/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,10 @@ class Layout extends Component { colorSchemePreference: PropTypes.string, }; + pageHandler = e => { + page.onclick( e.nativeEvent ); + }; + render() { const sectionClass = classnames( 'layout', @@ -78,7 +83,7 @@ class Layout extends Component { } ); return ( -
+
From f8fc16019e94cc48fb0d4bdaabaccf6c961296b1 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Wed, 31 Oct 2018 15:09:05 +0100 Subject: [PATCH 4/5] Install the page.clickHandler on the root layout element --- client/layout/index.jsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/client/layout/index.jsx b/client/layout/index.jsx index 5466969fbe682..b7e3e75751a29 100644 --- a/client/layout/index.jsx +++ b/client/layout/index.jsx @@ -60,9 +60,10 @@ class Layout extends Component { colorSchemePreference: PropTypes.string, }; - pageHandler = e => { - page.onclick( e.nativeEvent ); - }; + // Intercepts 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( @@ -83,7 +84,8 @@ class Layout extends Component { } ); return ( -
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions +
From e5b64d25e4c9b15d7d07f167532b174b7728abe3 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Fri, 2 Nov 2018 14:59:57 +0100 Subject: [PATCH 5/5] 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. --- client/boot/common.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/client/boot/common.js b/client/boot/common.js index cf1989e60c1d7..f173626923600 100644 --- a/client/boot/common.js +++ b/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 ) => {