WIP Add the ability to unlink a post from a document

client/app.jsx

@@ -1,5 +1,5 @@
 /* global React */
-import { loadSites, getAuthUrl, deleteSite, refreshSite } from './services';
+import { loadSites, getAuthUrl, deleteSite, refreshSite, unlinkPost } from './services';
 import Site from './site.jsx';
 import ErrorMessage from './error-message.jsx'
 
@@ -65,6 +65,16 @@ export default class App extends React.Component {
 		this.setState( { sites } )
 	}
 
+	unlinkPost( blog_id ) {
+		return unlinkPost( blog_id )
+			.then( ( success ) => {
+				if ( success ) {
+					this.setPost( blog_id, null );
+				}
+			} )
+			.catch( this.errorHandler )
+	}
+
 	/**
 	 * @param {number} blog_id unique id for the site
 	 * @returns {Promise} for new site information
@@ -106,6 +116,7 @@ export default class App extends React.Component {
 							setPost={ this.setPost.bind( this, site.blog_id ) }
 							removeSite={ this.removeSite.bind( this, site.blog_id ) }
 							refreshSite={ this.updateSite.bind( this, site.blog_id ) }
+							unlinkPost={ this.unlinkPost.bind( this, site.blog_id ) }
 							updateSiteList={ this.updateSiteList } /> ) }
 					<li className="sites-list__add-site"><a className="button button-secondary" href={ this.state.authorizationUrl } target="_blank">Add WordPress Site</a></li>
 				</ul>

client/services.js

@@ -49,3 +49,12 @@ export function getAuthUrl() {
 			.getAuthUrl();
 	} )
 }
+
+export function unlinkPost( blogId ) {
+	return new Promise( ( resolve, reject ) => {
+		google.script.run
+			.withSuccessHandler( resolve )
+			.withFailureHandler( reject )
+			.unlinkPost( blogId );
+	} )
+}

client/site.jsx

@@ -95,6 +95,7 @@ export default class Site extends React.Component {
 		const postTypes = site.postTypes || []
 		const blavatar = ( site.info.icon && site.info.icon.img ) ? site.info.icon.img : 'https://secure.gravatar.com/blavatar/e6392390e3bcfadff3671c5a5653d95b'
 		const previewLink = ( hasBeenPosted ) ? <span className="sites-list__post-link"><a href={ post.URL }>Preview on { site.info.name }</a></span> : null;
+		const unlinkLink = ( hasBeenPosted ) ? <span className="sites-list__post-link" onClick={ this.props.unlinkPost }>Unlink</span> : null;
 		const extendedStyle = ( ! this.state.optionsExpanded ) ? { display: 'none' } : {}
 		const extendedToggled = ( ! this.state.optionsExpanded ) ? 'sites-list__extended-toggle' : 'sites-list__extended-toggle is-toggled'
 		const refreshClasses = 'sites-list__update-site' + ( this.state.siteRefreshing ? ' sites-list__update-site--updating' : '' )
@@ -115,14 +116,15 @@ export default class Site extends React.Component {
 			</div>
 			<div className="sites-list__preview">
 				{ previewLink }
+				{ unlinkLink }
 				<PostTypeInput site={ site } postType={ this.state.postType } onChoose={ this.postTypeChangeHandler } />
 			</div>
 			<div className="sites-list__extended" style={ extendedStyle }>
 				<h4>Post Settings <span>(<a title="Update site information" className={ refreshClasses } onClick={ this.updateSite }><svg height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M17.91 14c-.478 2.833-2.943 5-5.91 5-3.308 0-6-2.692-6-6s2.692-6 6-6h2.172l-2.086 2.086L13.5 10.5 18 6l-4.5-4.5-1.414 1.414L14.172 5H12c-4.418 0-8 3.582-8 8s3.582 8 8 8c4.08 0 7.438-3.055 7.93-7h-2.02z"></path></g></svg> Refresh</a>)</span></h4>
 				<TagInput tagChangeHandler={ this.tagChangeHandler } postTagsStr={ this.state.postTagsStr } taxonomies={ taxonomies } />
 				<CategoryInput categories={ categories } postCategories={ this.state.postCategories } onAddCategory={ this.categorizePost } onRemoveCategory={ this.uncategorizePost } taxonomies={ taxonomies } />
 				<div>
-					<a href="#" title="Remove site from this list" className="sites-list__delete-site" onClick={ this.props.removeSite }>Remove { site.info.name } <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Trash</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M6.187 8h11.625l-.695 11.125C17.05 20.18 16.177 21 15.12 21H8.88c-1.057 0-1.93-.82-1.997-1.875L6.187 8zM19 5v2H5V5h3V4c0-1.105.895-2 2-2h4c1.105 0 2 .895 2 2v1h3zm-9 0h4V4h-4v1z"/></g></svg></a>
+					<a title="Remove site from this list" className="sites-list__delete-site" onClick={ this.props.removeSite }>Remove { site.info.name } <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Trash</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M6.187 8h11.625l-.695 11.125C17.05 20.18 16.177 21 15.12 21H8.88c-1.057 0-1.93-.82-1.997-1.875L6.187 8zM19 5v2H5V5h3V4c0-1.105.895-2 2-2h4c1.105 0 2 .895 2 2v1h3zm-9 0h4V4h-4v1z"/></g></svg></a>
 				</div>
 			</div>
 		</li>

server/code.js

@@ -14,7 +14,8 @@ import {
 	clearSiteData,
 	refreshSite,
 	include,
-	getAuthUrl
+	getAuthUrl,
+	unlinkPost
 } from './index'
 
 global.onOpen = onOpen;
@@ -29,3 +30,4 @@ global.refreshSite = refreshSite;
 global.clearSiteData = clearSiteData;
 global.include = include;
 global.getAuthUrl = getAuthUrl;
+global.unlinkPost = unlinkPost;

server/index.js

@@ -225,6 +225,22 @@ export function deleteSite( site_id ) {
 	return;
 }
 
+export function unlinkPost( site_id ) {
+	const ui = DocumentApp.getUi();
+	const promptResponse = ui.alert(
+		'Are you sure you want to unlink this document from the WordPress post?',
+		'If you choose "Yes" you can create a new post for this document.',
+		ui.ButtonSet.YES_NO
+	);
+
+	if ( promptResponse !== ui.Button.YES ) {
+		return false;
+	}
+
+	store.removePostFromSite( site_id );
+	return true;
+}
+
 export function devTest() {
 	// const doc = DocumentApp.getActiveDocument();
 	// const body = doc.getBody();

server/persistance.js

@@ -115,6 +115,12 @@ export function Persistance( propertieService ) {
 		return postData[ blog_id ]
 	}
 
+	function removePostFromSite( blog_id ) {
+		const postData = getPostStatus();
+		delete postData[ blog_id ];
+		docProps().setProperty( POST_PERSISTANCE_KEY, JSON.stringify( postData ) )
+	}
+
 	function postIdentity( post ) {
 		const { date, URL, ID, modified, type, categories, tags } = post
 		const postCategories = Object.keys( categories )
@@ -145,6 +151,7 @@ export function Persistance( propertieService ) {
 		findSite,
 		deleteSite,
 		savePostToSite,
+		removePostFromSite,
 		getPostStatus
 	}
 }