symbol decode to allow spx

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

@@ -10,15 +10,16 @@ export async function GET(request: Request, p: { params: { symbol: string } }) {
   const strikeCountValue = parseInt(searchParams.get("sc") || '30');
   console.log(`calling with ${dteValue} dtes`);
   const { symbol } = p.params;
-  const currentPrice = await getCurrentPrice(symbol);
+  const cleanSymbol = symbol.replace(/\W/g, '');  //to support ^spx and other similar symbols
+  const currentPrice = await getCurrentPrice(cleanSymbol);
   if (!currentPrice) throw new Error('Unable to evaluate current price')
 
-  const expresp = await getOptionExpirations(symbol);
+  const expresp = await getOptionExpirations(cleanSymbol);
 
   const tillDate = dayjs().add(dteValue, 'days');
   console.log(`all expirations: ${expresp.expirations.date}`);
   const allDates = [...new Set(expresp.expirations.date.filter(j => dayjs(j).isBefore(tillDate)))];
-  const allOptionChains = await Promise.all(allDates.map(d => getOptionData(symbol, d)));
+  const allOptionChains = await Promise.all(allDates.map(d => getOptionData(cleanSymbol, d)));
 
   const allStrikes = getCalculatedStrikes(currentPrice, strikeCountValue, [...new Set(allOptionChains.flatMap(j => j.options.option.map(s => s.strike)))]);
   const finalResponse = calculateHedging(allOptionChains, allStrikes, allDates, currentPrice)

src/app/options/analyze/[symbol]/page.tsx

@@ -1,10 +1,9 @@
-'use client';
 import { StockOptionsView } from "@/components/StockOptionsView";
-import { useParams } from "next/navigation";
 
-export default function Page() {
-    const { symbol } = useParams<{ symbol: string }>()
+export default function Page({ params }: { params: { symbol: string } }) {
+    const { symbol } = params;
     return (
-        <StockOptionsView symbol={symbol} />
+        // <span>{JSON.stringify({symbol: decodeURIComponent(symbol).replace(/\W/g, '')})}</span>
+        <StockOptionsView symbol={decodeURIComponent(symbol).replace(/\W/g, '')} />
     );
 }

src/app/seasonal/[symbol]/page.tsx

@@ -7,9 +7,10 @@ export default async function Page({ params, searchParams }: { params: { symbol:
     const { symbol } = params;
     const p = await searchParams;
     const mode = p['mode'] as string || 'Daily';
-    const component = await getComponent(mode, symbol);
+    const cleanSymbol = decodeURIComponent(symbol).replace(/\W/g, '');
+    const component = await getComponent(mode, cleanSymbol);
     return <Box sx={{ mt: 1 }}>
-        <SeasonHeader symbol={symbol} mode={mode} />
+        <SeasonHeader symbol={cleanSymbol} mode={mode} />
         <Divider />
         {component}
     </Box>

src/components/HistoricalDex.tsx

@@ -17,7 +17,7 @@ export const HistoricalDex = (props: { dt: string, showAllSymbols: boolean }) =>
     const matchesXs = useMediaQuery(theme.breakpoints.down("sm"));
     const matchesMd = useMediaQuery(theme.breakpoints.down("md"));
     const numberOfItemsToDisplay = matchesXs ? 2 : matchesMd ? 3 : 4;
-    const imgWidth = `${(100/numberOfItemsToDisplay)}%`;
+    const imgWidth = `${(100 / numberOfItemsToDisplay)}%`;
     const ts = cachedSummarySymbolsData.filter(r => showAllSymbols || mytickersSymbols.includes(r.name));    //make sure to load only those which are part of the watchlist.
 
     const [openDialog, setOpenDialog] = useState(false);
@@ -34,15 +34,15 @@ export const HistoricalDex = (props: { dt: string, showAllSymbols: boolean }) =>
 
 
     return <PhotoProvider>
-    {/* <PhotoView src="/1.jpg">
+        {/* <PhotoView src="/1.jpg">
       <img src="/1-thumbnail.jpg" alt="" />
     </PhotoView> */}
-    {ts.map((item) => (
+        {ts.map((item) => (
             <PhotoView key={item.assetUrl} src={item.assetUrl} >
-                <img src={item.assetUrl} width={imgWidth} style={{ objectFit: 'cover' }} alt={item.assetUrl}/>
+                <img loading='lazy' src={item.assetUrl} width={imgWidth} height="auto" style={{ objectFit: 'cover' }} alt={item.assetUrl} />
             </PhotoView>
         ))}
-  </PhotoProvider>
+    </PhotoProvider>
 
     // return <><ImageList cols={numberOfItemsToDisplay} gap={1}>
     //     {ts.map((item) => (

src/components/StockOptionsView.tsx

@@ -1,4 +1,4 @@
-
+'use client';
 import * as React from 'react';
 import { useOptionTracker } from '../lib/socket';
 import { GridColDef, DataGrid, gridClasses } from '@mui/x-data-grid';