feat: Prevent simultaneous updates in AutodraftSettings and disable controls during updates

This commit is contained in:
Chris Parsons 2025-10-26 22:09:22 -07:00
parent 609c4e7b2c
commit be8cabeac7

View file

@ -22,6 +22,7 @@ export function AutodraftSettings({
}: AutodraftSettingsProps) { }: AutodraftSettingsProps) {
const [localEnabled, setLocalEnabled] = useState(isEnabled); const [localEnabled, setLocalEnabled] = useState(isEnabled);
const [localMode, setLocalMode] = useState<"next_pick" | "while_on">(mode); const [localMode, setLocalMode] = useState<"next_pick" | "while_on">(mode);
const [isUpdating, setIsUpdating] = useState(false);
// Sync local state with props when they change (from socket events) // Sync local state with props when they change (from socket events)
useEffect(() => { useEffect(() => {
@ -33,7 +34,10 @@ export function AutodraftSettings({
}, [mode]); }, [mode]);
const handleToggle = async (checked: boolean) => { const handleToggle = async (checked: boolean) => {
if (isUpdating) return; // Prevent multiple simultaneous updates
setLocalEnabled(checked); setLocalEnabled(checked);
setIsUpdating(true);
try { try {
const formData = new FormData(); const formData = new FormData();
@ -58,11 +62,17 @@ export function AutodraftSettings({
// Revert on error // Revert on error
setLocalEnabled(!checked); setLocalEnabled(!checked);
console.error("Error updating autodraft settings:", error); console.error("Error updating autodraft settings:", error);
} finally {
setIsUpdating(false);
} }
}; };
const handleModeChange = async (newMode: "next_pick" | "while_on") => { const handleModeChange = async (newMode: "next_pick" | "while_on") => {
if (isUpdating) return; // Prevent multiple simultaneous updates
const previousMode = localMode;
setLocalMode(newMode); setLocalMode(newMode);
setIsUpdating(true);
try { try {
const formData = new FormData(); const formData = new FormData();
@ -80,13 +90,15 @@ export function AutodraftSettings({
onUpdate(localEnabled, newMode); onUpdate(localEnabled, newMode);
} else { } else {
// Revert on error // Revert on error
setLocalMode(localMode); setLocalMode(previousMode);
console.error("Failed to update autodraft mode"); console.error("Failed to update autodraft mode");
} }
} catch (error) { } catch (error) {
// Revert on error // Revert on error
setLocalMode(localMode); setLocalMode(previousMode);
console.error("Error updating autodraft mode:", error); console.error("Error updating autodraft mode:", error);
} finally {
setIsUpdating(false);
} }
}; };
@ -100,7 +112,7 @@ export function AutodraftSettings({
id="autodraft-switch" id="autodraft-switch"
checked={localEnabled} checked={localEnabled}
onCheckedChange={handleToggle} onCheckedChange={handleToggle}
disabled={isMyTurn} disabled={isMyTurn || isUpdating}
/> />
</div> </div>
@ -108,23 +120,23 @@ export function AutodraftSettings({
<RadioGroup <RadioGroup
value={localMode} value={localMode}
onValueChange={(value) => handleModeChange(value as "next_pick" | "while_on")} onValueChange={(value) => handleModeChange(value as "next_pick" | "while_on")}
disabled={isMyTurn} disabled={isMyTurn || isUpdating}
className="space-y-2" className="space-y-2"
> >
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<RadioGroupItem value="next_pick" id="next_pick" disabled={isMyTurn} /> <RadioGroupItem value="next_pick" id="next_pick" disabled={isMyTurn || isUpdating} />
<Label <Label
htmlFor="next_pick" htmlFor="next_pick"
className={`text-sm ${isMyTurn ? "text-muted-foreground" : "cursor-pointer"}`} className={`text-sm ${isMyTurn || isUpdating ? "text-muted-foreground" : "cursor-pointer"}`}
> >
Next Pick Next Pick
</Label> </Label>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<RadioGroupItem value="while_on" id="while_on" disabled={isMyTurn} /> <RadioGroupItem value="while_on" id="while_on" disabled={isMyTurn || isUpdating} />
<Label <Label
htmlFor="while_on" htmlFor="while_on"
className={`text-sm ${isMyTurn ? "text-muted-foreground" : "cursor-pointer"}`} className={`text-sm ${isMyTurn || isUpdating ? "text-muted-foreground" : "cursor-pointer"}`}
> >
While On While On
</Label> </Label>