refactor calendar optimizer page

frontend/src/pages/CalendarOptimizer/index.tsx

@@ -1,6 +1,6 @@
 import { signal } from "@preact/signals";
 import { useCallback, useEffect } from "preact/hooks";
-import {trpc} from '../../trpc.js';
+import { trpc } from "../../trpc.js";
 
 const availableUnderlyings = signal([]);
 const chosenUnderlying = signal(null);
@@ -17,55 +17,87 @@ const chosenStrike = signal(null);
 const optionContractUplotData = signal([]);
 const underlyingUplotData = signal([]);
 
-export function CalendarOptimizer(){
-  const handleInit = useCallback(()=>{
-    trpc.getAvailableUnderlyings
-      .query()
-      .then((availableUnderlyingsResponse)=>{
-        availableUnderlyings.value = availableUnderlyingsResponse;
-      });
-  },[]);
-  const handleUnderlyingChange = useCallback((e)=>{
-    console.log(`Chose Underlying: ${e.target.value}`);
-    chosenUnderlying.value = e.target.value;
+function chooseUnderlying(underlying: string) {
+  chosenUnderlying.value = underlying;
   trpc.getAvailableAsOfDates
-      .query({underlying:e.target.value})
-      .then((getAvailableAsOfDatesResponse)=>{
+    .query({ underlying: underlying })
+    .then((getAvailableAsOfDatesResponse) => {
       availableAsOfDates.value = getAvailableAsOfDatesResponse;
+      chooseAsOfDate(getAvailableAsOfDatesResponse[0]);
     });
   trpc.getOpensForUnderlying
-      .query({underlying:e.target.value})
-      .then((getOpensForUnderlyingResponse)=>{
+    .query({ underlying: underlying })
+    .then((getOpensForUnderlyingResponse) => {
       underlyingUplotData.value = getOpensForUnderlyingResponse;
     });
-  },[]);
-  const handleAsOfDateChange = useCallback((e)=>{
-    console.log(`Chose Date: ${e.target.value}`);
-    chosenAsOfDate.value = e.target.value;
+}
+
+function chooseAsOfDate(asOfDate: string) {
+  chosenAsOfDate.value = asOfDate;
   trpc.getExpirationsForUnderlying
-      .query({underlying:chosenUnderlying.value, asOfDate:chosenAsOfDate.value})
-      .then((getExpirationsForUnderlyingResponse)=>{
+    .query({
+      underlying: chosenUnderlying.value,
+      asOfDate: chosenAsOfDate.value,
+    })
+    .then((getExpirationsForUnderlyingResponse) => {
       availableExpirations.value = getExpirationsForUnderlyingResponse;
+      chooseExpiration(getExpirationsForUnderlyingResponse[0]);
     });
-  },[]);
-  const handleExpirationChange = useCallback((e)=>{
-    console.log(`Chose Expiration: ${e.target.value}`);
-    chosenExpiration.value = e.target.value;
+}
+
+function chooseExpiration(expiration: string) {
+  chosenExpiration.value = expiration;
   trpc.getStrikesForUnderlying
-      .query({underlying:chosenUnderlying.value, asOfDate:chosenAsOfDate.value, expirationDate: e.target.value})
-      .then((getStrikesForUnderlyingResponse)=>{
+    .query({
+      underlying: chosenUnderlying.value,
+      asOfDate: chosenAsOfDate.value,
+      expirationDate: expiration,
+    })
+    .then((getStrikesForUnderlyingResponse) => {
       availableStrikes.value = getStrikesForUnderlyingResponse;
+      chooseStrike(getStrikesForUnderlyingResponse[0]);
     });
-  },[]);
-  const handleStrikeChange = useCallback((e)=>{
-    console.log(`Chose Strike: ${e.target.value}`);
-    chosenStrike.value = e.target.value;
+}
+
+function chooseStrike(strike: string) {
+  chosenStrike.value = strike;
   trpc.getOpensForOptionContract
-      .query({underlying:chosenUnderlying.value, expirationDate:chosenExpiration.value, strike:parseFloat(e.target.value)})
-      .then((getOpensForOptionContractResponse)=>{
+    .query({
+      underlying: chosenUnderlying.value,
+      expirationDate: chosenExpiration.value,
+      strike: parseFloat(strike),
+    })
+    .then((getOpensForOptionContractResponse) => {
       optionContractUplotData.value = getOpensForOptionContractResponse;
     });
-  },[]);
+}
+
+export function CalendarOptimizer() {
+  const handleInit = useCallback(() => {
+    trpc.getAvailableUnderlyings
+      .query()
+      .then((availableUnderlyingsResponse) => {
+        availableUnderlyings.value = availableUnderlyingsResponse;
+        // load first underlying in list:
+        chooseUnderlying(availableUnderlyingsResponse[0]);
+      });
+  }, []);
+  const handleUnderlyingChange = useCallback((e) => {
+    console.log(`Chose Underlying: ${e.target.value}`);
+    chooseUnderlying(e.target.value);
+  }, []);
+  const handleAsOfDateChange = useCallback((e) => {
+    console.log(`Chose Date: ${e.target.value}`);
+    chooseAsOfDate(e.target.value);
+  }, []);
+  const handleExpirationChange = useCallback((e) => {
+    console.log(`Chose Expiration: ${e.target.value}`);
+    chooseExpiration(e.target.value);
+  }, []);
+  const handleStrikeChange = useCallback((e) => {
+    console.log(`Chose Strike: ${e.target.value}`);
+    chooseStrike(e.target.value);
+  }, []);
 
   useEffect(handleInit, []);
 
@@ -73,51 +105,51 @@ export function CalendarOptimizer(){
     <div>
       <div>
         <label>Available Underlyings</label>
-        {
-          availableUnderlyings.value.length === 0 
-          ? "Loading..." 
-          : <select onChange={handleUnderlyingChange}>
-              {availableUnderlyings.value.map((availableUnderlying)=>(
+        {availableUnderlyings.value.length === 0 ? (
+          "Loading..."
+        ) : (
+          <select onChange={handleUnderlyingChange}>
+            {availableUnderlyings.value.map((availableUnderlying) => (
               <option value={availableUnderlying}>{availableUnderlying}</option>
             ))}
           </select>
-        }
+        )}
       </div>
       <div>
         <label>Available "As-of" Dates</label>
-        {
-          availableAsOfDates.value.length === 0 
-          ? "Loading..." 
-          : <select onChange={handleAsOfDateChange}>
-              {availableAsOfDates.value.map((availableAsOfDate)=>(
+        {availableAsOfDates.value.length === 0 ? (
+          "Loading..."
+        ) : (
+          <select onChange={handleAsOfDateChange}>
+            {availableAsOfDates.value.map((availableAsOfDate) => (
               <option value={availableAsOfDate}>{availableAsOfDate}</option>
             ))}
           </select>
-        }
+        )}
       </div>
       <div>
         <label>Available Expirations</label>
-        {
-          availableExpirations.value.length === 0 
-          ? "Loading..." 
-          : <select onChange={handleExpirationChange}>
-              {availableExpirations.value.map((availableExpiration)=>(
+        {availableExpirations.value.length === 0 ? (
+          "Loading..."
+        ) : (
+          <select onChange={handleExpirationChange}>
+            {availableExpirations.value.map((availableExpiration) => (
               <option value={availableExpiration}>{availableExpiration}</option>
             ))}
           </select>
-        }
+        )}
       </div>
       <div>
         <label>Available Strikes</label>
-        {
-          availableStrikes.value.length === 0 
-          ? "Loading..." 
-          : <select onChange={handleStrikeChange}>
-              {availableStrikes.value.map((availableStrike)=>(
+        {availableStrikes.value.length === 0 ? (
+          "Loading..."
+        ) : (
+          <select onChange={handleStrikeChange}>
+            {availableStrikes.value.map((availableStrike) => (
               <option value={availableStrike}>{availableStrike}</option>
             ))}
           </select>
-        }
+        )}
       </div>
       {/* {chosenUnderlying.value!==null && underlyingUplotData.value.length>0
       ? <UPlot data={underlyingUplotData.value} title="Underlying" opts={uplotOpts}/>

server/src/index.ts

@@ -149,7 +149,7 @@ const appRouter = router({
         WHERE symbol = '${underlying}'
         AND expirationDate = '${expirationDate}'
         AND strike = ${strike}
-        AND optionType = 'call'
+        AND type = 'call'
         ORDER BY tsStart ASC
       `,
           "JSONCompactEachRow"