.

client/src/boot/registerTransforms.js

@@ -11,6 +11,9 @@ import SaveAction from 'components/ElementActions/SaveAction';
 import UnpublishAction from 'components/ElementActions/UnpublishAction';
 
 export default () => {
+
+  const globalUseGraphqQL = false;
+
   Injector.transform(
     'elemental-fieldgroup',
     (updater) => {
@@ -49,7 +52,6 @@ export default () => {
     }
   );
 
-  const globalUseGraphqQL = false;
   if (globalUseGraphqQL) {
     Injector.transform(
       'cms-element-editor',
@@ -64,17 +66,19 @@ export default () => {
     );
   }
 
-  Injector.transform(
-    'cms-element-adder',
-    (updater) => {
-      // Add GraphQL query for adding elements to an ElementEditor (ElementalArea)
-      updater.component(
-        'AddElementPopover',
-        addElementToArea,
-        'ElementAddButton'
-      );
-    }
-  );
+  if (globalUseGraphqQL) {
+    Injector.transform(
+      'cms-element-adder',
+      (updater) => {
+        // Add GraphQL query for adding elements to an ElementEditor (ElementalArea)
+        updater.component(
+          'AddElementPopover',
+          addElementToArea,
+          'ElementAddButton'
+        );
+      }
+    );
+  }
 
   // Add elemental editor actions
   Injector.transform('element-actions', (updater) => {

client/src/components/ElementActions/ArchiveAction.js

@@ -1,37 +1,50 @@
 /* global window */
-import React from 'react';
+import React, { useContext } from 'react';
 import { compose } from 'redux';
 import AbstractAction from 'components/ElementActions/AbstractAction';
 import archiveBlockMutation from 'state/editor/archiveBlockMutation';
 import i18n from 'i18n';
+import { ElementEditorContext } from 'components/ElementEditor/ElementEditor';
+import backend from 'lib/Backend';
 
 /**
  * Adds the elemental menu action to archive a block of any state
  */
 const ArchiveAction = (MenuComponent) => (props) => {
+  const { fetchBlocks } = useContext(ElementEditorContext);
+
   const handleClick = (event) => {
     event.stopPropagation();
-
-    const { element: { id }, isPublished, actions: { handleArchiveBlock } } = props;
-
+    const isPublished = props.element.isPublished;
     let archiveMessage = i18n._t(
       'ElementArchiveAction.CONFIRM_DELETE',
       'Are you sure you want to send this block to the archive?'
     );
-
     if (isPublished) {
       archiveMessage = i18n._t(
         'ElementArchiveAction.CONFIRM_DELETE_AND_UNPUBLISH',
         'Warning: This block will be unpublished before being sent to the archive. Are you sure you want to proceed?'
       );
     }
-
-    // eslint-disable-next-line no-alert
-    if (handleArchiveBlock && window.confirm(archiveMessage)) {
-      handleArchiveBlock(id).then(() => {
-        const preview = window.jQuery('.cms-preview');
-        preview.entwine('ss.preview')._loadUrl(preview.find('iframe').attr('src'));
-      });
+    if (!window.confirm(archiveMessage)) {
+      return;
+    }
+    const globalUseGraphqQL = false;
+    if (globalUseGraphqQL) {
+      const { element: { id }, actions: { handleArchiveBlock } } = props;
+      // eslint-disable-next-line no-alert
+      if (handleArchiveBlock) {
+        handleArchiveBlock(id).then(() => {
+          const preview = window.jQuery('.cms-preview');
+          preview.entwine('ss.preview')._loadUrl(preview.find('iframe').attr('src'));
+        });
+      }
+    } else {
+      const id = props.element.id;
+      backend.post(`/admin/elemental-area/archive`, {
+        ID: id,
+      })
+        .then(() => fetchBlocks());
     }
   };
 

client/src/components/ElementActions/DuplicateAction.js

@@ -1,14 +1,18 @@
 /* global window */
-import React from 'react';
+import React, { useContext } from 'react';
 import { compose } from 'redux';
 import AbstractAction from 'components/ElementActions/AbstractAction';
 import duplicateBlockMutation from 'state/editor/duplicateBlockMutation';
 import i18n from 'i18n';
+import { ElementEditorContext } from 'components/ElementEditor/ElementEditor';
+import backend from 'lib/Backend';
 
 /**
  * Adds the elemental menu action to duplicate a block
  */
 const DuplicateAction = (MenuComponent) => (props) => {
+  const { fetchBlocks } = useContext(ElementEditorContext);
+
   if (props.type.broken) {
     // Don't allow this action for a broken element.
     return (
@@ -18,16 +22,23 @@ const DuplicateAction = (MenuComponent) => (props) => {
 
   const handleClick = (event) => {
     event.stopPropagation();
-
-    const { element: { id }, actions: { handleDuplicateBlock } } = props;
-
-    if (handleDuplicateBlock) {
-      handleDuplicateBlock(id).then(() => {
-        const preview = window.jQuery('.cms-preview');
-        preview.entwine('ss.preview')._loadUrl(preview.find('iframe').attr('src'));
-      });
+    const globalUseGraphqQL = false;
+    if (globalUseGraphqQL) {
+      const { element: { id }, actions: { handleDuplicateBlock } } = props;
+      if (handleDuplicateBlock) {
+        handleDuplicateBlock(id).then(() => {
+          const preview = window.jQuery('.cms-preview');
+          preview.entwine('ss.preview')._loadUrl(preview.find('iframe').attr('src'));
+        });
+      }
+    } else {
+      const id = props.element.id;
+      backend.post('/admin/elemental-area/duplicate', {
+        ID: id,
+      })
+        .then(() => fetchBlocks());
     }
-  };
+  }
 
   const disabled = props.element.canCreate !== undefined && !props.element.canCreate;
   const label = i18n._t('ElementArchiveAction.DUPLICATE', 'Duplicate');

client/src/components/ElementActions/PublishAction.js

@@ -1,5 +1,5 @@
 /* global window */
-import React from 'react';
+import React, { useContext } from 'react';
 import { compose } from 'redux';
 import AbstractAction from 'components/ElementActions/AbstractAction';
 import publishBlockMutation from 'state/editor/publishBlockMutation';
@@ -9,6 +9,7 @@ import { connect } from 'react-redux';
 import { loadElementSchemaValue } from 'state/editor/loadElementSchemaValue';
 import { loadElementFormStateName } from 'state/editor/loadElementFormStateName';
 import { initialize } from 'redux-form';
+import { ElementEditorContext } from 'components/ElementEditor/ElementEditor';
 
 /**
  * Show a toast message reporting whether publication of Element was successful
@@ -76,6 +77,8 @@ const performSaveForElementWithFormData = (id, formData, securityId) => {
  * Adds the elemental menu action to publish a draft/modified block
  */
 const PublishAction = (MenuComponent) => (props) => {
+  const { fetchBlocks } = useContext(ElementEditorContext);
+
   if (props.type.broken) {
     // Don't allow this action for a broken element.
     return (
@@ -85,6 +88,20 @@ const PublishAction = (MenuComponent) => (props) => {
 
   const { element, formDirty } = props;
 
+  const publishElement = () => {
+    const globalUseGraphqQL = false;
+    if (globalUseGraphqQL) {
+      const { element: { id }, actions: { handleArchiveBlock } } = props;
+      return handleArchiveBlock(id);
+    } else {
+      const id = props.element.id;
+      return backend.post('/admin/elemental-area/publish', {
+        ID: id,
+      })
+        .then(() => fetchBlocks());
+    }
+  }
+
   const handleClick = (event) => {
     event.stopPropagation();
 
@@ -96,7 +113,6 @@ const PublishAction = (MenuComponent) => (props) => {
       type,
       securityId,
       formData,
-      actions: { handlePublishBlock },
       reinitialiseForm,
     } = props;
 
@@ -113,7 +129,8 @@ const PublishAction = (MenuComponent) => (props) => {
 
     // Perform publish. Data is assumed to be up to date
     actionFlow
-      .then(() => handlePublishBlock(id))
+      // .then(() => handlePublishBlock(id))
+      .then(() => publishElement())
       .then(() => reportPublicationStatus(type.title, title, true))
       .catch(() => reportPublicationStatus(type.title, title, false));
   };
@@ -169,7 +186,7 @@ function mapDispatchToProps(dispatch, ownProps) {
 export { PublishAction as Component };
 
 export default compose(
-  publishBlockMutation,
+  publishBlockMutation, // todo
   connect(mapStateToProps, mapDispatchToProps),
   PublishAction
 );

client/src/components/ElementActions/UnpublishAction.js

@@ -1,67 +1,71 @@
 /* global window */
-import React from 'react';
+import React, { useContext } from 'react';
 import { compose } from 'redux';
 import AbstractAction from 'components/ElementActions/AbstractAction';
 import unpublishBlockMutation from 'state/editor/unpublishBlockMutation';
 import i18n from 'i18n';
+import backend from 'lib/Backend';
+import { ElementEditorContext } from 'components/ElementEditor/ElementEditor';
 
 /**
  * Adds the elemental menu action to unpublish a published block
  */
 const UnpublishAction = (MenuComponent) => (props) => {
+  const { fetchBlocks } = useContext(ElementEditorContext);
+  const globalUseGraphqQL = false;
+
   if (props.type.broken) {
     // Don't allow this action for a broken element.
     return (
       <MenuComponent {...props} />
     );
   }
 
-  const { element, type, actions: { handleUnpublishBlock } } = props;
-
-  const handleClick = (event) => {
-    event.stopPropagation();
-    const { jQuery: $ } = window;
+  const reportUnpublicationStatus = (type, title, success) => {
     const noTitle = i18n.inject(
-      i18n._t(
-        'ElementHeader.NOTITLE',
-        'Untitled {type} block'
-      ),
-      { type: type.title }
+      i18n._t('ElementHeader.NOTITLE', 'Untitled {type} block'),
+      { type }
     );
+    const successMessage = i18n.inject(
+      i18n._t('ElementUnpublishAction.SUCCESS_NOTIFICATION', 'Removed \'{title}\' from the published page'),
+      { title: title || noTitle }
+    );
+    const errorMessage = i18n.inject(
+      i18n._t('ElementUnpublishAction.ERROR_NOTIFICATION', 'Error unpublishing \'{title}\''),
+      { title: title || noTitle }
+    );
+    window.jQuery.noticeAdd({
+      text: success ? successMessage : errorMessage,
+      stay: false,
+      type: success ? 'success' : 'error',
+    });
+  }
 
-    if (handleUnpublishBlock) {
-      handleUnpublishBlock(element.id)
+  const unpublishElement = () => {
+    if (globalUseGraphqQL) {
+      const { element: { id }, actions: { handleUnpublishBlock } } = props;
+      return handleUnpublishBlock(id)
         .then(() => {
           const preview = $('.cms-preview');
           preview.entwine('ss.preview')._loadUrl(preview.find('iframe').attr('src'));
-
-          $.noticeAdd({
-            text: i18n.inject(
-              i18n._t(
-                'ElementUnpublishAction.SUCCESS_NOTIFICATION',
-                'Removed \'{title}\' from the published page'
-              ),
-              { title: element.title || noTitle }
-            ),
-            stay: false,
-            type: 'success'
-          });
-        })
-        .catch(() => {
-          $.noticeAdd({
-            text: i18n.inject(
-              i18n._t(
-                'ElementUnpublishAction.ERROR_NOTIFICATION',
-                'Error unpublishing \'{title}\''
-              ),
-              { title: element.title || noTitle }
-            ),
-            stay: false,
-            type: 'error'
-          });
         });
+    } else {
+      const id = props.element.id;
+      return backend.post('/admin/elemental-area/unpublish', {
+        ID: id,
+      })
+        .then(() => fetchBlocks());
     }
-  };
+  }
+
+  const { element, type } = props;
+
+  const handleClick = (event) => {
+    event.stopPropagation();
+    unpublishElement()
+      .then(() => reportUnpublicationStatus(type.title, element.title, true))
+      .catch(() => reportUnpublicationStatus(type.title, element.title, false));
+  }
 
   const disabled = props.element.canUnpublish !== undefined && !props.element.canUnpublish;
   const label = i18n._t('ElementArchiveAction.UNPUBLISH', 'Unpublish');

client/src/components/ElementEditor/ElementEditor.js

@@ -70,17 +70,11 @@ class ElementEditor extends PureComponent {
         preview.entwine('ss.preview')._loadUrl(preview.find('iframe').attr('src'));
       });
     } else {
-      // # rpc
-      // make a call to a sort endpoint with (ID, afterBlocKID)
-      // after sort there is NOT a call to readAll elements, GraphQL will only do a fairly pointless
-      // call to read the element that was moved
-      // (strange code for sorting is in this component and not ElementList, however do not refator it)
-      // update the preview via jquery/entwine (see graphql code above)
       backend.post(`/admin/elemental-area/sort`, {
         ID: sourceId,
         afterBlockID: afterId,
       })
-        .then(() => this.fetchBlocks())
+        .then(() => this.fetchBlocks());
     }
 
     this.setState({
@@ -108,6 +102,9 @@ class ElementEditor extends PureComponent {
           contentBlocks: responseJson,
           isLoading: false,
         })
+        // refresh preview
+        const preview = window.jQuery('.cms-preview');
+        preview.entwine('ss.preview')._loadUrl(preview.find('iframe').attr('src'));
       });
   }