Merge pull request #6 from toddaheath/fix/ui-lint-ref-during-render

Fix react-hooks/refs lint errors in undo/redo implementation

Author: toddaheath

src/shed-builder-ui/src/components/App.tsx

@@ -80,7 +80,8 @@ export default function App() {
   // Undo/redo stacks
   const undoStackRef = useRef<Design[]>([]);
   const redoStackRef = useRef<Design[]>([]);
-  const [undoRedoVersion, setUndoRedoVersion] = useState(0);
+  const [canUndo, setCanUndo] = useState(false);
+  const [canRedo, setCanRedo] = useState(false);
 
   // Sync localDesign when currentDesign changes from API
   const activeDesign = localDesign?.id === currentDesign?.id ? localDesign : currentDesign;
@@ -107,7 +108,8 @@ export default function App() {
     undoStackRef.current.push(design);
     if (undoStackRef.current.length > 50) undoStackRef.current.shift();
     redoStackRef.current = [];
-    setUndoRedoVersion(v => v + 1);
+    setCanUndo(true);
+    setCanRedo(false);
   }, []);
 
   const handleDesignChange = useCallback(
@@ -127,7 +129,8 @@ export default function App() {
       redoStackRef.current.push(activeDesign);
       setLocalDesign(prev);
       setCurrentDesign(prev);
-      setUndoRedoVersion(v => v + 1);
+      setCanUndo(undoStackRef.current.length > 0);
+      setCanRedo(true);
     }
   }, [activeDesign, setCurrentDesign]);
 
@@ -137,7 +140,8 @@ export default function App() {
       undoStackRef.current.push(activeDesign);
       setLocalDesign(next);
       setCurrentDesign(next);
-      setUndoRedoVersion(v => v + 1);
+      setCanUndo(true);
+      setCanRedo(redoStackRef.current.length > 0);
     }
   }, [activeDesign, setCurrentDesign]);
 
@@ -162,7 +166,8 @@ export default function App() {
       setLocalDesign(null);
       undoStackRef.current = [];
       redoStackRef.current = [];
-      setUndoRedoVersion(v => v + 1);
+      setCanUndo(false);
+      setCanRedo(false);
       loadDesign(id);
     },
     [loadDesign]
@@ -175,11 +180,6 @@ export default function App() {
     [createDesign]
   );
 
-  const canUndo = undoStackRef.current.length > 0;
-  const canRedo = redoStackRef.current.length > 0;
-  // Reference undoRedoVersion to trigger re-render
-  void undoRedoVersion;
-
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />

src/shed-builder-ui/src/hooks/useUndoRedo.ts

@@ -12,6 +12,8 @@ interface UndoRedoState<T> {
 
 export function useUndoRedo<T>(initialState: T, maxHistory = 50): UndoRedoState<T> {
   const [current, setCurrent] = useState(initialState);
+  const [canUndo, setCanUndo] = useState(false);
+  const [canRedo, setCanRedo] = useState(false);
   const undoStack = useRef<T[]>([]);
   const redoStack = useRef<T[]>([]);
 
@@ -24,6 +26,8 @@ export function useUndoRedo<T>(initialState: T, maxHistory = 50): UndoRedoState<
       redoStack.current = [];
       return state;
     });
+    setCanUndo(true);
+    setCanRedo(false);
   }, [maxHistory]);
 
   const undo = useCallback(() => {
@@ -33,6 +37,8 @@ export function useUndoRedo<T>(initialState: T, maxHistory = 50): UndoRedoState<
         redoStack.current.push(c);
         return prev;
       });
+      setCanUndo(undoStack.current.length > 0);
+      setCanRedo(true);
       return prev;
     }
     return undefined;
@@ -45,6 +51,8 @@ export function useUndoRedo<T>(initialState: T, maxHistory = 50): UndoRedoState<
         undoStack.current.push(c);
         return next;
       });
+      setCanUndo(true);
+      setCanRedo(redoStack.current.length > 0);
       return next;
     }
     return undefined;
@@ -54,12 +62,14 @@ export function useUndoRedo<T>(initialState: T, maxHistory = 50): UndoRedoState<
     undoStack.current = [];
     redoStack.current = [];
     setCurrent(state);
+    setCanUndo(false);
+    setCanRedo(false);
   }, []);
 
   return {
     current,
-    canUndo: undoStack.current.length > 0,
-    canRedo: redoStack.current.length > 0,
+    canUndo,
+    canRedo,
     push,
     undo,
     redo,