FIX Element modifications are no longer persisted between page change…

…s with PJAX

client/src/legacy/ElementEditor/entwine.js

@@ -7,6 +7,33 @@ import { loadComponent } from 'lib/Injector';
 import { getConfig } from 'state/editor/elementConfig';
 import { destroy } from 'redux-form';
 
+/**
+ * Reset the Apollo and Redux stores holding data relating to elemental inline edit forms
+ */
+const resetStores = () => {
+  // After page level saves we need to reload all the blocks from the server. We can remove
+  // this if we can figure out a way to optimistically update the apollo cache. See:
+  // https://github.com/dnadesign/silverstripe-elemental/pull/439#issuecomment-428773370
+  window.ss.apolloClient.resetStore();
+
+  // Defer playing with redux store
+  setTimeout(() => {
+    // After the page submit we want to destroy the form values so it's reloaded. We can't
+    // just set the current form state to the original state because some form data is
+    // mutated on the server side.
+    const { store } = window.ss;
+
+    if (!store) {
+      return;
+    }
+
+    // We can introspect the store to find form names in the `element` namespace
+    store.dispatch(destroy(
+      ...Object.keys(store.getState().form.formState.element || {}).map(name => `element.${name}`)
+    ));
+  }, 0);
+};
+
 /**
  * Uses entwine to inject the HistoryViewer React component into the DOM, when used
  * outside of a React context e.g. in the CMS
@@ -33,6 +60,7 @@ jQuery.entwine('ss', ($) => {
     },
 
     onunmatch() {
+      resetStores();
       ReactDOM.unmountComponentAtNode(this[0]);
     },
 
@@ -41,27 +69,7 @@ jQuery.entwine('ss', ($) => {
      */
     'from .cms-edit-form': {
       onaftersubmitform() {
-        // After page level saves we need to reload all the blocks from the server. We can remove
-        // this if we can figure out a way to optimistically update the apollo cache. See:
-        // https://github.com/dnadesign/silverstripe-elemental/pull/439#issuecomment-428773370
-        window.ss.apolloClient.resetStore();
-
-        // Defer playing with redux store
-        setTimeout(() => {
-          // After the page submit we want to destroy the form values so it's reloaded. We can't
-          // just set the current form state to the original state because some form data is
-          // mutated on the server side.
-          const { store } = window.ss;
-
-          if (!store) {
-            return;
-          }
-
-          // We can introspect the store to find form names in the `element` namespace
-          store.dispatch(destroy(
-            ...Object.keys(store.getState().form.formState.element || {}).map(name => `element.${name}`)
-          ));
-        }, 0);
+        resetStores();
       }
     },
   });