Exporter: WP.com API integration

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

@@ -1806,6 +1806,51 @@ Undocumented.prototype.submitSupportForumsTopic = function( subject, message, fn
 	}, fn );
 };
 
+/**
+ * Get the available export configuration settings for a site
+ *
+ * @param {int}       siteId            The site ID
+ * @param {Object}    advancedSettings  Advanced export configuration
+ * @param {Function}  fn                The callback function
+ * @api public
+ */
+Undocumented.prototype.getExportSettings = function( siteId, fn ) {
+	this.wpcom.req.get( {
+		apiVersion: '1.1',
+		path: `/sites/${ siteId }/exports/settings`
+	}, fn );
+}
+
+/**
+ * Start an export
+ *
+ * @param {int}       siteId            The site ID
+ * @param {Object}    advancedSettings  Advanced export configuration
+ * @param {Function}  fn                The callback function
+ * @api public
+ */
+Undocumented.prototype.startExport = function( siteId, advancedSettings, fn ) {
+	this.wpcom.req.post( {
+		apiVersion: '1.1',
+		path: `/sites/${ siteId }/exports/start`
+	}, advancedSettings, fn );
+}
+
+/**
+ * Check the status of an export
+ *
+ * @param {int}       siteId            The site ID
+ * @param {Object}    exportId          Advanced export configuration
+ * @param {Function}  fn                The callback function
+ * @api public
+ */
+Undocumented.prototype.getExport = function( siteId, exportId, fn ) {
+	this.wpcom.req.get( {
+		apiVersion: '1.1',
+		path: `/sites/${ siteId }/exports/${ exportId }`
+	}, fn );
+}
+
 /**
  * Expose `Undocumented` module
  */

client/my-sites/exporter/advanced-settings.jsx

@@ -34,25 +34,41 @@ export default React.createClass( {
 			pages: this.translate( 'Pages' ),
 			feedback: this.translate( 'Feedback' )
 		};
+		const defaultLabels = {
+			author: this.translate( 'All Authors' ),
+			status: this.translate( 'All Statuses' ),
+			startDate: this.translate( 'Start Date…' ),
+			endDate: this.translate( 'End Date…' ),
+			category: this.translate( 'All Categories' )
+		}
+		let buildMenu = ( contentType, setting, optionList ) => {
+			return {
+				value: this.props[ contentType ][ setting ],
+				options: this.props.options[ contentType ][ optionList ],
+				defaultLabel: defaultLabels[ setting ],
+				onChange: ( e ) => this.props.onChangeSetting( contentType, setting, e.target.value )
+			};
+		};
 
 		const menus = {
 			posts: [
-				{ value: 0, options: [ this.translate( 'All Authors' ) ] },
-				{ value: 0, options: [ this.translate( 'All Statuses' ) ] },
-				{ value: 0, options: [ this.translate( 'Starting Date…' ) ] },
-				{ value: 0, options: [ this.translate( 'Ending Date…' ) ] },
-				{ value: 0, options: [ this.translate( 'All Categories' ) ] }
+				buildMenu( 'posts', 'author', 'authors' ),
+				buildMenu( 'posts', 'status', 'statuses' ),
+				buildMenu( 'posts', 'startDate', 'startDates' ),
+				buildMenu( 'posts', 'endDate', 'endDates' ),
+				buildMenu( 'posts', 'category', 'categories' )
 			],
 			pages: [
-				{ value: 0, options: [ this.translate( 'All Authors' ) ] },
-				{ value: 0, options: [ this.translate( 'All Statuses' ) ] },
-				{ value: 0, options: [ this.translate( 'Starting Date…' ) ] },
-				{ value: 0, options: [ this.translate( 'Ending Date…' ) ] }
+				buildMenu( 'pages', 'author', 'authors' ),
+				buildMenu( 'pages', 'status', 'statuses' ),
+				buildMenu( 'pages', 'startDate', 'startDates' ),
+				buildMenu( 'pages', 'endDate', 'endDates' ),
 			],
 			feedback: []
 		};
 
 		const buildOptionProps = key => ( {
+			isLoadingOptions: this.props.isLoadingOptions,
 			legend: legends[ key ],
 			isEnabled: this.props.postType === key,
 			menus: menus[ key ],
@@ -76,15 +92,14 @@ export default React.createClass( {
 					<OptionFieldset { ...buildOptionProps( 'posts' ) } />
 					<OptionFieldset { ...buildOptionProps( 'pages' ) } />
 					<OptionFieldset { ...buildOptionProps( 'feedback' ) }
-						description={ this.translate( 'Survey results etc.' ) }
-					/>
+						description={ this.translate( 'Survey results etc.' ) } />
 				</div>
 				<SpinnerButton
 					className="exporter__export-button"
 					disabled={ !this.props.postType }
 					loading={ this.props.shouldShowProgress }
 					isPrimary={ true }
-					onClick={ this.props.onClickExport }
+					onClick={ () => this.props.onClickExport( this.props.postType ) }
 					text={ this.translate( 'Export Selected Content' ) }
 					loadingText={ this.translate( 'Exporting…' ) } />
 			</div>

client/my-sites/exporter/exporter.jsx

@@ -16,21 +16,29 @@ export default React.createClass( {
 	propTypes: {
 		startExport: PropTypes.func.isRequired,
 		setPostType: PropTypes.func.isRequired,
+		setAdvancedSetting: PropTypes.func.isRequired,
 
 		shouldShowProgress: PropTypes.bool.isRequired,
+		advancedSettings: PropTypes.object.isRequired,
 		postType: PropTypes.string
 	},
 
 	render: function() {
-		const { setPostType, startExport } = this.props;
-		const { postType, shouldShowProgress } = this.props;
+		const { setPostType, startExport, setAdvancedSetting } = this.props;
+		const {
+			postType,
+			advancedSettings,
+			shouldShowProgress,
+			options,
+			isLoadingOptions
+		} = this.props;
 
 		const exportButton = (
 			<SpinnerButton
 				className="exporter__export-button"
 				loading={ shouldShowProgress }
 				isPrimary={ true }
-				onClick={ startExport }
+				onClick={ () => startExport() }
 				text={ this.translate( 'Export All' ) }
 				loadingText={ this.translate( 'Exporting…' ) } />
 		);
@@ -53,10 +61,14 @@ export default React.createClass( {
 					expandedSummary={ exportButton }
 					>
 					<AdvancedSettings
+						{ ...advancedSettings }
 						postType={ postType }
 						shouldShowProgress={ shouldShowProgress }
 						onSelectPostType={ setPostType }
 						onClickExport={ startExport }
+						onChangeSetting={ setAdvancedSetting }
+						isLoadingOptions={ isLoadingOptions }
+						options={ options }
 					/>
 				</FoldableCard>
 			</div>

client/my-sites/exporter/index.jsx

@@ -1,32 +1,87 @@
 /**
  * External dependencies
  */
+import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { compose } from 'lodash';
 
 /**
  * Internal dependencies
  */
 import Exporter from './exporter';
-import { getUIState, shouldShowProgress } from 'state/site-settings/exporter/selectors';
-import { setPostType, startExport } from 'state/site-settings/exporter/actions';
 
-function mapStateToProps( state, ownProps ) {
+import {
+	getUIState,
+	getAuthorOptions,
+	getStatusOptions,
+	getDateOptions,
+	getCategoryOptions,
+	isLoadingOptions,
+	shouldShowProgress,
+} from 'state/site-settings/exporter/selectors';
+
+import {
+	setPostType,
+	setAdvancedSetting,
+	startExport,
+	ensureHasSettings
+} from 'state/site-settings/exporter/actions';
+
+import { getSelectedSite } from 'state/ui/selectors';
+
+class ExporterContainer extends Component {
+
+	componentDidMount() {
+		this.props.ensureHasSettings();
+	}
+
+	componentWillReceiveProps() {
+		this.props.ensureHasSettings();
+	}
+
+	render() {
+		return <Exporter { ...this.props } />
+	}
+}
+
+function mapStateToProps( state ) {
 	const uiState = getUIState( state );
+	const selectedSite = getSelectedSite( state );
+
+	const START_OF_MONTH = false;
+	const END_OF_MONTH = true;
 
 	return {
-		site: ownProps.site,
+		siteId: selectedSite && selectedSite.ID,
 		postType: uiState.postType,
 		advancedSettings: uiState.advancedSettings,
-		shouldShowProgress: shouldShowProgress( state )
+		isLoadingOptions: isLoadingOptions( state ),
+		shouldShowProgress: shouldShowProgress( state ),
+		options: {
+			posts: {
+				authors: getAuthorOptions( state, 'post' ),
+				statuses: getStatusOptions( state, 'post' ),
+				startDates: getDateOptions( state, 'post', START_OF_MONTH ),
+				endDates: getDateOptions( state, 'post', END_OF_MONTH ),
+				categories: getCategoryOptions( state, 'post' )
+			},
+			pages: {
+				authors: getAuthorOptions( state, 'page' ),
+				statuses: getStatusOptions( state, 'page' ),
+				startDates: getDateOptions( state, 'page', START_OF_MONTH ),
+				endDates: getDateOptions( state, 'page', END_OF_MONTH )
+			}
+		}
 	};
 }
 
 function mapDispatchToProps( dispatch ) {
 	return {
 		setPostType: compose( dispatch, setPostType ),
-		startExport: () => startExport()( dispatch )
+		setAdvancedSetting: compose( dispatch, setAdvancedSetting ),
+		startExport: compose( dispatch, startExport ),
+		ensureHasSettings: compose( dispatch, ensureHasSettings )
 	};
 }
 
-export default connect( mapStateToProps, mapDispatchToProps )( Exporter );
+export default connect( mapStateToProps, mapDispatchToProps )( ExporterContainer );

client/my-sites/exporter/option-fieldset.jsx

@@ -36,6 +36,29 @@ module.exports = React.createClass( {
 		};
 	},
 
+	renderMenu( menu, key ) {
+		if ( this.props.isLoadingOptions ) {
+			return (
+				<div key={ key } className="exporter__placeholder-text">
+					{ this.translate( 'Loading options…' ) }
+				</div>
+			);
+		}
+
+		return (
+			<Select
+				key={ key }
+				disabled={ !this.props.isEnabled }
+				onChange={ menu.onChange }
+			>
+				<option value={ 0 } key="defaultOption">{ menu.defaultLabel }</option>
+				{ menu.options.map( ( option ) => (
+					<option value={ option.value } key={ option.value }>{ option.label }</option>
+				) ) }
+			</Select>
+		);
+	},
+
 	render() {
 		return (
 			<div className="exporter__option-fieldset">
@@ -54,13 +77,9 @@ module.exports = React.createClass( {
 				}
 
 				<div className="exporter__option-fieldset-fields">
-					{ this.props.menus.map( ( menu, menuIndex ) => (
-						<Select key={ menuIndex } disabled={ !this.props.isEnabled }>
-							{ menu.options.map( ( option, optionIndex ) => (
-								<option value={ optionIndex } key={ optionIndex }>{ option }</option>
-							) ) }
-						</Select>
-					) ) }
+					{ this.props.menus.map( ( menu, menuIndex ) => {
+						return this.renderMenu( menu, menuIndex );
+					} ) }
 				</div>
 
 			</div>

client/my-sites/exporter/style.scss

@@ -30,6 +30,17 @@
 	padding-bottom: 50px;
 }
 
+.exporter__placeholder-text {
+	padding-left: 24px;
+	padding-right: 24px;
+	margin-bottom: 24px;
+	height: 32px;
+
+	color: transparent;
+	background-color: lighten( $gray, 30% );
+	animation: loading-fade 1.6s ease-in-out infinite;
+}
+
 .exporter__advanced-settings-title {
 	margin-bottom: 0.5em;
 

client/my-sites/site-settings/main.jsx

@@ -74,7 +74,7 @@ module.exports = React.createClass( {
 			security: <SiteSecurity site={ site } />,
 			analytics: <AnalyticsSettings site={ site } />,
 			'import': <ImportSettings site={ site } />,
-			'export': <ExportSettings site={ site } store={ this.props.context.store } />
+			'export': <ExportSettings store={ this.props.context.store } />
 		};
 	},
 

client/my-sites/site-settings/section-export.jsx

@@ -13,7 +13,7 @@ export default class SiteSettingsExport extends Component {
 	render() {
 		return (
 			<Provider store={ this.props.store }>
-				<ExporterContainer site={ this.props.site } />
+				<ExporterContainer />
 			</Provider>
 		);
 	}

client/state/action-types.js

@@ -8,6 +8,7 @@
 export const COMPLETE_EXPORT = 'COMPLETE_EXPORT';
 export const CURRENT_USER_ID_SET = 'CURRENT_USER_ID_SET';
 export const FAIL_EXPORT = 'FAIL_EXPORT';
+export const FETCH_EXPORTER_ADVANCED_SETTINGS = 'FETCH_EXPORTER_ADVANCED_SETTINGS';
 export const FETCH_SITE_PLANS = 'FETCH_SITE_PLANS';
 export const FETCH_SITE_PLANS_COMPLETED = 'FETCH_SITE_PLANS_COMPLETED';
 export const NEW_NOTICE = 'NEW_NOTICE';
@@ -18,12 +19,14 @@ export const POSTS_REQUEST_SUCCESS = 'POSTS_REQUEST_SUCCESS';
 export const PUBLICIZE_CONNECTIONS_RECEIVE = 'PUBLICIZE_CONNECTIONS_RECEIVE';
 export const PUBLICIZE_CONNECTIONS_REQUEST = 'PUBLICIZE_CONNECTIONS_REQUEST';
 export const PUBLICIZE_CONNECTIONS_REQUEST_FAILURE = 'PUBLICIZE_CONNECTIONS_REQUEST_FAILURE';
+export const RECEIVE_EXPORTER_ADVANCED_SETTINGS = 'RECEIVE_EXPORTER_ADVANCED_SETTINGS';
 export const REMOVE_NOTICE = 'REMOVE_NOTICE';
 export const REMOVE_SITE_PLANS = 'REMOVE_SITE_PLANS';
 export const REPLY_START_EXPORT = 'REPLY_START_EXPORT';
 export const REQUEST_START_EXPORT = 'REQUEST_START_EXPORT';
 export const SELECTED_SITE_SET = 'SELECTED_SITE_SET';
 export const SET_EXPORT_POST_TYPE = 'SET_EXPORT_POST_TYPE';
+export const SET_EXPORTER_ADVANCED_SETTING = 'SET_EXPORTER_ADVANCED_SETTING';
 export const SET_ROUTE = 'SET_ROUTE';
 export const SET_SECTION = 'SET_SECTION';
 export const SITE_RECEIVE = 'SITE_RECEIVE';