static handlers; use onBlur instead of onChange

which gets converted to onInput due to preact/compat

frontend/src/pages/HistoricalCalendarPrices/HistoricalCalendarPrices.tsx

@@ -36,8 +36,7 @@ const chosenLookbackPeriodStart = signal("2022-01-01");
 const chosenLookbackPeriodEnd = signal("2024-01-01");
 
 
-export function HistoricalCalendarPrices(){
-  const refreshHistoricalStockQuoteChartData = useCallback(()=>{
+const refreshHistoricalStockQuoteChartData = ()=>{
   trpc.getHistoricalStockQuoteChartData
     .query({
       underlying:chosenUnderlying.value,
@@ -47,8 +46,8 @@ export function HistoricalCalendarPrices(){
     .then((getHistoricalStockQuoteChartDataResponse)=>{
       historicalStockQuoteChartData.value = getHistoricalStockQuoteChartDataResponse;
     })
-  },[]);
-  const refreshHistoricalCalendarQuoteChartData = useCallback(()=>{
+};
+const refreshHistoricalCalendarQuoteChartData = ()=>{
   trpc.getHistoricalCalendarQuoteChartData
     .query({
       underlying:chosenUnderlying.value,
@@ -62,8 +61,8 @@ export function HistoricalCalendarPrices(){
     .then((getHistoricalCalendarQuoteChartDataResponse)=>{
       historicalCalendarQuoteChartData.value = getHistoricalCalendarQuoteChartDataResponse;
     })
-  },[]);
-  const refreshHistoricalCalendarExitQuoteChartData = useCallback(()=>{
+};
+const refreshHistoricalCalendarExitQuoteChartData = ()=>{
   trpc.getHistoricalCalendarExitQuoteChartData
     .query({
       underlying:chosenUnderlying.value,
@@ -75,8 +74,8 @@ export function HistoricalCalendarPrices(){
     .then((getHistoricalCalendarExitQuoteChartDataResponse)=>{
       historicalCalendarExitQuoteChartData.value = getHistoricalCalendarExitQuoteChartDataResponse;
     })
-  },[]);
-  const handleInit = useCallback(()=>{
+};
+const handleInit = ()=>{
   trpc.getAvailableUnderlyings
     .query()
     .then((availableUnderlyingsResponse)=>{
@@ -86,48 +85,65 @@ export function HistoricalCalendarPrices(){
       refreshHistoricalCalendarQuoteChartData();
       refreshHistoricalCalendarExitQuoteChartData();
     });
-  },[]);
-  const handleUnderlyingChange = useCallback((e)=>{
+};
+const handleUnderlyingChange = (e)=>{
+  if(chosenUnderlying.value !== e.target.value){
     chosenUnderlying.value = e.target.value;
     refreshHistoricalStockQuoteChartData();
     refreshHistoricalCalendarQuoteChartData();
     refreshHistoricalCalendarExitQuoteChartData();
-  },[]);
-  const handleDaysToFrontExpirationChange = useCallback((e)=>{
+  }
+};
+const handleDaysToFrontExpirationChange = (e)=>{
+  if(chosenDaysToFrontExpiration.value !== parseInt(e.target.value)){
     chosenDaysToFrontExpiration.value = parseInt(e.target.value);
     refreshHistoricalCalendarQuoteChartData();
-  },[]);
-  const handleDaysBetweenFrontAndBackExpirationChange = useCallback((e)=>{
+  }
+};
+const handleDaysBetweenFrontAndBackExpirationChange = (e)=>{
+  if(chosenDaysBetweenFrontAndBackExpiration.value !== parseInt(e.target.value)){
     chosenDaysBetweenFrontAndBackExpiration.value = parseInt(e.target.value);
     refreshHistoricalCalendarQuoteChartData();
     refreshHistoricalCalendarExitQuoteChartData();
-  },[]);
-  const handleStrikePercentageFromUnderlyingPriceChange = useCallback((e)=>{
+  }
+};
+const handleStrikePercentageFromUnderlyingPriceChange = (e)=>{
+  if(chosenStrikePercentageFromUnderlyingPrice.value !== parseFloat(e.target.value)){
     chosenStrikePercentageFromUnderlyingPrice.value = parseFloat(e.target.value);
     refreshHistoricalCalendarQuoteChartData();
-  },[]);
-  const handleStrikePercentageFromUnderlyingPriceRadiusChange = useCallback((e)=>{
+  }
+};
+const handleStrikePercentageFromUnderlyingPriceRadiusChange = (e)=>{
+  if(chosenStrikePercentageFromUnderlyingPriceRadius.value !== parseFloat(e.target.value)){
     chosenStrikePercentageFromUnderlyingPriceRadius.value = parseFloat(e.target.value);
     refreshHistoricalCalendarQuoteChartData();
-  },[]);
-  const handleExitToFrontExpirationChange = useCallback((e)=>{
+  }
+};
+const handleExitToFrontExpirationChange = (e)=>{
+  if(chosenExitToFrontExpiration.value !== parseInt(e.target.value)){
     chosenExitToFrontExpiration.value = parseInt(e.target.value);
     refreshHistoricalCalendarExitQuoteChartData();
-  },[]);
+  }
+};
 
-  const handleLookbackPeriodStartChange = useCallback((e)=>{
+const handleLookbackPeriodStartChange = (e)=>{
+  if(chosenLookbackPeriodStart.value !== e.target.value){
     chosenLookbackPeriodStart.value = e.target.value;
     refreshHistoricalStockQuoteChartData();
     refreshHistoricalCalendarQuoteChartData();
     refreshHistoricalCalendarExitQuoteChartData();
-  },[]);
-  const handleLookbackPeriodEndChange = useCallback((e)=>{
+  }
+};
+const handleLookbackPeriodEndChange = (e)=>{
+  if(chosenLookbackPeriodEnd.value !== e.target.value){
     chosenLookbackPeriodEnd.value = e.target.value;
     refreshHistoricalStockQuoteChartData();
     refreshHistoricalCalendarQuoteChartData();
     refreshHistoricalCalendarExitQuoteChartData();
-  },[]);
+  }
+};
 
+export function HistoricalCalendarPrices(){
   useEffect(handleInit, []);
 
   return (
@@ -146,32 +162,32 @@ export function HistoricalCalendarPrices(){
       </div>
       <div>
         <label>Now-to-Front-Month "Days to Expiration"</label>
-        <input type="text" onChange={handleDaysToFrontExpirationChange} value={chosenDaysToFrontExpiration.value} />
+        <input type="text" onBlur={handleDaysToFrontExpirationChange} value={chosenDaysToFrontExpiration.value} />
         Days
       </div>
       <div>
         <label>Front-to-Back-Month "Days to Expiration" Difference</label>
-        <input type="text" onChange={handleDaysBetweenFrontAndBackExpirationChange} value={chosenDaysBetweenFrontAndBackExpiration.value} />
+        <input type="text" onBlur={handleDaysBetweenFrontAndBackExpirationChange} value={chosenDaysBetweenFrontAndBackExpiration.value} />
         Days Difference
       </div>
       <div>
         <label>"Strike Percentage From Underlying Price" Range</label>
-        <input type="text" onChange={handleStrikePercentageFromUnderlyingPriceChange} value={chosenStrikePercentageFromUnderlyingPrice.value} />
+        <input type="text" onBlur={handleStrikePercentageFromUnderlyingPriceChange} value={chosenStrikePercentageFromUnderlyingPrice.value} />
         %
         +/-
-        <input type="text" onChange={handleStrikePercentageFromUnderlyingPriceRadiusChange} value={chosenStrikePercentageFromUnderlyingPriceRadius.value} />
+        <input type="text" onBlur={handleStrikePercentageFromUnderlyingPriceRadiusChange} value={chosenStrikePercentageFromUnderlyingPriceRadius.value} />
         % from ATM
       </div>
       <div>
         <label>Exit-to-Front-Month "Days to Expiration"</label>
-        <input type="text" onChange={handleExitToFrontExpirationChange} value={chosenExitToFrontExpiration.value} />
+        <input type="text" onBlur={handleExitToFrontExpirationChange} value={chosenExitToFrontExpiration.value} />
         Days
       </div>
       <div>
         <label>Lookback Period</label>
-        <input type="text" onChange={handleLookbackPeriodStartChange} value={chosenLookbackPeriodStart.value} />
+        <input type="text" onBlur={handleLookbackPeriodStartChange} value={chosenLookbackPeriodStart.value} />
         -
-        <input type="text" onChange={handleLookbackPeriodEndChange} value={chosenLookbackPeriodEnd.value} />
+        <input type="text" onBlur={handleLookbackPeriodEndChange} value={chosenLookbackPeriodEnd.value} />
       </div>
       <div className="chart-container">
         {chosenUnderlying.value!==null && historicalStockQuoteChartData.value.length>0

server/src/index.ts

@@ -46,7 +46,7 @@ const appRouter = router({
     }),
   getExpirationsForUnderlying: publicProcedure
     .input(RpcType(ObjectT({
-      underlying:StringT(),
+      underlying:StringT({maxLength:5}),
       asOfDate:StringT()
     })))
     .query(async (opts)=>{
@@ -62,7 +62,7 @@ const appRouter = router({
     }),
   getStrikesForUnderlying: publicProcedure
     .input(RpcType(ObjectT({
-      underlying:StringT(),
+      underlying:StringT({maxLength:5}),
       asOfDate:StringT(),
       expirationDate:StringT(),
     })))
@@ -80,7 +80,7 @@ const appRouter = router({
     }),
   getOpensForUnderlying: publicProcedure
     .input(RpcType(ObjectT({
-      underlying:StringT()
+      underlying:StringT({maxLength:5})
     })))
     .query(async (opts)=>{
       const {underlying} = opts.input;
@@ -96,7 +96,7 @@ const appRouter = router({
     }),
   getOpensForOptionContract: publicProcedure
     .input(RpcType(ObjectT({
-      underlying:StringT(),
+      underlying:StringT({maxLength:5}),
       expirationDate:StringT(),
       strike:NumberT()
     })))
@@ -117,7 +117,7 @@ const appRouter = router({
     }),
   getHistoricalCalendarPrices: publicProcedure
     .input(RpcType(ObjectT({
-      underlying:StringT(),
+      underlying:StringT({maxLength:5}),
       daysToFrontExpiration:NumberT(),
       daysBetweenFrontAndBackExpiration:NumberT(),
       strikePercentageFromUnderlyingPriceRangeMin:NumberT(),
@@ -140,7 +140,7 @@ const appRouter = router({
     }),
   getHistoricalStockQuoteChartData: publicProcedure
     .input(RpcType(ObjectT({
-      underlying:StringT(),
+      underlying:StringT({maxLength:5}),
       lookbackPeriodStart:StringT(),
       lookbackPeriodEnd:StringT(),
     })))
@@ -159,7 +159,7 @@ const appRouter = router({
     }),
   getHistoricalCalendarQuoteChartData: publicProcedure
     .input(RpcType(ObjectT({
-      underlying:StringT(),
+      underlying:StringT({maxLength:5}),
       daysToFrontExpiration:NumberT(),
       daysBetweenFrontAndBackExpiration:NumberT(),
       strikePercentageFromUnderlyingPriceRangeMin:NumberT(),
@@ -185,11 +185,11 @@ const appRouter = router({
     }),
   getHistoricalCalendarExitQuoteChartData: publicProcedure
     .input(RpcType(ObjectT({
-      underlying:StringT(),
+      underlying:StringT({maxLength:5}),
       daysToFrontExpiration:NumberT(),
       daysBetweenFrontAndBackExpiration:NumberT(),
-      lookbackPeriodStart:StringT(),
-      lookbackPeriodEnd:StringT(),
+      lookbackPeriodStart:StringT({pattern:'[0-9]{4}\-[0-9]{2}\-[0-9]{2}'}),
+      lookbackPeriodEnd:StringT({pattern:'[0-9]{4}\-[0-9]{2}\-[0-9]{2}'}),
     })))
     .query(async (opts)=>{
       const {underlying, daysToFrontExpiration, daysBetweenFrontAndBackExpiration, lookbackPeriodStart, lookbackPeriodEnd, } = opts.input;