ENH Add element version to global state

client/src/boot/index.js

@@ -2,8 +2,10 @@
 
 import registerComponents from 'boot/registerComponents';
 import registerTransforms from 'boot/registerTransforms';
+import registerReducers from 'boot/registerReducers';
 
 window.document.addEventListener('DOMContentLoaded', () => {
   registerComponents();
   registerTransforms();
+  registerReducers();
 });

client/src/boot/registerReducers.js

@@ -0,0 +1,8 @@
+import Injector from 'lib/Injector';
+import ElementReducer from 'state/reducer/ElementReducer';
+
+export default () => {
+  Injector.reducer.registerMany({
+    elemental: ElementReducer,
+  });
+};

client/src/components/ElementActions/PublishAction.js

@@ -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 * as elementActions from 'state/reducer/ElementActions';
 
 /**
  * Show a toast message reporting whether publication of Element was successful
@@ -98,6 +99,7 @@ const PublishAction = (MenuComponent) => (props) => {
       formData,
       actions: { handlePublishBlock },
       reinitialiseForm,
+      handleVersionStatus,
     } = props;
 
     let actionFlow = new Promise((resolve) => resolve());
@@ -114,6 +116,10 @@ const PublishAction = (MenuComponent) => (props) => {
     // Perform publish. Data is assumed to be up to date
     actionFlow
       .then(() => handlePublishBlock(id))
+      .then((data) => {
+        const newData = data.data.publishBlock;
+        handleVersionStatus(newData.isPublished, newData.isLiveVersion);
+      })
       .then(() => reportPublicationStatus(type.title, title, true))
       .catch(() => reportPublicationStatus(type.title, title, false));
   };
@@ -162,7 +168,10 @@ function mapDispatchToProps(dispatch, ownProps) {
   return {
     reinitialiseForm(savedData) {
       dispatch(initialize(`element.${formName}`, savedData));
-    }
+    },
+    handleVersionStatus(isPublished, isLiveVersion) {
+      dispatch(elementActions.changeVersionState(`element.${formName}`, { isPublished, isLiveVersion }));
+    },
   };
 }
 

client/src/components/ElementActions/SaveAction.js

@@ -7,6 +7,7 @@ import i18n from 'i18n';
 import { loadElementSchemaValue } from 'state/editor/loadElementSchemaValue';
 import { loadElementFormStateName } from 'state/editor/loadElementFormStateName';
 import { initialize } from 'redux-form';
+import * as elementActions from 'state/reducer/ElementActions';
 
 /**
  * Using a REST backend, serialize the current form data and post it to the backend endpoint to save
@@ -24,7 +25,7 @@ const SaveAction = (MenuComponent) => (props) => {
   const handleClick = (event) => {
     event.stopPropagation();
 
-    const { element, type, securityId, formData, reinitialiseForm } = props;
+    const { element, type, securityId, formData, reinitialiseForm, handleVersionStatus } = props;
     const { jQuery: $ } = window;
     const noTitle = i18n.inject(
       i18n._t(
@@ -68,6 +69,7 @@ const SaveAction = (MenuComponent) => (props) => {
           type: 'success'
         });
       })
+      .then(() => handleVersionStatus(element.isPublished, element.isLiveVersion))
       .catch(() => {
         $.noticeAdd({
           text: i18n.inject(
@@ -119,7 +121,10 @@ function mapDispatchToProps(dispatch, ownProps) {
   return {
     reinitialiseForm(savedData) {
       dispatch(initialize(`element.${formName}`, savedData));
-    }
+    },
+    handleVersionStatus(isPublished, isLiveVersion) {
+      dispatch(elementActions.changeVersionState(`element.${formName}`, { isPublished, isLiveVersion }));
+    },
   };
 }
 

client/src/components/ElementActions/UnpublishAction.js

@@ -1,9 +1,12 @@
 /* global window */
 import React from 'react';
 import { compose } from 'redux';
+import { connect } from 'react-redux';
 import AbstractAction from 'components/ElementActions/AbstractAction';
 import unpublishBlockMutation from 'state/editor/unpublishBlockMutation';
+import { loadElementFormStateName } from 'state/editor/loadElementFormStateName';
 import i18n from 'i18n';
+import * as elementActions from 'state/reducer/ElementActions';
 
 /**
  * Adds the elemental menu action to unpublish a published block
@@ -16,7 +19,7 @@ const UnpublishAction = (MenuComponent) => (props) => {
     );
   }
 
-  const { element, type, actions: { handleUnpublishBlock } } = props;
+  const { element, type, actions: { handleUnpublishBlock }, handleVersionStatus } = props;
 
   const handleClick = (event) => {
     event.stopPropagation();
@@ -31,6 +34,10 @@ const UnpublishAction = (MenuComponent) => (props) => {
 
     if (handleUnpublishBlock) {
       handleUnpublishBlock(element.id)
+        .then((data) => {
+          const newData = data.data.unpublishBlock;
+          handleVersionStatus(newData.isPublished, newData.isLiveVersion);
+        })
         .then(() => {
           const preview = $('.cms-preview');
           preview.entwine('ss.preview')._loadUrl(preview.find('iframe').attr('src'));
@@ -85,6 +92,19 @@ const UnpublishAction = (MenuComponent) => (props) => {
   );
 };
 
+function mapDispatchToProps(dispatch, ownProps) {
+  const formName = loadElementFormStateName(ownProps.element.id);
+
+  return {
+    handleVersionStatus(isPublished, isLiveVersion) {
+      dispatch(elementActions.changeVersionState(`element.${formName}`, { isPublished, isLiveVersion }));
+    },
+  };
+}
+
 export { UnpublishAction as Component };
 
-export default compose(unpublishBlockMutation, UnpublishAction);
+export default compose(
+  unpublishBlockMutation,
+  connect(null, mapDispatchToProps),
+  UnpublishAction);

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

@@ -22,6 +22,7 @@ function makeProps(obj = {}) {
       handleUnpublishBlock: () => {}
     },
     toggle: false,
+    handleVersionStatus: () => {},
     ...obj,
   };
 }

client/src/state/editor/publishBlockMutation.js

@@ -6,7 +6,9 @@ import { config as readBlocksConfig, query as readBlocksQuery } from './readBloc
 const mutation = gql`
 mutation PublishBlock($blockId:ID!) {
   publishBlock(id: $blockId) {
-    id
+    id,
+    isPublished,
+    isLiveVersion
   }
 }
 `;

client/src/state/editor/unpublishBlockMutation.js

@@ -8,7 +8,9 @@ mutation UnpublishBlock($blockId:ID!) {
   unpublishBlock(
     id: $blockId
       ) {
-    id
+    id,
+    isPublished,
+    isLiveVersion,
   }
 }
 `;

client/src/state/reducer/ElementActionTypes.js

@@ -0,0 +1,3 @@
+export default {
+  UPDATE_VERSION_STATE: 'UPDATE_VERSION_STATE',
+};

client/src/state/reducer/ElementActions.js

@@ -0,0 +1,8 @@
+import ACTION_TYPES from './ElementActionTypes';
+
+export function changeVersionState(id, payload) {
+  return {
+    type: ACTION_TYPES.UPDATE_VERSION_STATE,
+    payload: { [id]: payload }
+  };
+}

client/src/state/reducer/ElementReducer.js

@@ -0,0 +1,16 @@
+/* global window */
+import deepFreeze from 'deep-freeze-strict';
+import ACTION_TYPES from './ElementActionTypes';
+
+const initialState = {};
+
+function reducer(state = initialState, action) {
+  switch (action.type) {
+    case ACTION_TYPES.UPDATE_VERSION_STATE:
+      return deepFreeze(Object.assign({}, state, action.payload));
+    default:
+      return state;
+  }
+}
+
+export default reducer;