Skip to content

Commit e56bf8c

Browse files
toddaheathclaude
andcommitted
Fix react-hooks/refs lint errors in undo/redo implementation
Replace ref.current reads during render with canUndo/canRedo state values updated in push/undo/redo/reset callbacks. Remove the undoRedoVersion workaround state from App.tsx which is no longer needed. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 39e724d commit e56bf8c

File tree

2 files changed

+22
-12
lines changed

2 files changed

+22
-12
lines changed

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,8 @@ export default function App() {
8080
// Undo/redo stacks
8181
const undoStackRef = useRef<Design[]>([]);
8282
const redoStackRef = useRef<Design[]>([]);
83-
const [undoRedoVersion, setUndoRedoVersion] = useState(0);
83+
const [canUndo, setCanUndo] = useState(false);
84+
const [canRedo, setCanRedo] = useState(false);
8485

8586
// Sync localDesign when currentDesign changes from API
8687
const activeDesign = localDesign?.id === currentDesign?.id ? localDesign : currentDesign;
@@ -107,7 +108,8 @@ export default function App() {
107108
undoStackRef.current.push(design);
108109
if (undoStackRef.current.length > 50) undoStackRef.current.shift();
109110
redoStackRef.current = [];
110-
setUndoRedoVersion(v => v + 1);
111+
setCanUndo(true);
112+
setCanRedo(false);
111113
}, []);
112114

113115
const handleDesignChange = useCallback(
@@ -127,7 +129,8 @@ export default function App() {
127129
redoStackRef.current.push(activeDesign);
128130
setLocalDesign(prev);
129131
setCurrentDesign(prev);
130-
setUndoRedoVersion(v => v + 1);
132+
setCanUndo(undoStackRef.current.length > 0);
133+
setCanRedo(true);
131134
}
132135
}, [activeDesign, setCurrentDesign]);
133136

@@ -137,7 +140,8 @@ export default function App() {
137140
undoStackRef.current.push(activeDesign);
138141
setLocalDesign(next);
139142
setCurrentDesign(next);
140-
setUndoRedoVersion(v => v + 1);
143+
setCanUndo(true);
144+
setCanRedo(redoStackRef.current.length > 0);
141145
}
142146
}, [activeDesign, setCurrentDesign]);
143147

@@ -162,7 +166,8 @@ export default function App() {
162166
setLocalDesign(null);
163167
undoStackRef.current = [];
164168
redoStackRef.current = [];
165-
setUndoRedoVersion(v => v + 1);
169+
setCanUndo(false);
170+
setCanRedo(false);
166171
loadDesign(id);
167172
},
168173
[loadDesign]
@@ -175,11 +180,6 @@ export default function App() {
175180
[createDesign]
176181
);
177182

178-
const canUndo = undoStackRef.current.length > 0;
179-
const canRedo = redoStackRef.current.length > 0;
180-
// Reference undoRedoVersion to trigger re-render
181-
void undoRedoVersion;
182-
183183
return (
184184
<ThemeProvider theme={theme}>
185185
<CssBaseline />

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

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ interface UndoRedoState<T> {
1212

1313
export function useUndoRedo<T>(initialState: T, maxHistory = 50): UndoRedoState<T> {
1414
const [current, setCurrent] = useState(initialState);
15+
const [canUndo, setCanUndo] = useState(false);
16+
const [canRedo, setCanRedo] = useState(false);
1517
const undoStack = useRef<T[]>([]);
1618
const redoStack = useRef<T[]>([]);
1719

@@ -24,6 +26,8 @@ export function useUndoRedo<T>(initialState: T, maxHistory = 50): UndoRedoState<
2426
redoStack.current = [];
2527
return state;
2628
});
29+
setCanUndo(true);
30+
setCanRedo(false);
2731
}, [maxHistory]);
2832

2933
const undo = useCallback(() => {
@@ -33,6 +37,8 @@ export function useUndoRedo<T>(initialState: T, maxHistory = 50): UndoRedoState<
3337
redoStack.current.push(c);
3438
return prev;
3539
});
40+
setCanUndo(undoStack.current.length > 0);
41+
setCanRedo(true);
3642
return prev;
3743
}
3844
return undefined;
@@ -45,6 +51,8 @@ export function useUndoRedo<T>(initialState: T, maxHistory = 50): UndoRedoState<
4551
undoStack.current.push(c);
4652
return next;
4753
});
54+
setCanUndo(true);
55+
setCanRedo(redoStack.current.length > 0);
4856
return next;
4957
}
5058
return undefined;
@@ -54,12 +62,14 @@ export function useUndoRedo<T>(initialState: T, maxHistory = 50): UndoRedoState<
5462
undoStack.current = [];
5563
redoStack.current = [];
5664
setCurrent(state);
65+
setCanUndo(false);
66+
setCanRedo(false);
5767
}, []);
5868

5969
return {
6070
current,
61-
canUndo: undoStack.current.length > 0,
62-
canRedo: redoStack.current.length > 0,
71+
canUndo,
72+
canRedo,
6373
push,
6474
undo,
6575
redo,

0 commit comments

Comments
 (0)