Skip to content

Commit

Permalink
improved version of slider in history page
Browse files Browse the repository at this point in the history
  • Loading branch information
@mnsrulz
mnsrulz committed Nov 13, 2024
1 parent 6190120 commit 287c813
Show file tree
Hide file tree
Showing 4 changed files with 68 additions and 37 deletions.
11 changes: 11 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@
"react-dom": "^18",
"react-hook-form": "^7.51.2",
"react-hook-form-mui": "^7.0.0-beta.4",
"react-photo-view": "^1.2.6",
"react-router-dom": "^6.22.3",
"socket.io-client": "^4.7.5",
"sort-by": "^1.2.0",
Expand Down
83 changes: 50 additions & 33 deletions src/components/HistoricalDex.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ import { useState } from 'react';
import { IconButton } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import { useMyLocalWatchList } from '@/lib/hooks';
import { PhotoProvider, PhotoView } from 'react-photo-view';
import 'react-photo-view/dist/react-photo-view.css';

export const HistoricalDex = (props: { dt: string, showAllSymbols: boolean }) => {
const { wl } = useMyLocalWatchList([]);
const mytickersSymbols = wl.map(r => r.symbol);
Expand All @@ -14,6 +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 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);
Expand All @@ -27,39 +31,52 @@ export const HistoricalDex = (props: { dt: string, showAllSymbols: boolean }) =>
const handleCloseDialog = () => {
setOpenDialog(false);
};
return <><ImageList cols={numberOfItemsToDisplay} gap={1}>
{ts.map((item) => (
<ImageListItem key={item.name} sx={{ width: '100%', height: '100px' }}>
<img src={`https://mztrading-data.deno.dev/images?dt=${dt}&s=${item.name}`}
style={{
width: '100%', height: 'auto', objectFit: 'cover',
transition: 'all 0.3s ease-in-out',
cursor: 'pointer',
// boxShadow: '0 0 10px rgba(0, 0, 0, 0.2)',
// '&:hover': {
// boxShadow: '0 0 20px rgba(0, 0, 0, 0.5)',
// transform: 'scale(1.05)',
// }

}}
loading="lazy"
onClick={() => handleImageClick(`https://mztrading-data.deno.dev/images?dt=${dt}&s=${item.name}`)} />
</ImageListItem>

return <PhotoProvider>
{/* <PhotoView src="/1.jpg">
<img src="/1-thumbnail.jpg" alt="" />
</PhotoView> */}
{ts.map((item) => (
<PhotoView key={item.assetUrl} src={item.assetUrl} >
<img src={item.assetUrl} width={imgWidth} style={{ objectFit: 'cover' }} alt={item.assetUrl}/>
</PhotoView>
))}
</ImageList>
<Dialog open={openDialog} onClose={handleCloseDialog} fullScreen={matchesXs}>
<DialogTitle>
<IconButton
aria-label="close"
onClick={handleCloseDialog}
sx={{ position: 'absolute', right: 8, top: 8 }}
>
<CloseIcon />
</IconButton>
</DialogTitle>
<DialogContent>
<img src={selectedImage} style={{ width: '100%', objectFit: 'contain' }} />
</DialogContent>
</Dialog>
</>;
</PhotoProvider>

// return <><ImageList cols={numberOfItemsToDisplay} gap={1}>
// {ts.map((item) => (
// <ImageListItem key={item.name} sx={{ width: '100%', height: '100px' }}>
// <img src={`https://mztrading-data.deno.dev/images?dt=${dt}&s=${item.name}`}
// style={{
// width: '100%', height: 'auto', objectFit: 'cover',
// transition: 'all 0.3s ease-in-out',
// cursor: 'pointer',
// // boxShadow: '0 0 10px rgba(0, 0, 0, 0.2)',
// // '&:hover': {
// // boxShadow: '0 0 20px rgba(0, 0, 0, 0.5)',
// // transform: 'scale(1.05)',
// // }

// }}
// loading="lazy"
// onClick={() => handleImageClick(`https://mztrading-data.deno.dev/images?dt=${dt}&s=${item.name}`)} />
// </ImageListItem>
// ))}
// </ImageList>
// <Dialog open={openDialog} onClose={handleCloseDialog} fullScreen={matchesXs}>
// <DialogTitle>
// <IconButton
// aria-label="close"
// onClick={handleCloseDialog}
// sx={{ position: 'absolute', right: 8, top: 8 }}
// >
// <CloseIcon />
// </IconButton>
// </DialogTitle>
// <DialogContent>
// <img src={selectedImage} style={{ width: '100%', objectFit: 'contain' }} />
// </DialogContent>
// </Dialog>
// </>;
}
10 changes: 6 additions & 4 deletions src/lib/socket.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,8 @@ export type CachedReleasesType = {
}

export type CachedReleaseSymbolType = {
name: string
name: string,
assetUrl: string
}

export type OptionsHedgingData = {
Expand Down Expand Up @@ -248,16 +249,17 @@ export const useCachedReleaseData = () => {
return { cachedSummaryData: data, isLoadingCachedSummaryData: isLoading };
}

export const useCachedReleaseSymbolData = (r: string) => {
export const useCachedReleaseSymbolData = (dt: string) => {
const [data, setOd] = useState<CachedReleaseSymbolType[]>([]);
const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
setIsLoading(true);
ky(`https://mztrading-data.deno.dev/releases/symbols?r=${r}`).json<CachedReleaseSymbolType[]>().then(r => {
ky(`https://mztrading-data.deno.dev/releases/symbols?r=${dt}`).json<CachedReleaseSymbolType[]>().then(r => {
r.forEach(m => m.assetUrl = `https://mztrading-data.deno.dev/images?dt=${dt}&s=${m.name}`);
setOd(r);
}).finally(() => setIsLoading(false));
}, [r]);
}, [dt]);

return { cachedSummarySymbolsData: data, isLoadingCachedSummaryData: isLoading };
}
Expand Down

0 comments on commit 287c813

Please sign in to comment.