feat: Prevent simultaneous updates in AutodraftSettings and disable controls during updates
This commit is contained in:
parent
609c4e7b2c
commit
be8cabeac7
1 changed files with 20 additions and 8 deletions
|
|
@ -22,6 +22,7 @@ export function AutodraftSettings({
|
|||
}: AutodraftSettingsProps) {
|
||||
const [localEnabled, setLocalEnabled] = useState(isEnabled);
|
||||
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)
|
||||
useEffect(() => {
|
||||
|
|
@ -33,7 +34,10 @@ export function AutodraftSettings({
|
|||
}, [mode]);
|
||||
|
||||
const handleToggle = async (checked: boolean) => {
|
||||
if (isUpdating) return; // Prevent multiple simultaneous updates
|
||||
|
||||
setLocalEnabled(checked);
|
||||
setIsUpdating(true);
|
||||
|
||||
try {
|
||||
const formData = new FormData();
|
||||
|
|
@ -58,11 +62,17 @@ export function AutodraftSettings({
|
|||
// Revert on error
|
||||
setLocalEnabled(!checked);
|
||||
console.error("Error updating autodraft settings:", error);
|
||||
} finally {
|
||||
setIsUpdating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleModeChange = async (newMode: "next_pick" | "while_on") => {
|
||||
if (isUpdating) return; // Prevent multiple simultaneous updates
|
||||
|
||||
const previousMode = localMode;
|
||||
setLocalMode(newMode);
|
||||
setIsUpdating(true);
|
||||
|
||||
try {
|
||||
const formData = new FormData();
|
||||
|
|
@ -80,13 +90,15 @@ export function AutodraftSettings({
|
|||
onUpdate(localEnabled, newMode);
|
||||
} else {
|
||||
// Revert on error
|
||||
setLocalMode(localMode);
|
||||
setLocalMode(previousMode);
|
||||
console.error("Failed to update autodraft mode");
|
||||
}
|
||||
} catch (error) {
|
||||
// Revert on error
|
||||
setLocalMode(localMode);
|
||||
setLocalMode(previousMode);
|
||||
console.error("Error updating autodraft mode:", error);
|
||||
} finally {
|
||||
setIsUpdating(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -100,7 +112,7 @@ export function AutodraftSettings({
|
|||
id="autodraft-switch"
|
||||
checked={localEnabled}
|
||||
onCheckedChange={handleToggle}
|
||||
disabled={isMyTurn}
|
||||
disabled={isMyTurn || isUpdating}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -108,23 +120,23 @@ export function AutodraftSettings({
|
|||
<RadioGroup
|
||||
value={localMode}
|
||||
onValueChange={(value) => handleModeChange(value as "next_pick" | "while_on")}
|
||||
disabled={isMyTurn}
|
||||
disabled={isMyTurn || isUpdating}
|
||||
className="space-y-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
|
||||
htmlFor="next_pick"
|
||||
className={`text-sm ${isMyTurn ? "text-muted-foreground" : "cursor-pointer"}`}
|
||||
className={`text-sm ${isMyTurn || isUpdating ? "text-muted-foreground" : "cursor-pointer"}`}
|
||||
>
|
||||
Next Pick
|
||||
</Label>
|
||||
</div>
|
||||
<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
|
||||
htmlFor="while_on"
|
||||
className={`text-sm ${isMyTurn ? "text-muted-foreground" : "cursor-pointer"}`}
|
||||
className={`text-sm ${isMyTurn || isUpdating ? "text-muted-foreground" : "cursor-pointer"}`}
|
||||
>
|
||||
While On
|
||||
</Label>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue