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) {
|
}: 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>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue