Show the "saved" message for at least a second

editor/components/post-saved-state/index.js

@@ -1,83 +1,101 @@
-/**
- * External dependencies
- */
-import { connect } from 'react-redux';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Dashicon, IconButton } from '@wordpress/components';
+import { Dashicon, IconButton, withSafeTimeout } from '@wordpress/components';
+import { Component, compose } from '@wordpress/element';
+import { withSelect, withDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 import PostSwitchToDraftButton from '../post-switch-to-draft-button';
-import { savePost } from '../../store/actions';
-import {
-	isEditedPostNew,
-	isCurrentPostPublished,
-	isEditedPostDirty,
-	isSavingPost,
-	isEditedPostSaveable,
-	getCurrentPost,
-} from '../../store/selectors';
 
 /**
  * Component showing whether the post is saved or not and displaying save links.
  *
  * @param   {Object}    Props Component Props.
- * @return {WPElement}       WordPress Element.
  */
-export function PostSavedState( { isNew, isPublished, isDirty, isSaving, isSaveable, onSave } ) {
-	if ( isSaving ) {
-		return (
-			<span className="editor-post-saved-state editor-post-saved-state__saving">
-				<Dashicon icon="cloud" />
-				{ __( 'Saving' ) }
-			</span>
-		);
+export class PostSavedState extends Component {
+	constructor() {
+		super( ...arguments );
+		this.state = {
+			forceSavedMessage: false,
+		};
 	}
 
-	if ( isPublished ) {
-		return <PostSwitchToDraftButton />;
+	componentDidUpdate( prevProps ) {
+		if ( prevProps.isSaving && ! this.props.isSaving ) {
+			this.setState( { forceSavedMessage: true } );
+			this.props.setTimeout( () => {
+				this.setState( { forceSavedMessage: false } );
+			}, 1000 );
+		}
 	}
 
-	if ( ! isSaveable ) {
-		return null;
-	}
+	render() {
+		const { isNew, isPublished, isDirty, isSaving, isSaveable, onSave } = this.props;
+		const { forceSavedMessage } = this.state;
+		if ( isSaving ) {
+			return (
+				<span className="editor-post-saved-state editor-post-saved-state__saving">
+					<Dashicon icon="cloud" />
+					{ __( 'Saving' ) }
+				</span>
+			);
+		}
+
+		if ( isPublished ) {
+			return <PostSwitchToDraftButton />;
+		}
+
+		if ( ! isSaveable ) {
+			return null;
+		}
+
+		if ( forceSavedMessage || ( ! isNew && ! isDirty ) ) {
+			return (
+				<span className="editor-post-saved-state">
+					<Dashicon icon="saved" />
+					{ __( 'Saved' ) }
+				</span>
+			);
+		}
 
-	if ( ! isNew && ! isDirty ) {
 		return (
-			<span className="editor-post-saved-state">
-				<Dashicon icon="saved" />
-				{ __( 'Saved' ) }
-			</span>
+			<IconButton
+				className="editor-post-save-draft"
+				onClick={ onSave }
+				icon="cloud-upload"
+			>
+				{ __( 'Save Draft' ) }
+			</IconButton>
 		);
 	}
-
-	return (
-		<IconButton
-			className="editor-post-save-draft"
-			onClick={ onSave }
-			icon="cloud-upload"
-		>
-			{ __( 'Save Draft' ) }
-		</IconButton>
-	);
 }
 
-export default connect(
-	( state, { forceIsDirty, forceIsSaving } ) => ( {
-		post: getCurrentPost( state ),
-		isNew: isEditedPostNew( state ),
-		isPublished: isCurrentPostPublished( state ),
-		isDirty: forceIsDirty || isEditedPostDirty( state ),
-		isSaving: forceIsSaving || isSavingPost( state ),
-		isSaveable: isEditedPostSaveable( state ),
+export default compose( [
+	withSelect( ( select, { forceIsDirty, forceIsSaving } ) => {
+		const {
+			isEditedPostNew,
+			isCurrentPostPublished,
+			isEditedPostDirty,
+			isSavingPost,
+			isEditedPostSaveable,
+			getCurrentPost,
+		} = select( 'core/editor' );
+		return {
+			post: getCurrentPost(),
+			isNew: isEditedPostNew(),
+			isPublished: isCurrentPostPublished(),
+			isDirty: forceIsDirty || isEditedPostDirty(),
+			isSaving: forceIsSaving || isSavingPost(),
+			isSaveable: isEditedPostSaveable(),
+		};
 	} ),
-	{
-		onSave: savePost,
-	}
-)( PostSavedState );
+	withDispatch( ( dispatch ) => ( {
+		onSave: dispatch( 'core/editor' ).savePost,
+	} ) ),
+	withSafeTimeout,
+] )( PostSavedState );