Disabled when undo stack is empty

leegee · Oct 17, 2024 · 1f20ea3 · 1f20ea3
1 parent 0382c20
commit 1f20ea3
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 11 deletions.
diff --git a/src/components/UndoButton.tsx b/src/components/UndoButton.tsx
@@ -2,14 +2,14 @@ import React from 'react';
 import useMusicStore from '../store';
 
 const UndoButton: React.FC = () => {
-    const { undo } = useMusicStore();
+    const { undo, undoStack } = useMusicStore();
 
     const handleUndo = () => {
         undo();
     };
 
     return (
-        <button onClick={handleUndo} >
+        <button onClick={handleUndo} disabled={!undoStack.length}>
             Undo
         </button>
     );

diff --git a/src/store.ts b/src/store.ts
@@ -256,17 +256,24 @@ function pushToUndoStack() {
     );
 
     useMusicStore.setState((state) => {
-        const newUndoStack = [
-            ...state.undoStack.slice(-MAX_HISTORY_ENTRIES + 1),
-            JSON.parse(JSON.stringify(stateToStore)),
-        ];
+        const isIdentical = state.undoStack.length > 0 &&
+            JSON.stringify(state.undoStack[state.undoStack.length - 1]) === JSON.stringify(stateToStore);
 
-        // Log the new state after setState
-        console.log("Updated undo stack:", newUndoStack);
+        if (!isIdentical) {
+            const newUndoStack = [
+                ...state.undoStack.slice(-MAX_HISTORY_ENTRIES + 1),
+                JSON.parse(JSON.stringify(stateToStore)),
+            ];
 
-        return {
-            undoStack: newUndoStack,
-        };
+            console.log("Updated undo stack:", newUndoStack);
+
+            return {
+                undoStack: newUndoStack,
+            };
+        }
+
+        // No change
+        return state;
     });
 }