calendar-optimizer/frontend/src/pages/CalendarOptimizer/index.tsx

import { signal } from "@preact/signals";
import { useCallback, useEffect } from "preact/hooks";
import {trpc} from '../../trpc.js';

const availableUnderlyings = signal([]);
const chosenUnderlying = signal(null);

const availableAsOfDates = signal([]);
const chosenAsOfDate = signal(null);

const availableExpirations = signal([]);
const chosenExpiration = signal(null);

const availableStrikes = signal([]);
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;
    trpc.getAvailableAsOfDates
      .query({underlying:e.target.value})
      .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;
    trpc.getExpirationsForUnderlying
      .query({underlying:chosenUnderlying.value, asOfDate:chosenAsOfDate.value})
      .then((getExpirationsForUnderlyingResponse)=>{
        availableExpirations.value = getExpirationsForUnderlyingResponse;
      });
  },[]);
  const handleExpirationChange = useCallback((e)=>{
    console.log(`Chose Expiration: ${e.target.value}`);
    chosenExpiration.value = e.target.value;
    trpc.getStrikesForUnderlying
      .query({underlying:chosenUnderlying.value, asOfDate:chosenAsOfDate.value, expirationDate: e.target.value})
      .then((getStrikesForUnderlyingResponse)=>{
        availableStrikes.value = getStrikesForUnderlyingResponse;
      });
  },[]);
  const handleStrikeChange = useCallback((e)=>{
    console.log(`Chose Strike: ${e.target.value}`);
    chosenStrike.value = e.target.value;
    trpc.getOpensForOptionContract
      .query({underlying:chosenUnderlying.value, expirationDate:chosenExpiration.value, strike:parseFloat(e.target.value)})
      .then((getOpensForOptionContractResponse)=>{
        optionContractUplotData.value = getOpensForOptionContractResponse;
      });
  },[]);

  useEffect(handleInit, []);

  return (
    <div>
      <div>
        <label>Available Underlyings</label>
        {
          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)=>(
                <option value={availableAsOfDate}>{availableAsOfDate}</option>
              ))}
            </select>
        }
      </div>
      <div>
        <label>Available Expirations</label>
        {
          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)=>(
                <option value={availableStrike}>{availableStrike}</option>
              ))}
            </select>
        }
      </div>
      {/* {chosenUnderlying.value!==null && underlyingUplotData.value.length>0
      ? <UPlot data={underlyingUplotData.value} title="Underlying" opts={uplotOpts}/>
      : <></>}
      {chosenUnderlying.value!==null && chosenAsOfDate.value!==null && chosenExpiration.value!==null && chosenStrike.value!==null && optionContractUplotData.value.length>0
      ? <UPlot data={optionContractUplotData.value} title="Option Contract" opts={uplotOpts}/>
      : <></>} */}
    </div>
  );
}