Merge pull request #13 from mnsrulz/main

sync: main to stage

src/app/api/symbols/[symbol]/options/analyze/route.ts

@@ -3,7 +3,7 @@ import { NextResponse } from "next/server";
 //export const runtime = 'edge';
 
 export async function GET(request: Request, p: { params: { symbol: string } }) {
-    const resp = await ky(`https://www.optionsprofitcalculator.com/ajax/getOptions?stock=${p.params.symbol}&reqId=1`).json<{ currentPrice: number | undefined }>();
+    const resp = await ky(`https://www.optionsprofitcalculator.com/ajax/getOptions?stock=${p.params.symbol}&reqId=${new Date().getTime()}`).json<{ currentPrice: number | undefined }>();
     const priceresp = await ky(`https://www.optionsprofitcalculator.com/ajax/getStockPrice?stock=${p.params.symbol}&reqId=${new Date().getTime()}`).json<{ price: { last: number | undefined } }>();
     resp.currentPrice = priceresp.price.last;
     return NextResponse.json(resp);

src/app/options/analyze/page.tsx

@@ -0,0 +1,8 @@
+'use client';
+import { TickerSearch } from "@/components/ticker-search";
+import { useRouter } from 'next/navigation'
+
+export default function Page() {
+    const router = useRouter();
+    return <TickerSearch onChange={(v) => router.push(`/options/analyze/${v.symbol}`)} />
+}

src/app/routes.tsx

@@ -28,6 +28,7 @@ import { signOut } from 'next-auth/react'
 const pages = [
     { title: 'Home', href: '/' },
     { title: 'Trades', href: '/trades' },
+    { title: 'Option analyzer', href: '/options/analyze' },
     { title: 'History', href: '/history' }
 ];
 const settings = ['Profile', 'Logout'];
@@ -77,6 +78,7 @@ function MyTabs() {
             <Button><Link href="/" className=''>Home</Link></Button>
             <Button><Link href="/trades" className=''>Trades</Link></Button>
             <Button><Link href="/history">History</Link></Button>
+            <Button><Link href="/options/analyze">Option Analyzer</Link></Button>
         </ButtonGroup>
     );
 }

src/components/stock-options-view.tsx

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { NumberRange, useOptionTracker } from '../lib/socket';
 import { GridColDef, DataGrid, gridClasses } from '@mui/x-data-grid';
-import { Box, FormControl, Grid, InputLabel, MenuItem, Paper, Select, Slider, Stack, Tab, Tabs } from '@mui/material';
+import { Box, FormControl, Grid, InputLabel, MenuItem, Paper, Select, Slider, Stack, Tab, Tabs, LinearProgress } from '@mui/material';
 import { useState } from 'react';
 import dayjs from 'dayjs';
 import { percentageFormatter } from '@/lib/formatters';
@@ -61,7 +61,7 @@ export const StockOptionsView = (props: ITickerProps) => {
     const [priceMode, setPriceMode] = useState<PriceModeType>('AVG_PRICE');
     const [valueMode, setValueMode] = useState<ValueModeType>('PRICE');
 
-    if (isLoading) return <div>loading...</div>;
+    if (isLoading) return <LinearProgress /> ;
     const allDates = data && Array.from(Object.keys(data.options));
     const allStrikePrices = allDates && Array.from(new Set(allDates.flatMap(d => Object.keys(data.options[d].c))))//.map(Number).sort(function (a, b) { return a - b; });
     if (!allDates || !allStrikePrices) return <div>no option data found!!!</div>;

src/components/ticker-search.tsx

@@ -1,4 +1,4 @@
-import { Autocomplete, TextField, debounce } from '@mui/material';
+import { Autocomplete, CircularProgress, TextField, debounce } from '@mui/material';
 import * as React from 'react';
 import { SearchTickerItem, searchTicker } from '../lib/socket';
 import { useEffect, useMemo, useState } from 'react';
@@ -9,6 +9,7 @@ interface ITickerProps {
 
 export const TickerSearch = (props: ITickerProps) => {
     const [options, setOptions] = useState<SearchTickerItem[]>([]);
+    const [loading, setLoading] = useState(false);
     const onInputChange = (ev: any, value: any, reason: any) => {
         if (value) {
             getData(value);
@@ -22,8 +23,10 @@ export const TickerSearch = (props: ITickerProps) => {
       , []);
 
     const getData = async (searchTerm: string) => {
+        setLoading(true);
         const result = await searchTicker(searchTerm);
         setOptions(result);
+        setLoading(false);
     };
 
     return <Autocomplete filterOptions={(x) => x}
@@ -39,7 +42,7 @@ export const TickerSearch = (props: ITickerProps) => {
                     ...params.InputProps,
                     endAdornment: (
                         <React.Fragment>
-                            {/* {loading ? <CircularProgress color="inherit" size={20} /> : null} */}
+                            {loading ? <CircularProgress color="inherit" size={20} /> : null}
                             {params.InputProps.endAdornment}
                         </React.Fragment>
                     ),

src/lib/socket.ts

@@ -112,7 +112,7 @@ export type NumberRange = { start: number, end: number }
 
 export const useOptionTracker = (symbol: string) => {
     const [data, setOd] = useState<OptionsData>();
-    const [isLoading, setIsLoading] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
     const [strikePriceRange, setStrikePriceRange] = useState<NumberRange>({ start: 0, end: Number.MAX_VALUE });
 
     useEffect(() => {
@@ -121,7 +121,7 @@ export const useOptionTracker = (symbol: string) => {
             setOd(r);
             const { currentPrice } = r;
             const thresholdValue = currentPrice * 0.1;
-            debugger;
+            // debugger;
             setStrikePriceRange({
                 start: Math.round(currentPrice - thresholdValue),
                 end: Math.round(currentPrice + thresholdValue)