Themes: Move logged out layout setup to controller

Moved most /design specific handling out of client/boot/index.js so
that other logged out routes will work as normal.

Layout parameters are being passed to the layout component via
setState(), which could be causing the problems with React failing
to reconcile that component with the server-rendered version.

client/boot/index.js

@@ -11,7 +11,6 @@ var React = require( 'react' ),
 	page = require( 'page' ),
 	url = require( 'url' ),
 	qs = require( 'querystring' ),
-	partialRight = require( 'lodash/function/partialRight' ),
 	injectTapEventPlugin = require( 'react-tap-event-plugin' );
 
 /**
@@ -172,28 +171,14 @@ function boot() {
 	} else {
 		if ( config.isEnabled( 'oauth' ) ) {
 			LoggedOutLayout = require( 'layout/logged-out-oauth' );
-		} else {
+		} else if ( startsWith( window.location.pathname, '/design' ) ) {
 			LoggedOutLayout = require( 'layout/themes-logged-out' );
+		} else {
+			LoggedOutLayout = require( 'layout/logged-out' );
 		}
-
-		const themesLoggedOutLayoutComponent = require( 'layout/themes-logged-out' );
-		const themesComponent = require( 'my-sites/themes/themes-selection' );
-		const	getButtonOptions = require( 'my-sites/themes/theme-options' );
-		const themesLoggedOutLayout = React.createFactory( themesLoggedOutLayoutComponent );
-		const themes = React.createFactory( themesComponent );
-
 		layout = React.render(
-			React.createElement( LoggedOutLayout, {
-					section: 'themes',
-					primary: themes( {
-						getOptions: partialRight( getButtonOptions, () => {}, () => {} ),
-						sites: false,
-						setSelectedTheme: () => {},
-						togglePreview: () => {},
-					} ),
-					secondary: null,
-					tertiary: null
-				} ), document.getElementById( 'wpcom' )
+			React.createElement( LoggedOutLayout ),
+			document.getElementById( 'wpcom' )
 		);
 	}
 

shared/layout/themes-logged-out.jsx

@@ -16,26 +16,28 @@ var  Masterbar = require( './masterbar' ),
 var ThemesLoggedOutLayout = React.createClass( {
 	getInitialState: function() {
 		return {
-			section: undefined
+			section: this.props.section,
+			primary: this.props.primary,
+			tertiary: this.props.tertiary
 		};
 	},
 
 
 	render: function() {
-		var sectionClass = 'wp' + ( this.state.section || this.props.section ? ' is-section-' + this.state.section || this.props.section : '' );
+		var sectionClass = 'wp' + ( this.state.section ? ' is-section-' + this.state.section : '' );
 
 		return (
 						<div className={ sectionClass }>
 							<Masterbar />
 							<div id="content" className="wp-content">
 								<div id="primary" className="wp-primary wp-section">
 									<Main className="themes">
-									{ this.props.primary }
+									{ this.state.primary }
 									</Main>
 								</div>
 							</div>
 							<div id="tertiary" className="wp-overlay fade-background">
-								{ this.props.tertiary }
+								{ this.state.tertiary }
 							</div>
 						</div>
 		);

shared/my-sites/themes/controller.js

@@ -2,7 +2,8 @@
  * External Dependencies
  */
 var React = require( 'react' ),
-	titlecase = require( 'to-title-case' );
+	titlecase = require( 'to-title-case' ),
+	partialRight = require( 'lodash/function/partialRight' );
 
 /**
  * Internal Dependencies
@@ -54,7 +55,30 @@ var controller = {
 			} ),
 			document.getElementById( 'primary' )
 		);
+	},
+
+	themesLoggedOut: function( context ) {
+		const themesComponent = require( 'my-sites/themes/themes-selection' );
+		const getButtonOptions = require( 'my-sites/themes/theme-options' );
+		const themes = React.createFactory( themesComponent );
+
+		const themesProps = {
+			section: 'themes',
+			primary: themes( {
+				getOptions: partialRight( getButtonOptions, () => {}, () => {} ),
+				sites: false,
+				setSelectedTheme: () => {},
+				togglePreview: () => {},
+				secondary: null,
+				tertiary: null
+			})
+		};
+
+		// TODO: use a layout store instead of setting the state
+		context.layout.setState( themesProps );
 	}
 };
 
+
+
 module.exports = controller;

shared/my-sites/themes/index.js

@@ -17,12 +17,13 @@ const routing = {
 		{ value: '/design/:site_id', enableLoggedOut: false },
 		{ value: '/design/type/:tier/:site_id', enableLoggedOut: false },
 		{ value: '/design/type/:tier', enableLoggedOut: true },
-		{ value: '/design', enableLoggedOut: false },
+		{ value: '/design', enableLoggedOut: true },
 	],
 	middlewares: [
 		{ value: controller.navigation, enableLoggedOut: false },
 		{ value: controller.siteSelection, enableLoggedOut: false },
-		{ value: themesController.themes, enableLoggedOut: true },
+		{ value: themesController.themes, enableLoggedOut: false },
+		{ value: themesController.themesLoggedOut, enableLoggedOut: true }
 	]
 };