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 { interface TradingSettingsProps {
settings: Record<string, any>; 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 [stopLossPercent, setStopLossPercent] = useState(settings["trading.stopLossPercent"] ?? 3);
const [riskMethod, setRiskMethod] = useState(settings["trading.riskMethod"] ?? "percentage"); const [riskMethod, setRiskMethod] = useState(settings["trading.riskMethod"] ?? "percentage");
const saveTimersRef = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map());
useEffect(() => { useEffect(() => {
setMaxLossPercent(settings["trading.maxLossPercent"] ?? 2); setMaxLossPercent(settings["trading.maxLossPercent"] ?? 2);
setPositionSizePercent(settings["trading.positionSizePercent"] ?? 10); setPositionSizePercent(settings["trading.positionSizePercent"] ?? 10);
@@ -21,10 +23,25 @@ export default function TradingSettings({ settings, onSave, saveError }: Trading
setRiskMethod(settings["trading.riskMethod"] ?? "percentage"); setRiskMethod(settings["trading.riskMethod"] ?? "percentage");
}, [settings]); }, [settings]);
const save = async (key: string, value: any) => { const debouncedSave = (key: string, value: any) => {
await onSave(key, value); 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 ( return (
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
@@ -38,17 +55,18 @@ export default function TradingSettings({ settings, onSave, saveError }: Trading
<div className="space-y-4"> <div className="space-y-4">
<div> <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 <input
id="max-loss"
type="number" type="number"
min="0.1" min="0.1"
max="100" max="100"
step="0.1" step="0.1"
value={maxLossPercent} value={maxLossPercent}
onChange={(e) => { onChange={(e) => {
const v = parseFloat(e.target.value) || 0; const v = clamp(parseFloat(e.target.value) || 0.1, 0.1, 100);
setMaxLossPercent(v); 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" 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>
<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 <input
id="position-size"
type="number" type="number"
min="1" min="1"
max="100" max="100"
step="1" step="1"
value={positionSizePercent} value={positionSizePercent}
onChange={(e) => { onChange={(e) => {
const v = parseInt(e.target.value) || 1; const v = clamp(parseInt(e.target.value) || 1, 1, 100);
setPositionSizePercent(v); 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" 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>
<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 <input
id="take-profit"
type="number" type="number"
min="0.1" min="0.1"
max="100" max="100"
step="0.1" step="0.1"
value={takeProfitPercent} value={takeProfitPercent}
onChange={(e) => { onChange={(e) => {
const v = parseFloat(e.target.value) || 0; const v = clamp(parseFloat(e.target.value) || 0.1, 0.1, 100);
setTakeProfitPercent(v); 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" 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>
<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 <input
id="stop-loss"
type="number" type="number"
min="0.1" min="0.1"
max="100" max="100"
step="0.1" step="0.1"
value={stopLossPercent} value={stopLossPercent}
onChange={(e) => { onChange={(e) => {
const v = parseFloat(e.target.value) || 0; const v = clamp(parseFloat(e.target.value) || 0.1, 0.1, 100);
setStopLossPercent(v); 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" 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>
<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 <select
id="risk-method"
value={riskMethod} value={riskMethod}
onChange={(e) => { onChange={(e) => {
setRiskMethod(e.target.value); 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" className="w-full border border-gray-300 rounded-lg px-4 py-2.5 text-gray-900 focus:ring-2 focus:ring-blue-500"
> >