From 19eb7e65ba6c179fa22593d6f11e0f9f57641873 Mon Sep 17 00:00:00 2001 From: mnsrulz Date: Sun, 10 Nov 2024 13:43:42 -0500 Subject: [PATCH 1/3] allow loading all historical released symbols --- src/app/history/page.tsx | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/src/app/history/page.tsx b/src/app/history/page.tsx index 78b65e2..15fdb0b 100644 --- a/src/app/history/page.tsx +++ b/src/app/history/page.tsx @@ -1,17 +1,17 @@ 'use client'; import { useCachedReleaseData, useCachedReleaseSymbolData, useMyStockList } from '@/lib/socket'; -import { Dialog, DialogContent, DialogTitle, FormControl, Grid, ImageList, ImageListItem, InputLabel, LinearProgress, Link, MenuItem, Select, useMediaQuery, useTheme } from '@mui/material'; +import { Dialog, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, ImageList, ImageListItem, InputLabel, LinearProgress, Link, MenuItem, Select, Switch, useMediaQuery, useTheme } from '@mui/material'; import { useState } from 'react'; -import { IconButton} from '@mui/material'; +import { IconButton } from '@mui/material'; import CloseIcon from '@mui/icons-material/Close'; -const D1 = (props: { dt: string, mytickersSymbols: string[] }) => { - const { dt, mytickersSymbols } = props; +const D1 = (props: { dt: string, mytickersSymbols: string[], showAllSymbols: boolean }) => { + const { dt, mytickersSymbols, showAllSymbols } = props; const { cachedSummarySymbolsData } = useCachedReleaseSymbolData(dt); const theme = useTheme(); const matchesXs = useMediaQuery(theme.breakpoints.down("sm")); const matchesMd = useMediaQuery(theme.breakpoints.down("md")); const numberOfItemsToDisplay = matchesXs ? 2 : matchesMd ? 3 : 4; - const ts = cachedSummarySymbolsData.filter(r => mytickersSymbols.includes(r.name)); //make sure to load only those which are part of the watchlist. + 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); const [selectedImage, setSelectedImage] = useState(''); @@ -28,7 +28,8 @@ const D1 = (props: { dt: string, mytickersSymbols: string[] }) => { {ts.map((item) => ( { // transform: 'scale(1.05)', // } - }} + }} loading="lazy" onClick={() => handleImageClick(`https://mztrading-data.deno.dev/images?dt=${dt}&s=${item.name}`)} /> @@ -62,6 +63,7 @@ const D1 = (props: { dt: string, mytickersSymbols: string[] }) => { export default function Page() { const { mytickers, loading } = useMyStockList(); + const [showAllSymbols, setShowAllSymbols] = useState(false); const { cachedSummaryData, isLoadingCachedSummaryData } = useCachedReleaseData(); const [dataMode, setDataMode] = useState(''); if (isLoadingCachedSummaryData || loading) return ; @@ -85,9 +87,12 @@ export default function Page() { } - Legacy Mode + + setShowAllSymbols(v)} />} label="Show all?" /> + + {/* Legacy Mode */} - + ); } From e3f2bd484a8dbcdf33f5dcb485f350364b48b54f Mon Sep 17 00:00:00 2001 From: mnsrulz Date: Sun, 10 Nov 2024 14:21:54 -0500 Subject: [PATCH 2/3] made watchlist items local to users --- src/app/history/page.tsx | 6 ++++-- src/components/Watchlist.tsx | 27 +++++++++++++++++---------- src/lib/hooks.ts | 24 ++++++++++++++++++++++-- 3 files changed, 43 insertions(+), 14 deletions(-) diff --git a/src/app/history/page.tsx b/src/app/history/page.tsx index 15fdb0b..21d2be5 100644 --- a/src/app/history/page.tsx +++ b/src/app/history/page.tsx @@ -4,6 +4,7 @@ import { Dialog, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid import { useState } from 'react'; import { IconButton } from '@mui/material'; import CloseIcon from '@mui/icons-material/Close'; +import { useMyLocalWatchList } from '@/lib/hooks'; const D1 = (props: { dt: string, mytickersSymbols: string[], showAllSymbols: boolean }) => { const { dt, mytickersSymbols, showAllSymbols } = props; const { cachedSummarySymbolsData } = useCachedReleaseSymbolData(dt); @@ -63,12 +64,13 @@ const D1 = (props: { dt: string, mytickersSymbols: string[], showAllSymbols: boo export default function Page() { const { mytickers, loading } = useMyStockList(); + const { wl } = useMyLocalWatchList(mytickers); const [showAllSymbols, setShowAllSymbols] = useState(false); const { cachedSummaryData, isLoadingCachedSummaryData } = useCachedReleaseData(); const [dataMode, setDataMode] = useState(''); if (isLoadingCachedSummaryData || loading) return ; const cachedDates = cachedSummaryData.map(j => j.name); - const mytickersSymbols = mytickers.map(r => r.symbol) + const mytickersSymbols = wl.map(r => r.symbol); const dt = dataMode || cachedDates.at(0) || ''; return ( <> @@ -88,7 +90,7 @@ export default function Page() { - setShowAllSymbols(v)} />} label="Show all?" /> + setShowAllSymbols(v)} />} label="Show all?" /> {/* Legacy Mode */} diff --git a/src/components/Watchlist.tsx b/src/components/Watchlist.tsx index 53d5c5d..c4af319 100644 --- a/src/components/Watchlist.tsx +++ b/src/components/Watchlist.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import DeleteIcon from '@mui/icons-material/Delete'; import InfoIcon from '@mui/icons-material/Info'; -import { Button, Dialog, DialogContent, DialogTitle, FormControl, InputLabel, MenuItem, Select } from '@mui/material'; +import { Button, Dialog, DialogContent, DialogTitle, FormControl, MenuItem, Select } from '@mui/material'; import { DataGrid, GridActionsCellItem, GridColDef, useGridApiRef } from '@mui/x-data-grid'; import { useEffect, useState } from 'react'; import { StockTickerSymbolView, StockTickerView } from './StockTicker'; @@ -14,6 +14,7 @@ import { TickerSearch } from './TickerSearch'; import { TradingViewWidgetDialog } from './TradingViewWidgetDialog'; import { subscribeStockPriceBatchRequest } from '@/lib/socket'; import collect from 'collect.js'; +import { useMyLocalWatchList } from '@/lib/hooks'; interface IWatchlistProps { tickers: SearchTickerItem[] @@ -23,18 +24,20 @@ interface IWatchlistProps { } export const Watchlist = (props: IWatchlistProps) => { - const { tickers, removFromWatchlist, loading, addToWatchlist } = props; + const { tickers, loading, addToWatchlist } = props; + const { wl , removeFromMyList, addToMyList} = useMyLocalWatchList(tickers); + const apiRef = useGridApiRef(); const [currentStock, setCurrentStock] = useState(null); const [sortMode, setSortMode] = useState('symbol'); - + useEffect(() => { const interval = setInterval(() => { - subscribeStockPriceBatchRequest(tickers); + subscribeStockPriceBatchRequest(wl); }, 1000); //every one second just ping the server to resubscribe return () => clearInterval(interval); - }, [tickers]); + }, [wl]); const columns: GridColDef[] = [ { @@ -57,13 +60,13 @@ export const Watchlist = (props: IWatchlistProps) => { }, renderHeader: () => { return <>Sort {/* Sort by */} - + - setShowAllSymbols(v)} />} label="Show all?" /> + setShowAllSymbols(v)} />} label="Show all?" /> {/* Legacy Mode */} - + ); } diff --git a/src/components/HistoricalDex.tsx b/src/components/HistoricalDex.tsx new file mode 100644 index 0000000..deb5bed --- /dev/null +++ b/src/components/HistoricalDex.tsx @@ -0,0 +1,65 @@ +'use client'; +import { useCachedReleaseSymbolData } from '@/lib/socket'; +import { Dialog, DialogContent, DialogTitle, ImageList, ImageListItem, useMediaQuery, useTheme } from '@mui/material'; +import { useState } from 'react'; +import { IconButton } from '@mui/material'; +import CloseIcon from '@mui/icons-material/Close'; +import { useMyLocalWatchList } from '@/lib/hooks'; +export const HistoricalDex = (props: { dt: string, showAllSymbols: boolean }) => { + const { wl } = useMyLocalWatchList([]); + const mytickersSymbols = wl.map(r => r.symbol); + const { dt, showAllSymbols } = props; + const { cachedSummarySymbolsData } = useCachedReleaseSymbolData(dt); + const theme = useTheme(); + const matchesXs = useMediaQuery(theme.breakpoints.down("sm")); + const matchesMd = useMediaQuery(theme.breakpoints.down("md")); + const numberOfItemsToDisplay = matchesXs ? 2 : matchesMd ? 3 : 4; + 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); + const [selectedImage, setSelectedImage] = useState(''); + + const handleImageClick = (imageSrc: string) => { + setSelectedImage(imageSrc); + setOpenDialog(true); + }; + + const handleCloseDialog = () => { + setOpenDialog(false); + }; + return <> + {ts.map((item) => ( + + handleImageClick(`https://mztrading-data.deno.dev/images?dt=${dt}&s=${item.name}`)} /> + + ))} + + + + + + + + + + + + ; +} \ No newline at end of file