Update undo/redo arrows to represent if they are active

[MAILPOET-1976]

assets/js/src/newsletter_editor/components/history.js

@@ -1,4 +1,5 @@
 import App from 'newsletter_editor/App';
+import jQuery from 'jquery';
 import Marionette from 'backbone.marionette';
 
 var Module = {};
@@ -6,6 +7,11 @@ var Module = {};
 Module.HistoryView = Marionette.View.extend({
   MAX_HISTORY_STATES: 25,
 
+  elements: {
+    redo: null,
+    undo: null,
+  },
+
   model: {
     states: [], // from newest
     currentStateIndex: 0,
@@ -19,6 +25,12 @@ Module.HistoryView = Marionette.View.extend({
     App.getChannel().on('afterEditorSave', this.setCurrentState, this);
   },
 
+  onAttach: function onRender() {
+    this.elements.redo = jQuery('#mailpoet-history-arrow-redo');
+    this.elements.undo = jQuery('#mailpoet-history-arrow-undo');
+    this.updateArrowsUI();
+  },
+
   setCurrentState: function setCurrentState(json) {
     if (!json || !json.body) {
       return;
@@ -29,6 +41,26 @@ Module.HistoryView = Marionette.View.extend({
     this.model.states.unshift(json.body);
     this.model.currentStateIndex = 0;
     this.model.states.length = Math.min(this.model.states.length, this.MAX_HISTORY_STATES);
+    this.updateArrowsUI();
+  },
+
+  canUndo: function canUndo() {
+    return this.model.currentStateIndex < (this.model.states.length - 1)
+  },
+
+  canRedo: function canRedo() {
+    return this.model.currentStateIndex !== 0;
+  },
+
+  updateArrowsUI: function updateArrowsUI() {
+    this.elements.undo.addClass('mailpoet_history_arrow_inactive');
+    this.elements.redo.addClass('mailpoet_history_arrow_inactive');
+    if (this.canUndo()) {
+      this.elements.undo.removeClass('mailpoet_history_arrow_inactive');
+    };
+    if (this.canRedo()) {
+      this.elements.redo.removeClass('mailpoet_history_arrow_inactive');
+    };
   },
 });