Merge pull request #1158 from Automattic/fix/show-scheduled-pages-452

Pages: show scheduled pages and fix empty placeholders

Author: gwwar

client/my-sites/pages/main.jsx

@@ -18,7 +18,9 @@ var PageList = require( './page-list' ),
 	config = require( 'config' ),
 	notices = require( 'notices' );
 
-module.exports = React.createClass({
+const statuses = [ 'published', 'drafts', 'scheduled', 'trashed' ];
+
+module.exports = React.createClass( {
 
 	displayName: 'Pages',
 
@@ -49,59 +51,58 @@ module.exports = React.createClass({
 	},
 
 	render: function() {
-		var siteFilter = this.props.sites.selected ? '/' + this.props.sites.selected : '',
-			statusSlug = this.props.status,
-			searchPlaceholder, selectedText, filterStrings;
-
-		filterStrings = {
-			drafts: this.translate( 'Drafts', { context: 'Filter label for pages list' } ),
+		const status = this.props.status || 'published';
+		const filterStrings = {
 			published: this.translate( 'Published', { context: 'Filter label for pages list' } ),
-			trashed: this.translate( 'Trash', { context: 'Filter label for pages list' } ),
-			status: this.translate( 'Status' )
+			drafts: this.translate( 'Drafts', { context: 'Filter label for pages list' } ),
+			scheduled: this.translate( 'Scheduled', { context: 'Filter label for pages list' } ),
+			trashed: this.translate( 'Trash', { context: 'Filter label for pages list' } )
+		};
+		const searchStrings = {
+			published: this.translate( 'Search published…', { context: 'Search placeholder for pages list', textOnly: true } ),
+			drafts: this.translate( 'Search drafts…', { context: 'Search placeholder for pages list', textOnly: true } ),
+			scheduled: this.translate( 'Search scheduled…', { context: 'Search placeholder for pages list', textOnly: true } ),
+			trashed: this.translate( 'Search trash…', { context: 'Search placeholder for pages list', textOnly: true } )
 		};
-
-
-
-		switch( statusSlug ) {
-			case 'drafts':
-				searchPlaceholder = this.translate( 'Search drafts…', { context: 'Search placeholder for pages list', textOnly: true } );
-				selectedText = filterStrings.drafts;
-				break;
-			case 'trashed':
-				searchPlaceholder = this.translate( 'Search trash…', { context: 'Search placeholder for pages list', textOnly: true } );
-				selectedText = filterStrings.trashed;
-				break;
-			default:
-				searchPlaceholder = this.translate( 'Search published…', { context: 'Search placeholder for pages list', textOnly: true } );
-				selectedText = filterStrings.published;
-				break;
-		}
-
 		return (
 			<div className="main main-column pages" role="main">
 				<SidebarNavigation />
-
-				<SectionNav selectedText={ selectedText }>
-					<NavTabs label={ filterStrings.status }>
-						<NavItem path={ '/pages' + siteFilter } selected={ ! statusSlug }>{ filterStrings.published }</NavItem>
-						<NavItem path={ '/pages/drafts' + siteFilter } selected={ statusSlug === 'drafts' } >{ filterStrings.drafts }</NavItem>
-						<NavItem path={ '/pages/trashed' + siteFilter } selected={ statusSlug === 'trashed' } >{ filterStrings.trashed }</NavItem>
+				<SectionNav selectedText={ filterStrings[ status ] }>
+					<NavTabs label={ this.translate( 'Status', { context: 'Filter page group label for tabs' } ) }>
+						{ this.getNavItems( filterStrings, status ) }
 					</NavTabs>
 					<Search
 						pinned={ true }
 						onSearch={ this.doSearch }
 						initialValue={ this.props.search }
-						placeholder={ searchPlaceholder }
+						placeholder={ searchStrings[ status ] }
 						analyticsGroup="Pages"
 						delaySearch={ true }
 					/>
 				</SectionNav>
-
 				<PageList { ...this.props } />
 			</div>
 		);
 	},
 
+	getNavItems( filterStrings, currentStatus ) {
+		const siteFilter = this.props.sites.selected ? '/' + this.props.sites.selected : '';
+		return statuses.map( function( status ) {
+			let path = `/pages${ siteFilter }`;
+			if ( status !== 'publish' ) {
+				path = `/pages/${ status }${ siteFilter }`;
+			}
+			return (
+				<NavItem
+					path={ path }
+					selected={ currentStatus === status }
+					key={ `page-filter-${ status }` }>
+					{ filterStrings[ status ] }
+				</NavItem>
+			);
+		} );
+	},
+
 	_setWarning( selectedSite ) {
 		if ( selectedSite && selectedSite.jetpack && ! selectedSite.hasMinimumJetpackVersion ) {
 			notices.warning(
@@ -110,4 +111,4 @@ module.exports = React.createClass({
 			);
 		}
 	}
-});
+} );

client/my-sites/pages/page-list.jsx

@@ -26,7 +26,6 @@ var PageList = React.createClass( {
 		context: React.PropTypes.object,
 		search: React.PropTypes.string,
 		sites: React.PropTypes.object,
-		statusSlug: React.PropTypes.string,
 		siteID: React.PropTypes.any
 	},
 
@@ -60,7 +59,6 @@ var Pages = React.createClass({
 		search: React.PropTypes.string,
 		siteID: React.PropTypes.any,
 		sites: React.PropTypes.object.isRequired,
-		statusSlug: React.PropTypes.string,
 		trackScrollPage: React.PropTypes.func.isRequired
 	},
 
@@ -137,7 +135,8 @@ var Pages = React.createClass({
 				newPageLink = selectedSite ? '//wordpress.com/page/' + selectedSite.ID + '/new' : '//wordpress.com/page';
 			}
 
-			switch( this.props.statusSlug ) {
+			const status = this.props.status || 'published';
+			switch ( status ) {
 				case 'drafts':
 					attributes = {
 						title: this.translate( 'You don\'t have any drafts.' ),
@@ -146,6 +145,14 @@ var Pages = React.createClass({
 						actionURL: newPageLink
 					};
 					break;
+				case 'scheduled':
+					attributes = {
+						title: this.translate( 'You don\'t have any scheduled pages yet.' ),
+						line: this.translate( 'Would you like to create one?' ),
+						action: this.translate( 'Start a Page' ),
+						actionURL: newPageLink
+					};
+					break;
 				case 'trashed':
 					attributes = {
 						title: this.translate( 'You don\'t have any pages in your trash folder.' ),