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

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"