Skip to content

Commit

Permalink
Editor Status Label: Reduxify and simplify
Browse files Browse the repository at this point in the history 
**Simplify step**: the `EditorStatusLabel` is only a shadow of its former self, showing just
a simple label that's not interactive at all. It used to be more than that: it was clickable
and could open a popover with post status. That was changed by @mtias in #11536, where he
moved the post status to the sidebar accordion.

This PR removes the dead code related to `onClick` and `advancedStatus` props, which are no
longer used.

**Reduxify step**: retrieve the edited post (the saved version, not the modified one) from
Redux instead of passing the `savedPost` prop from Flux store.
  • Loading branch information
@jsnajdr
jsnajdr committed May 15, 2018
1 parent 7ca50b2 commit bbf25a4
Show file tree
Hide file tree
Showing 4 changed files with 47 additions and 88 deletions.
2 changes: 1 addition & 1 deletion client/post-editor/editor-action-bar/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ class EditorActionBar extends Component {
{ siteId && <QuerySiteSettings siteId={ siteId } /> }

<div className="editor-action-bar__cell is-left">
<EditorStatusLabel post={ this.props.savedPost } advancedStatus />
<EditorStatusLabel />
</div>
<div className="editor-action-bar__cell is-center">
{ multiUserSite && <AsyncLoad require="post-editor/editor-author" /> }
Expand Down
6 changes: 0 additions & 6 deletions client/post-editor/editor-ground-control/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,12 +93,6 @@ export class EditorGroundControl extends React.Component {
}
}

shouldShowStatusLabel() {
const { isSaving, post } = this.props;

return isSaving || ( post && post.ID && ! isPublished( post ) );
}

isPreviewEnabled() {
return (
this.props.hasContent &&
Expand Down
118 changes: 42 additions & 76 deletions client/post-editor/editor-status-label/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,28 +7,21 @@
import PropTypes from 'prop-types';
import { localize } from 'i18n-calypso';
import React from 'react';
import { connect } from 'react-redux';
import classNames from 'classnames';
import Gridicon from 'gridicons';

/**
* Internal dependencies
*/
import * as postUtils from 'lib/posts/utils';
import EditorStatusLabelPlaceholder from './placeholder';
import { getSelectedSiteId } from 'state/ui/selectors';
import { getEditorPostId } from 'state/ui/editor/selectors';
import { getSitePost } from 'state/posts/selectors';

class StatusLabel extends React.PureComponent {
static displayName = 'StatusLabel';

class EditorStatusLabel extends React.Component {
static propTypes = {
onClick: PropTypes.func,
post: PropTypes.object,
advancedStatus: PropTypes.bool,
};

static defaultProps = {
onClick: null,
post: null,
advancedStatus: false,
};

state = {
Expand All @@ -53,113 +46,81 @@ class StatusLabel extends React.PureComponent {
}

render() {
let statusClass = 'editor-status-label';

if ( ! this.props.post ) {
return <EditorStatusLabelPlaceholder className={ statusClass } />;
return <EditorStatusLabelPlaceholder className="editor-status-label" />;
}

statusClass = classNames( statusClass, 'is-' + this.props.post.status );

if ( ! this.props.onClick ) {
return (
<span className={ classNames( statusClass, 'is-plain' ) }>{ this.renderLabel() }</span>
);
}

return (
<button
className={ statusClass }
onClick={ this.props.onClick }
ref="statusLabel"
aria-label={ this.props.translate( 'Show advanced status details' ) }
aria-pressed={ !! this.props.advancedStatus }
role="alert"
aria-live="polite"
>
<Gridicon icon="cog" size={ 18 } />
{ this.renderLabel() }
</button>
const className = classNames(
'editor-status-label',
'is-plain',
'is-' + this.props.post.status
);

return <span className={ className }>{ this.renderLabel() }</span>;
}

renderLabel = () => {
let post = this.props.post,
editedTime = this.props.moment( postUtils.getEditedTime( post ) ),
label;
renderLabel() {
const { post, translate, moment } = this.props;

if ( ! post.modified ) {
return this.props.translate( 'New Draft' );
return translate( 'New Draft' );
}

let editedTime = moment( postUtils.getEditedTime( post ) );

// prevent JP sites from showing a draft as saved in the future
if ( 'draft' === post.status && editedTime.isAfter( this.state.currentTime ) ) {
editedTime = this.props.moment( this.state.currentTime );
editedTime = moment( this.state.currentTime );
}

const timeFromNow = editedTime.from( this.state.currentTime );

switch ( post.status ) {
case 'publish':
label = this.props.translate( '{{strong}}Published{{/strong}} %(relativeTimeFromNow)s', {
return translate( '{{strong}}Published{{/strong}} %(relativeTimeFromNow)s', {
args: { relativeTimeFromNow: timeFromNow },
components: {
strong: <strong />,
},
} );
break;
case 'private':
label = this.props.translate(
'{{strong}}Published Privately{{/strong}} %(relativeTimeFromNow)s',
{
args: { relativeTimeFromNow: timeFromNow },
components: {
strong: <strong />,
},
}
);
break;
return translate( '{{strong}}Published Privately{{/strong}} %(relativeTimeFromNow)s', {
args: { relativeTimeFromNow: timeFromNow },
components: {
strong: <strong />,
},
} );
case 'draft':
label = this.props.translate( '{{strong}}Saved{{/strong}} %(relativeTimeFromNow)s', {
return translate( '{{strong}}Saved{{/strong}} %(relativeTimeFromNow)s', {
args: { relativeTimeFromNow: timeFromNow },
components: {
strong: <strong />,
},
} );
break;
case 'pending':
label = this.props.translate(
'{{strong}}Pending Review{{/strong}} %(relativeTimeFromNow)s',
{
args: { relativeTimeFromNow: timeFromNow },
components: {
strong: <strong />,
},
}
);
break;
return translate( '{{strong}}Pending Review{{/strong}} %(relativeTimeFromNow)s', {
args: { relativeTimeFromNow: timeFromNow },
components: {
strong: <strong />,
},
} );
case 'future':
label = this.props.translate( '{{strong}}Scheduled{{/strong}} %(relativeTimeFromNow)s', {
return translate( '{{strong}}Scheduled{{/strong}} %(relativeTimeFromNow)s', {
args: { relativeTimeFromNow: timeFromNow },
components: {
strong: <strong />,
},
} );
break;
case 'trash':
label = this.props.translate( '{{strong}}Trashed{{/strong}}', {
return translate( '{{strong}}Trashed{{/strong}}', {
components: {
strong: <strong />,
},
} );
break;
default:
label = '';
break;
}

return label;
};
return '';
}

updateCurrentTime = () => {
this.setState( {
Expand All @@ -168,4 +129,9 @@ class StatusLabel extends React.PureComponent {
};
}

export default localize( StatusLabel );
export default connect( state => {
const siteId = getSelectedSiteId( state );
const postId = getEditorPostId( state );
const post = getSitePost( state, siteId, postId );
return { post };
} )( localize( EditorStatusLabel ) );
9 changes: 4 additions & 5 deletions client/post-editor/post-editor.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ import { getCurrentLayoutFocus } from 'state/ui/layout-focus/selectors';
import { protectForm } from 'lib/protect-form';
import EditorSidebar from 'post-editor/editor-sidebar';
import Site from 'blocks/site';
import StatusLabel from 'post-editor/editor-status-label';
import EditorStatusLabel from 'post-editor/editor-status-label';
import EditorGroundControl from 'post-editor/editor-ground-control';
import { isWithinBreakpoint } from 'lib/viewport';
import { isSitePreviewable } from 'state/sites/selectors';
Expand Down Expand Up @@ -326,7 +326,7 @@ export class PostEditor extends React.Component {
homeLink={ true }
externalLink={ true }
/>
{ ( this.state.isDirty || this.props.dirty ) && (
{ this.state.isDirty || this.props.dirty ? (
<QuickSaveButtons
isSaving={ this.state.isSaving }
isSaveBlocked={ this.isSaveBlocked() }
Expand All @@ -336,9 +336,8 @@ export class PostEditor extends React.Component {
post={ this.state.post }
onSave={ this.onSave }
/>
) }
{ ! ( this.state.isDirty || this.props.dirty ) && (
<StatusLabel post={ this.state.savedPost } />
) : (
<EditorStatusLabel />
) }
</div>
<div className="post-editor__inner-content">
Expand Down

0 comments on commit bbf25a4

Please sign in to comment.