From e1d204005814bc8234702879083e06558b04115f Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Sat, 24 Oct 2020 11:41:23 -0700
Subject: [PATCH] Show message on empty undo/redo stack

---
 webapp/src/flashMessage.ts     |  5 ++++-
 webapp/src/mutator.ts          | 24 ++++++++++++++++--------
 webapp/src/pages/boardPage.tsx | 28 ++++++++++++++++++----------
 3 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/webapp/src/flashMessage.ts b/webapp/src/flashMessage.ts
index ceeb5b50d..146365ff8 100644
--- a/webapp/src/flashMessage.ts
+++ b/webapp/src/flashMessage.ts
@@ -4,11 +4,14 @@ class FlashMessage {
     //
     // Show a temporary status message
     //
-    static show(text: string, delay = 800): void {
+    static show(text: string, delay = 800, style?: string): void {
         const flashPanel = document.createElement('div')
         flashPanel.innerText = text
         flashPanel.classList.add('flashPanel')
         flashPanel.classList.add('flashIn')
+        if (style) {
+            flashPanel.style.cssText = style
+        }
 
         document.body.appendChild(flashPanel)
 
diff --git a/webapp/src/mutator.ts b/webapp/src/mutator.ts
index 7a429d203..5ea563281 100644
--- a/webapp/src/mutator.ts
+++ b/webapp/src/mutator.ts
@@ -406,21 +406,29 @@ class Mutator {
         return block
     }
 
+    get canUndo(): boolean {
+        return undoManager.canUndo
+    }
+
+    get canRedo(): boolean {
+        return undoManager.canRedo
+    }
+
+    get undoDescription(): string | undefined {
+        return undoManager.undoDescription
+    }
+
+    get redoDescription(): string | undefined {
+        return undoManager.redoDescription
+    }
+
     async undo() {
         await undoManager.undo()
     }
 
-    undoDescription(): string | undefined {
-        return undoManager.undoDescription
-    }
-
     async redo() {
         await undoManager.redo()
     }
-
-    redoDescription(): string | undefined {
-        return undoManager.redoDescription
-    }
 }
 
 const mutator = new Mutator()
diff --git a/webapp/src/pages/boardPage.tsx b/webapp/src/pages/boardPage.tsx
index 09197a887..42902baac 100644
--- a/webapp/src/pages/boardPage.tsx
+++ b/webapp/src/pages/boardPage.tsx
@@ -74,21 +74,29 @@ export default class BoardPage extends React.Component<Props, State> {
 
         if (e.keyCode === 90 && !e.shiftKey && (e.ctrlKey || e.metaKey) && !e.altKey) { // Cmd+Z
             Utils.log('Undo')
-            const description = mutator.undoDescription()
-            await mutator.undo()
-            if (description) {
-                FlashMessage.show(`Undo ${description}`)
+            if (mutator.canUndo) {
+                const description = mutator.undoDescription
+                await mutator.undo()
+                if (description) {
+                    FlashMessage.show(`Undo ${description}`)
+                } else {
+                    FlashMessage.show('Undo')
+                }
             } else {
-                FlashMessage.show('Undo')
+                FlashMessage.show('Nothing to Undo', 800, 'background-color: #909050;')
             }
         } else if (e.keyCode === 90 && e.shiftKey && (e.ctrlKey || e.metaKey) && !e.altKey) { // Shift+Cmd+Z
             Utils.log('Redo')
-            const description = mutator.redoDescription()
-            await mutator.redo()
-            if (description) {
-                FlashMessage.show(`Redo ${description}`)
+            if (mutator.canRedo) {
+                const description = mutator.redoDescription
+                await mutator.redo()
+                if (description) {
+                    FlashMessage.show(`Redo ${description}`)
+                } else {
+                    FlashMessage.show('Redo')
+                }
             } else {
-                FlashMessage.show('Redo')
+                FlashMessage.show('Nothing to Redo', 800, 'background-color: #909050;')
             }
         }
     }