henry/AITrader
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve TradingSettings validation, debounce, accessibility, and cleanup

Browse Source
This commit is contained in:
henry
2026-05-16 21:01:08 +02:00
parent faf642b043
commit 2d6551fd35
1 changed files with 39 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/TradingSettings.tsx
+39 -17
View File
@@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react";
import { useState, useEffect, useRef } from "react";
interface TradingSettingsProps {
settings: Record<string, any>;
@@ -13,6 +13,8 @@ export default function TradingSettings({ settings, onSave, saveError }: Trading
const [stopLossPercent, setStopLossPercent] = useState(settings["trading.stopLossPercent"] ?? 3);
const [riskMethod, setRiskMethod] = useState(settings["trading.riskMethod"] ?? "percentage");
const saveTimersRef = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map());
useEffect(() => {
setMaxLossPercent(settings["trading.maxLossPercent"] ?? 2);
setPositionSizePercent(settings["trading.positionSizePercent"] ?? 10);
@@ -21,10 +23,25 @@ export default function TradingSettings({ settings, onSave, saveError }: Trading
setRiskMethod(settings["trading.riskMethod"] ?? "percentage");
}, [settings]);
const save = async (key: string, value: any) => {
await onSave(key, value);
const debouncedSave = (key: string, value: any) => {
if (saveTimersRef.current.has(key)) {
clearTimeout(saveTimersRef.current.get(key)!);
}
const timer = setTimeout(() => {
onSave(key, value);
saveTimersRef.current.delete(key);
}, 300);
saveTimersRef.current.set(key, timer);
};
useEffect(() => {
return () => {
saveTimersRef.current.forEach((timer) => clearTimeout(timer));
};
}, []);
const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);
return (
<div className="space-y-6">
<div>
@@ -38,17 +55,18 @@ export default function TradingSettings({ settings, onSave, saveError }: Trading
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Max Loss %</label>
<label htmlFor="max-loss" className="block text-sm font-medium text-gray-700 mb-1">Max Loss %</label>
<input
id="max-loss"
type="number"
min="0.1"
max="100"
step="0.1"
value={maxLossPercent}
onChange={(e) => {
const v = parseFloat(e.target.value) || 0;
const v = clamp(parseFloat(e.target.value) || 0.1, 0.1, 100);
setMaxLossPercent(v);
save("trading.maxLossPercent", v);
debouncedSave("trading.maxLossPercent", v);
}}
className="w-32 border border-gray-300 rounded-lg px-4 py-2.5 text-gray-900 focus:ring-2 focus:ring-blue-500"
/>
@@ -56,17 +74,18 @@ export default function TradingSettings({ settings, onSave, saveError }: Trading
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Position Size %</label>
<label htmlFor="position-size" className="block text-sm font-medium text-gray-700 mb-1">Position Size %</label>
<input
id="position-size"
type="number"
min="1"
max="100"
step="1"
value={positionSizePercent}
onChange={(e) => {
const v = parseInt(e.target.value) || 1;
const v = clamp(parseInt(e.target.value) || 1, 1, 100);
setPositionSizePercent(v);
save("trading.positionSizePercent", v);
debouncedSave("trading.positionSizePercent", v);
}}
className="w-32 border border-gray-300 rounded-lg px-4 py-2.5 text-gray-900 focus:ring-2 focus:ring-blue-500"
/>
@@ -74,17 +93,18 @@ export default function TradingSettings({ settings, onSave, saveError }: Trading
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Take Profit %</label>
<label htmlFor="take-profit" className="block text-sm font-medium text-gray-700 mb-1">Take Profit %</label>
<input
id="take-profit"
type="number"
min="0.1"
max="100"
step="0.1"
value={takeProfitPercent}
onChange={(e) => {
const v = parseFloat(e.target.value) || 0;
const v = clamp(parseFloat(e.target.value) || 0.1, 0.1, 100);
setTakeProfitPercent(v);
save("trading.takeProfitPercent", v);
debouncedSave("trading.takeProfitPercent", v);
}}
className="w-32 border border-gray-300 rounded-lg px-4 py-2.5 text-gray-900 focus:ring-2 focus:ring-blue-500"
/>
@@ -92,17 +112,18 @@ export default function TradingSettings({ settings, onSave, saveError }: Trading
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Stop Loss %</label>
<label htmlFor="stop-loss" className="block text-sm font-medium text-gray-700 mb-1">Stop Loss %</label>
<input
id="stop-loss"
type="number"
min="0.1"
max="100"
step="0.1"
value={stopLossPercent}
onChange={(e) => {
const v = parseFloat(e.target.value) || 0;
const v = clamp(parseFloat(e.target.value) || 0.1, 0.1, 100);
setStopLossPercent(v);
save("trading.stopLossPercent", v);
debouncedSave("trading.stopLossPercent", v);
}}
className="w-32 border border-gray-300 rounded-lg px-4 py-2.5 text-gray-900 focus:ring-2 focus:ring-blue-500"
/>
@@ -110,12 +131,13 @@ export default function TradingSettings({ settings, onSave, saveError }: Trading
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Risk Method</label>
<label htmlFor="risk-method" className="block text-sm font-medium text-gray-700 mb-1">Risk Method</label>
<select
id="risk-method"
value={riskMethod}
onChange={(e) => {
setRiskMethod(e.target.value);
save("trading.riskMethod", e.target.value);
debouncedSave("trading.riskMethod", e.target.value);
}}
className="w-full border border-gray-300 rounded-lg px-4 py-2.5 text-gray-900 focus:ring-2 focus:ring-blue-500"
>