Enhance/display important dates on search

client/my-sites/post-relative-time-status/index.jsx

@@ -4,7 +4,6 @@
 import PropTypes from 'prop-types';
 import { localize } from 'i18n-calypso';
 import React from 'react';
-import { includes } from 'lodash';
 
 /**
  * Internal dependencies
@@ -21,118 +20,150 @@ class PostRelativeTime extends React.PureComponent {
 	static propTypes = {
 		showPublishedStatus: PropTypes.bool.isRequired,
 		post: PropTypes.object.isRequired,
-		includeNonDraftStatuses: PropTypes.bool,
 		link: PropTypes.string,
 		target: PropTypes.string,
 		gridiconSize: PropTypes.number,
 	};
 
 	static defaultProps = {
-		includeNonDraftStatuses: false,
 		link: null,
 		target: null,
 	};
 
+	/**
+	 * Get the date to be displayed depending on the status of the post
+	 */
 	getTimestamp() {
 		switch ( this.props.post.status ) {
 			case 'new':
 				return null;
+
 			case 'draft':
-			case 'future':
+			case 'trash':
 			case 'pending':
 				return this.props.post.modified;
+
+			case 'future':
 			default:
 				return this.props.post.date;
 		}
 	}
 
-	getDisplayedTimeFromPost( post ) {
+	getDisplayedTimeForLabel() {
 		const moment = this.props.moment;
-
 		const now = moment();
+		const scheduledDate = moment( this.getTimestamp() );
 
-		if ( ! post ) {
-			// Placeholder text: "a few seconds ago" in English locale
-			return now.fromNow();
+		const isScheduledPost = this.props.post.status === 'future';
+		if ( ! isScheduledPost && Math.abs( now.diff( this.getTimestamp(), 'days' ) ) < 7 ) {
+			const time = moment( this.getTimestamp() );
+			return time.fromNow();
 		}
 
-		const { status, modified, date } = post;
-		const time = moment( includes( [ 'draft', 'pending', 'future' ], status ) ? modified : date );
-		if ( now.diff( time, 'days' ) >= 7 ) {
-			// Like "Mar 15, 2013 6:23 PM" in English locale
-			return time.format( 'lll' );
-		}
-
-		// Like "3 days ago" in English locale
-		return time.fromNow();
+		const sameElseForScheduled = this.props.translate( '[for] ll [at] LT', {
+			comment:
+				'll refers to date (eg. 21 Apr) for when the post will be published & LT refers to time (eg. 18:00) - "at" and "for" is translated',
+		} );
+
+		const sameElse = this.props.translate( '[on] ll [at] LT', {
+			comment:
+				'll refers to date (eg. 21 Apr) & LT refers to time (eg. 18:00) - "at" and "on" is translated',
+		} );
+
+		const scheduledTime = scheduledDate.calendar( null, {
+			nextDay: this.props.translate( '[tomorrow at] LT', {
+				comment: 'LT refers to time (eg. 18:00)',
+			} ),
+			sameElse: isScheduledPost ? sameElseForScheduled : sameElse,
+		} );
+
+		// If the content is scheduled to be release within a year, do not display the year at the end
+		return scheduledDate.diff( now, 'years' ) > 0
+			? scheduledTime
+			: scheduledTime.replace( scheduledDate.format( 'Y' ), '' );
 	}
 
 	getTimeText() {
 		const time = this.getTimestamp();
-		if ( ! time ) {
-			return null;
-		}
-
 		return (
 			<span className="post-relative-time-status__time">
-				<Gridicon icon="time" size={ this.props.gridiconSize || 18 } />
-				<time className="post-relative-time-status__time-text" dateTime={ time }>
-					{ this.getDisplayedTimeFromPost( this.props.post ) }
-				</time>
+				{ time && (
+					<>
+						<Gridicon icon="time" size={ this.props.gridiconSize || 18 } />
+						<time className="post-relative-time-status__time-text" dateTime={ time }>
+							{ this.getDisplayedTimeForLabel() }
+						</time>
+					</>
+				) }
 			</span>
 		);
 	}
 
-	getStatusText() {
+	/**
+	 * Get status label
+	 *
+	 * @param {boolean} onlySticky sends back the "sticky" label. Special case as is using the same template but for is unrelated to the status
+	 *
+	 */
+	getStatusText( onlySticky = false ) {
 		const status = this.props.post.status;
 		let statusClassName = 'post-relative-time-status__status';
 		let statusIcon = 'aside';
 		let statusText;
 
-		if ( this.props.post.sticky ) {
+		if ( onlySticky ) {
 			statusText = this.props.translate( 'sticky' );
 			statusClassName += ' is-sticky';
 			statusIcon = 'bookmark-outline';
 		} else if ( status === 'pending' ) {
 			statusText = this.props.translate( 'pending review' );
 			statusClassName += ' is-pending';
-		} else if ( status === 'future' ) {
-			const moment = this.props.moment;
-			const now = moment();
-			const scheduledDate = moment( this.props.post.date );
-			// If the content is scheduled to be release within a year, do not display the year at the end
-			const scheduledTime = scheduledDate.calendar( null, {
-				sameElse: this.props.translate( 'll [at] LT', {
-					comment:
-						'll refers to date (eg. 21 Apr) & LT refers to time (eg. 18:00) - "at" is translated',
-				} ),
-			} );
-
-			const displayScheduleTime =
-				scheduledDate.diff( now, 'years' ) > 0
-					? scheduledTime
-					: scheduledTime.replace( scheduledDate.format( 'Y' ), '' );
-
-			statusText = this.props.translate( 'scheduled for %(displayScheduleTime)s', {
-				comment: '%(displayScheduleTime)s is when a scheduled post is set to be published',
+		} else if ( status === 'trash' ) {
+			statusClassName += ' is-trash';
+			statusIcon = 'trash';
+			const displayScheduleTime = this.getDisplayedTimeForLabel();
+			statusText = this.props.translate( 'trashed %(displayScheduleTime)s', {
+				comment: '%(displayScheduleTime)s is when a post or page was trashed',
 				args: {
 					displayScheduleTime,
 				},
 			} );
+		} else if ( status === 'future' ) {
 			statusClassName += ' is-scheduled';
 			statusIcon = 'calendar';
-		} else if ( status === 'trash' ) {
-			statusText = this.props.translate( 'trashed' );
-			statusClassName += ' is-trash';
-			statusIcon = 'trash';
-		} else if ( this.props.includeBasicStatus ) {
-			if ( status === 'draft' ) {
-				statusText = this.props.translate( 'draft' );
-			} else if ( status === 'publish' ) {
-				statusText = this.props.translate( 'published' );
-			} else if ( status === 'new' ) {
-				statusText = this.props.translate( 'Publish immediately' );
-			}
+			const displayScheduleTime = this.getDisplayedTimeForLabel();
+			statusText = this.props.translate( 'scheduled %(displayScheduleTime)s', {
+				comment: '%(displayScheduleTime)s is when a scheduled post or page is set to be published',
+				args: {
+					displayScheduleTime,
+				},
+			} );
+		} else if ( status === 'draft' ) {
+			const displayScheduleTime = this.getDisplayedTimeForLabel();
+			statusText = this.props.translate( 'draft, last modified %(displayScheduleTime)s', {
+				comment: '%(displayScheduleTime)s is when a draft post or page was last modified',
+				args: {
+					displayScheduleTime,
+				},
+			} );
+		} else if ( status === 'publish' ) {
+			const displayScheduleTime = this.getDisplayedTimeForLabel();
+			statusText = this.props.translate( 'published, last modified %(displayScheduleTime)s', {
+				comment: '%(displayScheduleTime)s is when a post or page was last modified',
+				args: {
+					displayScheduleTime,
+				},
+			} );
+		} else if ( status === 'private' ) {
+			const displayScheduleTime = this.getDisplayedTimeForLabel();
+			statusText = this.props.translate( 'private, last modified %(displayScheduleTime)s', {
+				comment: '%(displayScheduleTime)s is when a private post or page was last modified',
+				args: {
+					displayScheduleTime,
+				},
+			} );
+		} else if ( status === 'new' ) {
+			statusText = this.props.translate( 'Publish immediately' );
 		}
 
 		if ( statusText ) {
@@ -146,16 +177,12 @@ class PostRelativeTime extends React.PureComponent {
 	}
 
 	render() {
-		const { post, showPublishedStatus } = this.props;
+		const { showPublishedStatus, post } = this.props;
 		const timeText = this.getTimeText();
-		const statusText = this.getStatusText();
-		const relativeTimeClass = timeText ? 'post-relative-time-status' : null;
-		const time = this.getTimestamp();
-
 		let innerText = (
 			<span>
-				{ timeText }
-				{ ( post.status === 'future' || showPublishedStatus ) && statusText }
+				{ showPublishedStatus ? this.getStatusText() : timeText }
+				{ post.sticky && this.getStatusText( true ) }
 			</span>
 		);
 
@@ -174,6 +201,8 @@ class PostRelativeTime extends React.PureComponent {
 			);
 		}
 
+		const relativeTimeClass = timeText ? 'post-relative-time-status' : null;
+		const time = this.getTimestamp();
 		return (
 			<div className={ relativeTimeClass } title={ time }>
 				{ innerText }