From 0856c9f3d405ca2287669944b509e3c5072dcf7a Mon Sep 17 00:00:00 2001
From: Avraham Sakal <briansakal@gmail.com>
Date: Mon, 26 Jun 2023 00:47:18 -0400
Subject: [PATCH] begin get prices over time

---
 dist/index.js | 18 ++++++++++++++++--
 src/App.tsx   | 23 ++++++++++++++++++++---
 2 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/dist/index.js b/dist/index.js
index 4736628..dfad756 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -36718,9 +36718,23 @@ var $isStrikePickerEnabled = atom((get) => get($selectedQuoteDate) !== "" && get
 var $selectedStrike = atom("");
 var $frontMonthExpirationPickerUrl = atom((get) => `${baseUrl}/option_quotes/${get($selectedUnderlying)}/${get($selectedQuoteDate)}/expirations`);
 var $isFrontMonthExpirationPickerEnabled = atom((get) => get($selectedQuoteDate) !== "" && get($selectedUnderlying) !== "");
+var $selectedFrontExpiration = atom("");
 var $backMonthExpirationPickerUrl = atom((get) => `${baseUrl}/option_quotes/${get($selectedUnderlying)}/${get($selectedQuoteDate)}/expirations`);
 var $isBackMonthExpirationPickerEnabled = atom((get) => get($selectedQuoteDate) !== "" && get($selectedUnderlying) !== "");
+var $selectedBackExpiration = atom("");
+var $prices = atom((get) => {
+  const selectedUnderlying = get($selectedUnderlying);
+  const selectedStrike = get($selectedStrike);
+  const selectedFrontExpiration = get($selectedFrontExpiration);
+  const selectedBackExpiration = get($selectedBackExpiration);
+  if (selectedUnderlying !== "" && selectedStrike !== "" && selectedFrontExpiration !== "" && selectedBackExpiration !== "") {
+    return fetch(`${baseUrl}/option_quotes/${selectedUnderlying}/${selectedStrike}/${selectedFrontExpiration}/${selectedBackExpiration}`).then((x) => x.json()).catch(() => []);
+  } else {
+    return Promise.resolve([]);
+  }
+});
 function App() {
+  const prices = useAtomValue($prices);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: App_module_default.app, children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Header_default, {}),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: App_module_default.picker, children: [
@@ -36737,11 +36751,11 @@ function App() {
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: App_module_default.picker, children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { children: "Front Expiration" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Picker, { $url: $frontMonthExpirationPickerUrl, $isEnabled: $isFrontMonthExpirationPickerEnabled })
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Picker, { $url: $frontMonthExpirationPickerUrl, $isEnabled: $isFrontMonthExpirationPickerEnabled, $selectedOption: $selectedFrontExpiration })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: App_module_default.picker, children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { children: "Back Expiration" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Picker, { $url: $backMonthExpirationPickerUrl, $isEnabled: $isBackMonthExpirationPickerEnabled })
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Picker, { $url: $backMonthExpirationPickerUrl, $isEnabled: $isBackMonthExpirationPickerEnabled, $selectedOption: $selectedBackExpiration })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HistoricalImpliedVolatilityChart, {})
   ] });
diff --git a/src/App.tsx b/src/App.tsx
index 9dad557..8a8e750 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,7 @@
 import Header from './Header';
 import { HistoricalImpliedVolatilityChart } from "./HistoricalImpliedVolatilityChart";
 import { Picker } from './Picker';
-import { atom as $ } from 'jotai';
+import { atom as $, useAtomValue } from 'jotai';
 //import './index.css';
 //@ts-ignore
 import k from './App.module.css';
@@ -22,19 +22,36 @@ const $selectedStrike = $('');
 
 const $frontMonthExpirationPickerUrl = $((get) => `${baseUrl}/option_quotes/${get($selectedUnderlying)}/${get($selectedQuoteDate)}/expirations`);
 const $isFrontMonthExpirationPickerEnabled = $((get) => get($selectedQuoteDate)!=='' && get($selectedUnderlying)!=='');
+const $selectedFrontExpiration = $('');
 
 const $backMonthExpirationPickerUrl = $((get) => `${baseUrl}/option_quotes/${get($selectedUnderlying)}/${get($selectedQuoteDate)}/expirations`);
 const $isBackMonthExpirationPickerEnabled = $((get) => get($selectedQuoteDate)!=='' && get($selectedUnderlying)!=='');
+const $selectedBackExpiration = $('');
+
+const $prices = $((get)=>{
+  const selectedUnderlying = get($selectedUnderlying);
+  const selectedStrike = get($selectedStrike);
+  const selectedFrontExpiration = get($selectedFrontExpiration);
+  const selectedBackExpiration = get($selectedBackExpiration);
+  if(selectedUnderlying!=='' && selectedStrike!=='' && selectedFrontExpiration!=='' && selectedBackExpiration!==''){
+    return fetch(`${baseUrl}/option_quotes/${selectedUnderlying}/${selectedStrike}/${selectedFrontExpiration}/${selectedBackExpiration}`).then(x=>x.json()).catch(()=>[]);
+  }
+  else{
+    return Promise.resolve([]);
+  }
+});
 
 function App() {
+  const prices = useAtomValue($prices);
+
   return (
   <div className={k.app}>
     <Header />
     <div className={k.picker}><label>Underlying</label><Picker $url={$underlyingsUrl} $selectedOption={$selectedUnderlying} /></div>
     <div className={k.picker}><label>Quote Date</label><Picker $url={$quoteDatePickerUrl} $isEnabled={$isQuoteDatePickerEnabled} $selectedOption={$selectedQuoteDate}/></div>
     <div className={k.picker}><label>Strike</label><Picker $url={$strikePickerUrl} $isEnabled={$isStrikePickerEnabled} $selectedOption={$selectedStrike}/></div>
-    <div className={k.picker}><label>Front Expiration</label><Picker $url={$frontMonthExpirationPickerUrl} $isEnabled={$isFrontMonthExpirationPickerEnabled} /></div>
-    <div className={k.picker}><label>Back Expiration</label><Picker $url={$backMonthExpirationPickerUrl} $isEnabled={$isBackMonthExpirationPickerEnabled} /></div>
+    <div className={k.picker}><label>Front Expiration</label><Picker $url={$frontMonthExpirationPickerUrl} $isEnabled={$isFrontMonthExpirationPickerEnabled} $selectedOption={$selectedFrontExpiration} /></div>
+    <div className={k.picker}><label>Back Expiration</label><Picker $url={$backMonthExpirationPickerUrl} $isEnabled={$isBackMonthExpirationPickerEnabled} $selectedOption={$selectedBackExpiration} /></div>
     <HistoricalImpliedVolatilityChart />
   </div>
   );