Merge pull request #553 from creative-commoners/pulls/4.0/getting-thi…

…s-sort-together

FIX Adding some page updates after sorting:

client/src/components/ElementEditor/ElementEditor.js

@@ -1,3 +1,5 @@
+/* global window */
+
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { inject } from 'lib/Injector';
@@ -57,7 +59,10 @@ class ElementEditor extends PureComponent {
   handleDragEnd(sourceId, afterId) {
     const { actions: { handleSortBlock }, areaId } = this.props;
 
-    handleSortBlock(sourceId, afterId, areaId);
+    handleSortBlock(sourceId, afterId, areaId).then(() => {
+      const preview = window.jQuery('.cms-preview');
+      preview.entwine('ss.preview')._loadUrl(preview.find('iframe').attr('src'));
+    });
 
     this.setState({
       dragTargetElementId: null,

client/src/components/ElementEditor/tests/ElementActions-test.js

@@ -16,6 +16,7 @@ describe('ElementActions', () => {
     { title: 'Settings', name: 'Settings' },
     { title: 'History', name: 'History' }
   ];
+  const editTabsClick = () => {};
 
   describe('renderEditTabs()', () => {
     it('should map input tabs into an array of buttons', () => {
@@ -24,6 +25,7 @@ describe('ElementActions', () => {
           areaId={1}
           editTabs={testTabs}
           ActionMenuComponent={ActionMenuComponent}
+          handleEditTabsClick={editTabsClick}
         />
       );
 
@@ -42,6 +44,7 @@ describe('ElementActions', () => {
           areaId={1}
           editTabs={testTabs}
           ActionMenuComponent={ActionMenuComponent}
+          handleEditTabsClick={editTabsClick}
         />
       );
 
@@ -60,6 +63,7 @@ describe('ElementActions', () => {
           areaId={1}
           editTabs={testTabs}
           ActionMenuComponent={ActionMenuComponent}
+          handleEditTabsClick={editTabsClick}
         >
           <AbstractAction title="some button" />
         </ElementActions>

client/src/state/editor/sortBlockMutation.js

@@ -10,6 +10,8 @@ mutation SortBlockMutation($blockId:ID!, $afterBlockId:ID!) {
     AfterBlockID: $afterBlockId
   ) {
     ID
+    IsLiveVersion
+    IsPublished
   }
 }
 `;
@@ -24,22 +26,32 @@ const config = {
       optimisticResponse: {
         sortBlock: {
           ID: blockId,
+          IsLiveVersion: false,
           __typename: 'Block',
         },
       },
-      update: store => {
+      update: (store, { data: { sortBlock: updatedElementData } }) => {
         const variables = readBlocksConfig.options({ areaId }).variables;
-        const data = store.readQuery({ query: readBlocksQuery, variables });
+        const cachedData = store.readQuery({ query: readBlocksQuery, variables });
 
         // Query returns a deeply nested object. Explicit reconstruction via spreads is too verbose.
         // This is an alternative, relatively efficient way to deep clone
-        const newData = JSON.parse(JSON.stringify(data));
+        const newData = JSON.parse(JSON.stringify(cachedData));
         let { edges } = newData.readOneElementalArea.Elements;
 
         // Find the block we reordered
         const movedBlockIndex = edges.findIndex(edge => edge.node.ID === blockId);
         // Keep it
         const movedBlock = edges[movedBlockIndex];
+        // Update the moved block with the new details returned in the GraphQL response
+        Object.entries(updatedElementData).forEach(([key, value]) => {
+          // Skip the type name as this is always returned but should never change
+          if (key === '__typename') {
+            return;
+          }
+
+          movedBlock[key] = value;
+        });
         // Remove the moved block
         edges.splice(movedBlockIndex, 1);
         // If the target is 0, it's added to the start