Themes: Add theme-details Redux subtree and data fetcher component

client/components/data/current-theme/index.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import React from 'react';
-import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import omit from 'lodash/object/omit';
 
@@ -65,5 +64,5 @@ export default connect(
 			currentTheme: getCurrentTheme( state, props.site.ID )
 		}
 	),
-	bindActionCreators.bind( null, { fetchCurrentTheme } )
+	{ fetchCurrentTheme }
 )( CurrentThemeData );

client/components/data/theme-details/README.md

@@ -0,0 +1,9 @@
+ThemeDetailsData
+================
+
+A component to decouple the fetching of a theme's details from any rendering.
+
+## Usage
+
+A child component wrapped with `<ThemeDetailsData />` will be passed the prop
+`themeDetails`, a theme object.

client/components/data/theme-details/index.js

@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { connect } from 'react-redux';
+import omit from 'lodash/object/omit';
+
+/**
+ * Internal dependencies
+ */
+import { fetchThemeDetails } from 'state/themes/actions';
+import { getThemeDetails } from 'state/themes/theme-details/selectors';
+
+/**
+ * Fetches details for a theme specified by its ID
+ * and passes it to the supplied child component.
+ */
+const ThemeDetailsData = React.createClass( {
+
+	propTypes: {
+		children: React.PropTypes.element.isRequired,
+		id: React.PropTypes.string.isRequired,
+		// Connected props
+		name: React.PropTypes.string,
+		author: React.PropTypes.string,
+		fetchThemeDetails: React.PropTypes.func.isRequired
+	},
+
+	componentDidMount() {
+		this.refresh( this.props );
+	},
+
+	componentWillReceiveProps( nextProps ) {
+		if ( nextProps.id && nextProps.id !== this.props.id ) {
+			this.refresh( nextProps );
+		}
+	},
+
+	refresh( props ) {
+		if ( ! this.props.name && props.id ) {
+			this.props.fetchThemeDetails( props.id );
+		}
+	},
+
+	render() {
+		return React.cloneElement( this.props.children, omit( this.props, 'children' ) );
+	}
+} );
+
+export default connect(
+	( state, props ) => Object.assign( {},
+		props,
+		getThemeDetails( state, props.id )
+	),
+	{ fetchThemeDetails }
+)( ThemeDetailsData );

client/components/data/themes-list-fetcher/index.jsx

@@ -5,7 +5,6 @@ import React from 'react';
 import omit from 'lodash/object/omit';
 import once from 'lodash/function/once';
 import filter from 'lodash/collection/filter';
-import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
 /**
@@ -148,5 +147,5 @@ export default connect(
 			}
 		}
 	),
-	bindActionCreators.bind( null, { query, fetchNextPage } )
+	{ query, fetchNextPage }
 )( ThemesListFetcher );

client/lib/wpcom-undocumented/lib/undocumented.js

@@ -1469,13 +1469,21 @@ Undocumented.prototype.themes = function( site, query, fn ) {
 	}, fn );
 };
 
+Undocumented.prototype.themeDetails = function( themeId, fn ) {
+	debug( '/themes/:theme_id' );
+	this.wpcom.req.get( {
+		apiVersion: '1.1',
+		path: '/themes/' + themeId
+	}, fn );
+};
+
 Undocumented.prototype.activeTheme = function( siteId, fn ) {
-	debug( '/site/:site_id/themes/mine' );
+	debug( '/sites/:site_id/themes/mine' );
 	this.wpcom.req.get( { path: '/sites/' + siteId + '/themes/mine' }, fn );
 };
 
 Undocumented.prototype.activateTheme = function( theme, siteId, fn ) {
-	debug( '/site/:site_id/themes/mine' );
+	debug( '/sites/:site_id/themes/mine' );
 	this.wpcom.req.post( {
 		path: '/sites/' + siteId + '/themes/mine',
 		body: { theme: theme.id }

client/state/themes/README.md

@@ -7,6 +7,10 @@ Contains reducers, selectors, and action creators for themes, and the theme show
 
 Manages data concerning each site's currently selected theme.
 
+### theme-details/
+
+Provides details for a theme given its ID.
+
 ### themes-last-query/
 
 Tracks the last themes query.

client/state/themes/action-types.js

@@ -10,6 +10,7 @@ export default keyMirror( {
 	RECEIVE_THEMES_SERVER_ERROR: null,
 	INCREMENT_THEMES_PAGE: null,
 	RECEIVE_CURRENT_THEME: null,
+	RECEIVE_THEME_DETAILS: null,
 	PREVIEW_THEME: null,
 	PURCHASE_THEME: null,
 	ACTIVATE_THEME: null,

client/state/themes/actions.js

@@ -75,6 +75,25 @@ export function fetchCurrentTheme( site ) {
 	};
 }
 
+export function fetchThemeDetails( id ) {
+	return dispatch => {
+		const callback = ( error, data ) => {
+			debug( 'Received theme details', data );
+			if ( error ) {
+				dispatch( receiveServerError( error ) );
+			} else {
+				dispatch( {
+					type: ActionTypes.RECEIVE_THEME_DETAILS,
+					themeId: data.id,
+					themeName: data.name,
+					themeAuthor: data.author
+				} );
+			}
+		};
+		wpcom.undocumented().themeDetails( id, callback );
+	}
+}
+
 export function receiveServerError( error ) {
 	return {
 		type: ActionTypes.RECEIVE_THEMES_SERVER_ERROR,

client/state/themes/current-theme/reducer.js

@@ -2,12 +2,12 @@
  * External dependencies
  */
 import { fromJS } from 'immutable';
-import { DESERIALIZE, SERIALIZE } from 'state/action-types';
 
 /**
  * Internal dependencies
  */
 import ActionTypes from '../action-types';
+import { DESERIALIZE, SERIALIZE } from 'state/action-types';
 
 export const initialState = fromJS( {
 	isActivating: false,

client/state/themes/reducer.js

@@ -7,12 +7,14 @@ import { combineReducers } from 'redux';
  * Internal dependencies
  */
 import themes from './themes/reducer';
+import themeDetails from './theme-details/reducer';
 import themesList from './themes-list/reducer';
 import themesLastQuery from './themes-last-query/reducer';
 import currentTheme from './current-theme/reducer';
 
 export default combineReducers( {
 	themes,
+	themeDetails,
 	themesList,
 	themesLastQuery,
 	currentTheme

client/state/themes/theme-details/Makefile

@@ -0,0 +1,13 @@
+UI ?= bdd
+REPORTER ?= spec
+COMPILERS ?= js:babel/register
+NODE_BIN := $(shell npm bin)
+MOCHA ?= $(NODE_BIN)/mocha
+BASE_DIR := $(NODE_BIN)/../..
+NODE_PATH := test:$(BASE_DIR)/client
+
+# In order to simply stub modules, add test to the NODE_PATH
+test:
+	@NODE_ENV=test NODE_PATH=$(NODE_PATH) $(MOCHA) --compilers $(COMPILERS) --reporter $(REPORTER) --ui $(UI)
+
+.PHONY: test

client/state/themes/theme-details/reducer.js

@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+import { Map, fromJS } from 'immutable';
+
+/**
+ * Internal dependencies
+ */
+import ActionTypes from '../action-types';
+import { DESERIALIZE, SERIALIZE } from '../../action-types';
+
+export default ( state = Map(), action ) => {
+	switch ( action.type ) {
+		case ActionTypes.RECEIVE_THEME_DETAILS:
+			return state
+				.set( action.themeId, Map( {
+					name: action.themeName,
+					author: action.themeAuthor
+				} ) )
+		case DESERIALIZE:
+			return fromJS( state );
+		case SERIALIZE:
+			return state.toJS();
+	}
+	return state;
+};

client/state/themes/theme-details/selectors.js

@@ -0,0 +1,3 @@
+export function getThemeDetails( state, id ) {
+	return state.themes.themeDetails.get( id ).toJS();
+}

client/state/themes/theme-details/test/reducer.js

@@ -0,0 +1,80 @@
+/**
+ * External dependencies
+ */
+import { expect } from 'chai';
+import { Map, fromJS } from 'immutable';
+
+/**
+ * Internal dependencies
+ */
+import { RECEIVE_THEME_DETAILS } from '../../action-types';
+import { DESERIALIZE, SERIALIZE } from '../../../action-types';
+import reducer from '../reducer';
+
+describe( 'reducer', () => {
+	it( 'should default to an empty Immutable Map', () => {
+		const state = reducer( undefined, {} );
+
+		expect( state.toJS() ).to.be.empty;
+	} );
+
+	it( 'should set theme details for the given ID', () => {
+		const state = reducer( undefined, {
+			type: RECEIVE_THEME_DETAILS,
+			themeId: 'mood',
+			themeName: 'Mood',
+			themeAuthor: 'Automattic'
+		} );
+
+		expect( state.get( 'mood' ).toJS() ).to.eql( {
+			name: 'Mood',
+			author: 'Automattic'
+		} );
+	} );
+
+	describe( 'persistence', () => {
+		const initialState = Map();
+
+		it( 'persists state and converts to a plain JS object', () => {
+			const jsObject = Object.freeze( {
+				mood: {
+					name: 'Mood',
+					author: 'Automattic'
+				}
+			} );
+			const state = fromJS( jsObject );
+			const persistedState = reducer( state, { type: SERIALIZE } );
+			expect( persistedState ).to.eql( jsObject );
+		} );
+		it( 'loads valid persisted state and converts to immutable.js object', () => {
+			const jsObject = Object.freeze( {
+				mood: {
+					name: 'Mood',
+					author: 'Automattic'
+				}
+			} );
+			const state = reducer( jsObject, { type: DESERIALIZE } );
+			expect( state ).to.eql( fromJS( jsObject ) );
+		} );
+
+		it.skip( 'should ignore loading data with invalid keys ', () => {
+			const jsObject = Object.freeze( {
+				missingKey: true,
+				mood: {
+					name: 'Mood',
+					author: 'Automattic'
+				}
+			} );
+			const state = reducer( jsObject, { type: DESERIALIZE } );
+			expect( state ).to.eql( initialState );
+		} );
+
+		it.skip( 'should ignore loading data with invalid values ', () => {
+			const jsObject = Object.freeze( {
+				mood: 'foo',
+			} );
+			const state = reducer( jsObject, { type: DESERIALIZE } );
+			expect( state ).to.eql( initialState );
+		} );
+	} );
+} );

client/state/themes/theme-details/test/selectors.js

@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import { expect } from 'chai';
+import { Map } from 'immutable';
+
+/**
+ * Internal dependencies
+ */
+import { getThemeDetails } from '../selectors';
+
+describe( 'selectors', () => {
+	describe( '#getThemeDetails()', () => {
+		it( 'should return details for a theme given its ID', () => {
+			const details = getThemeDetails( {
+				themes: {
+					themeDetails: Map( {
+						mood: Map( {
+							name: 'Mood',
+							author: 'Automattic'
+						} )
+					} )
+				}
+			}, 'mood' );
+
+			expect( details ).to.eql( { name: 'Mood', author: 'Automattic' } );
+		} );
+	} );
+} );