diff options
Diffstat (limited to 'plugins/public-post-preview/js/src/components/preview-toggle/index.js')
| -rw-r--r-- | plugins/public-post-preview/js/src/components/preview-toggle/index.js | 80 |
1 files changed, 59 insertions, 21 deletions
diff --git a/plugins/public-post-preview/js/src/components/preview-toggle/index.js b/plugins/public-post-preview/js/src/components/preview-toggle/index.js index 96502863..41e20868 100644 --- a/plugins/public-post-preview/js/src/components/preview-toggle/index.js +++ b/plugins/public-post-preview/js/src/components/preview-toggle/index.js @@ -14,9 +14,8 @@ import { import { Component, createRef, - Fragment, } from '@wordpress/element'; -import { withSelect } from '@wordpress/data'; +import { withSelect, withDispatch } from '@wordpress/data'; import { PluginPostStatusInfo } from '@wordpress/edit-post'; import { ifCondition, compose } from '@wordpress/compose'; @@ -49,6 +48,8 @@ const pluginPostStatusInfoPreviewUrlInputWrapper = css` margin: 0; ` +const ClipboardIcon = <SVG width="20" height="20" viewBox="0 0 14 16" xmlns="http://www.w3.org/2000/svg"><Path fillRule="evenodd" d="M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z"/></SVG> + class PreviewToggle extends Component { constructor( props ) { @@ -67,12 +68,48 @@ class PreviewToggle extends Component { } onChange( checked ) { - this.request( { - checked, - post_ID: this.props.postId - }, () => { - this.setState( { previewEnabled: ! this.state.previewEnabled } ); - } ) + const data = new window.FormData(); + data.append( 'checked', checked ); + data.append( 'post_ID', this.props.postId ); + + this.sendRequest( data) + .then( ( response ) => { + if ( response.status >= 200 && response.status < 300 ) { + return response; + } + + throw response; + } ) + .then( ( response ) => response.json() ) + .then( ( response ) => { + if ( ! response.success ) { + throw response; + } + + const previewEnabled = ! this.state.previewEnabled; + this.setState( { previewEnabled: previewEnabled } ); + + this.props.createNotice( + 'info', + previewEnabled ? __( 'Public preview enabled.', 'public-post-preview' ) : __( 'Public preview disabled.', 'public-post-preview' ), + { + id: 'public-post-preview', + isDismissible: true, + type: 'snackbar' + } + ); + } ) + .catch( () => { + this.props.createNotice( + 'error', + __( 'Error while changing the public preview status.', 'public-post-preview' ), + { + id: 'public-post-preview', + isDismissible: true, + type: 'snackbar' + } + ); + } ); } onPreviewUrlInputFocus() { @@ -80,16 +117,12 @@ class PreviewToggle extends Component { this.previewUrlInput.current.select(); } - request( data, callback ) { - jQuery.ajax( { - type: 'POST', - url: ajaxurl, - data: { - action: 'public-post-preview', - _ajax_nonce: DSPublicPostPreviewData.nonce, - ...data - }, - success: callback, + sendRequest( data ) { + data.append( 'action', 'public-post-preview' ); + data.append( '_ajax_nonce', DSPublicPostPreviewData.nonce ); + return window.fetch( ajaxurl, { + method: 'POST', + body: data, } ); } @@ -103,7 +136,7 @@ class PreviewToggle extends Component { const ariaCopyLabel = hasCopied ? __( 'Preview URL copied', 'public-post-preview' ) : __( 'Copy the preview URL', 'public-post-preview' ); return ( - <Fragment> + <> <PluginPostStatusInfo> <CheckboxControl label={ __( 'Enable public preview', 'public-post-preview' ) } @@ -130,7 +163,7 @@ class PreviewToggle extends Component { onCopy={ () => this.setState( { hasCopied: true } ) } onFinishCopy={ () => this.setState( { hasCopied: false } ) } aria-disabled={ hasCopied } - icon={ <SVG width="20" height="20" viewBox="0 0 14 16" xmlns="http://www.w3.org/2000/svg" focusable="false" ><Path fillRule="evenodd" d="M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z"/></SVG> } + icon={ ClipboardIcon } /> </p> <p className={ pluginPostStatusInfoPreviewDescription }> @@ -138,7 +171,7 @@ class PreviewToggle extends Component { </p> </PluginPostStatusInfo> } - </Fragment> + </> ); } } @@ -168,4 +201,9 @@ export default compose( [ 'private', ].indexOf( status ) === -1; } ), + withDispatch( ( dispatch ) => { + return { + createNotice: dispatch( 'core/notices' ).createNotice + }; + } ), ] )( PreviewToggle ); |