function renderThemeSheet( theme ) {
const context = {};
const store = createReduxStore();
store.dispatch( {
type: ThemesActionTypes.RECEIVE_THEME_DETAILS,
themeId: theme.id,
themeName: theme.name,
themeAuthor: theme.author,
themeScreenshot: theme.screenshot,
themePrice: theme.price ? theme.price.display : undefined,
themeDescription: theme.description,
themeDescriptionLong: theme.description_long,
themeSupportDocumentation: theme.extended ? theme.extended.support_documentation : undefined,
} );
store.dispatch( setSection( 'themes', { hasSidebar: false, isFullScreen: true } ) );
context.initialReduxState = pick( store.getState(), 'ui', 'themes' );
const primary = <ThemeDetails id={ theme.id }><ThemeSheet /></ThemeDetails>;
const element = (
<ReduxProvider store={ store }>
<LayoutLoggedOut primary={ primary } />
</ReduxProvider>
);
const path = url.parse( req.url ).path;
const key = JSON.stringify( element ) + path + JSON.stringify( context.initialReduxState );
Object.assign( context, render( element, key ) );
return context;
};
function getDefaultContext( request ) {
var context = Object.assign( {}, request.context, {
compileDebug: config( 'env' ) === 'development' ? true : false,
urls: generateStaticUrls( request ),
user: false,
env: CALYPSO_ENV,
sanitize: sanitize,
isRTL: config( 'rtl' ),
isDebug: request.query.debug !== undefined ? true : false,
badge: false,
lang: config( 'i18n_default_locale_slug' ),
jsFile: 'build',
faviconURL: '//s1.wp.com/i/favicon.ico',
isFluidWidth: !! config.isEnabled( 'fluid-width' ),
abTestHelper: !! config.isEnabled( 'dev/test-helper' ),
devDocsURL: '/devdocs',
store: createReduxStore()
} );
context.app = {
// use ipv4 address when is ipv4 mapped address
clientIp: request.ip ? request.ip.replace( '::ffff:', '' ) : request.ip,
isDebug: context.env === 'development' || context.isDebug,
tinymceWpSkin: context.urls[ 'tinymce/skins/wordpress/wp-content.css' ],
tinymceEditorCss: context.urls[ 'editor.css' ]
};
if ( CALYPSO_ENV === 'wpcalypso' ) {
context.badge = CALYPSO_ENV;
context.devDocs = true;
context.feedbackURL = 'https://github.com/Automattic/wp-calypso/issues/';
context.faviconURL = '/calypso/images/favicons/favicon-wpcalypso.ico';
}
if ( CALYPSO_ENV === 'horizon' ) {
context.badge = 'feedback';
context.feedbackURL = 'https://horizonfeedback.wordpress.com/';
context.faviconURL = '/calypso/images/favicons/favicon-horizon.ico';
}
if ( CALYPSO_ENV === 'stage' ) {
context.badge = 'staging';
context.feedbackURL = 'https://github.com/Automattic/wp-calypso/issues/';
context.faviconURL = '/calypso/images/favicons/favicon-staging.ico';
}
if ( CALYPSO_ENV === 'development' ) {
context.badge = 'dev';
context.devDocs = true;
context.feedbackURL = 'https://github.com/Automattic/wp-calypso/issues/';
context.faviconURL = '/calypso/images/favicons/favicon-development.ico';
context.branchName = getCurrentBranchName();
context.commitChecksum = getCurrentCommitShortChecksum();
}
return context;
}
// TODO: Maybe merge into getDefaultContext().
function getEnhancedContext( req ) {
return Object.assign( {}, req.context, {
isLoggedIn: req.cookies.wordpress_logged_in,
isServerSide: true,
path: req.url,
pathname: req.path,
params: req.params,
query: req.query,
store: createReduxStore()
} );
}
function renderWithProps( props = defaultProps ) {
const container = document.createElement( 'div' );
const store = createReduxStore(),
dom = ReactDom.render(
<ReduxProvider store={ store }>
<DomainList { ...props } />
</ReduxProvider>,
container
);
return TestUtils.scryRenderedComponentsWithType( dom, DomainList )[ 0 ];
}
function renderWithProps( props = defaultProps ) {
const store = createReduxStore(),
dom = ReactDom.render(
<ReduxProvider store={ store }>
<DomainList
{ ...props }
/>
</ReduxProvider>,
useFakeDom.getContainer()
);
return TestUtils.scryRenderedComponentsWithType( dom, DomainList )[ 0 ];
}
test( 'initial state should serialize and deserialize without errors or warnings', () => {
const consoleErrorSpy = jest
.spyOn( global.console, 'error' )
.mockImplementation( () => () => {} );
const consoleWarnSpy = jest
.spyOn( global.console, 'warn' )
.mockImplementation( () => () => {} );
const initialState = createReduxStore().getState();
reducer( reducer( initialState, { type: SERIALIZE } ), { type: DESERIALIZE } );
expect( consoleErrorSpy ).not.toHaveBeenCalled();
expect( consoleWarnSpy ).not.toHaveBeenCalled();
} );
const loadInitialState = addSympathy( initialState => {
debug( 'loading initial state', initialState );
if ( initialState === null ) {
debug( 'no initial state found in localforage' );
initialState = {};
}
if ( initialState._timestamp && initialState._timestamp + MAX_AGE < Date.now() ) {
debug( 'stored state is too old, building redux store from scratch' );
initialState = {};
}
const localforageState = deserialize( initialState );
const serverState = getInitialServerState();
const mergedState = Object.assign( {}, localforageState, serverState );
return createReduxStore( mergedState );
} );
app.get( '/themes/:theme_slug', function( req, res ) {
const context = getDefaultContext( req );
if ( config.isEnabled( 'server-side-rendering' ) ) {
i18n.initialize();
const store = createReduxStore();
store.dispatch( setSection( 'themes', { hasSidebar: false, isFullScreen: true } ) );
context.initialReduxState = pick( store.getState(), 'ui' );
Object.assign( context, render( (
<ReduxProvider store={ store }>
<LayoutLoggedOutDesign store={ store } routeName={ 'themes' } match={ { theme_slug: req.params.theme_slug } } />
</ReduxProvider>
) ) );
}
res.render( 'index.jade', context );
} );
app.get( '/design(/type/:themeTier)?', function( req, res ) {
if ( req.cookies.wordpress_logged_in || ! config.isEnabled( 'manage/themes/logged-out' ) ) {
// the user is probably logged in
renderLoggedInRoute( req, res );
} else {
const context = getDefaultContext( req );
const tier = includes( [ 'all', 'free', 'premium' ], req.params.themeTier )
? req.params.themeTier
: 'all';
if ( config.isEnabled( 'server-side-rendering' ) ) {
const store = createReduxStore();
i18n.initialize();
store.dispatch( setSection( 'design', { hasSidebar: false } ) );
context.initialReduxState = pick( store.getState(), 'ui' );
Object.assign( context,
render( <LayoutLoggedOutDesign tier={ tier } store={ store } /> )
);
}
res.render( 'index.jade', context );
}
} );
function loadInitialStateFailed( error ) {
debug( 'failed to load initial redux-store state', error );
return createReduxStore();
}
return () => createReduxStore( getInitialServerState() );