From 8b5e463546c78aa0ea35ca65439b2b3aaf676b62 Mon Sep 17 00:00:00 2001 From: jeffvli Date: Wed, 8 Feb 2023 03:43:18 -0800 Subject: [PATCH] Remove tanstack/react-virtual package --- package-lock.json | 38 -- package.json | 1 - ...-artist-detail-discography-detail-list.tsx | 358 +++++++++--------- 3 files changed, 179 insertions(+), 218 deletions(-) diff --git a/package-lock.json b/package-lock.json index 86d73b5e..4efa1c2a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,7 +26,6 @@ "@mantine/utils": "^6.0.0-alpha.5", "@tanstack/react-query": "^4.24.4", "@tanstack/react-query-devtools": "^4.24.4", - "@tanstack/react-virtual": "^3.0.0-beta.43", "dayjs": "^1.11.6", "electron-debug": "^3.2.0", "electron-localshortcut": "^3.2.1", @@ -2284,30 +2283,6 @@ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, - "node_modules/@tanstack/react-virtual": { - "version": "3.0.0-beta.43", - "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.0.0-beta.43.tgz", - "integrity": "sha512-VrjbYlMXk8h8zu8sUOnZp8btBR3Scdsz0GJ/xcaRWsc6kmHJ9AUyayl/v4jFA5KN3mq4obdnzMW9SUVEgt2lfQ==", - "dependencies": { - "@tanstack/virtual-core": "3.0.0-beta.43" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/tannerlinsley" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, - "node_modules/@tanstack/virtual-core": { - "version": "3.0.0-beta.43", - "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.0.0-beta.43.tgz", - "integrity": "sha512-Hnpjtv4YuI7UgtGmlZ7yOkBXLwnvErilseWiVUBH66SU11CtkOWDdsKmh7LSrvqo+x/97wFtS+xmXmW365Igpg==", - "funding": { - "type": "github", - "url": "https://github.com/sponsors/tannerlinsley" - } - }, "node_modules/@teamsupercell/typings-for-css-modules-loader": { "version": "2.5.2", "resolved": "https://registry.npmjs.org/@teamsupercell/typings-for-css-modules-loader/-/typings-for-css-modules-loader-2.5.2.tgz", @@ -25238,19 +25213,6 @@ "use-sync-external-store": "^1.2.0" } }, - "@tanstack/react-virtual": { - "version": "3.0.0-beta.43", - "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.0.0-beta.43.tgz", - "integrity": "sha512-VrjbYlMXk8h8zu8sUOnZp8btBR3Scdsz0GJ/xcaRWsc6kmHJ9AUyayl/v4jFA5KN3mq4obdnzMW9SUVEgt2lfQ==", - "requires": { - "@tanstack/virtual-core": "3.0.0-beta.43" - } - }, - "@tanstack/virtual-core": { - "version": "3.0.0-beta.43", - "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.0.0-beta.43.tgz", - "integrity": "sha512-Hnpjtv4YuI7UgtGmlZ7yOkBXLwnvErilseWiVUBH66SU11CtkOWDdsKmh7LSrvqo+x/97wFtS+xmXmW365Igpg==" - }, "@teamsupercell/typings-for-css-modules-loader": { "version": "2.5.2", "resolved": "https://registry.npmjs.org/@teamsupercell/typings-for-css-modules-loader/-/typings-for-css-modules-loader-2.5.2.tgz", diff --git a/package.json b/package.json index 5b8ba6a6..5ea7b773 100644 --- a/package.json +++ b/package.json @@ -263,7 +263,6 @@ "@mantine/utils": "^6.0.0-alpha.5", "@tanstack/react-query": "^4.24.4", "@tanstack/react-query-devtools": "^4.24.4", - "@tanstack/react-virtual": "^3.0.0-beta.43", "dayjs": "^1.11.6", "electron-debug": "^3.2.0", "electron-localshortcut": "^3.2.1", diff --git a/src/renderer/features/artists/components/album-artist-detail-discography-detail-list.tsx b/src/renderer/features/artists/components/album-artist-detail-discography-detail-list.tsx index 5fa8b2b5..96646995 100644 --- a/src/renderer/features/artists/components/album-artist-detail-discography-detail-list.tsx +++ b/src/renderer/features/artists/components/album-artist-detail-discography-detail-list.tsx @@ -1,198 +1,198 @@ -import { useMemo, useRef } from 'react'; -import { ColDef } from '@ag-grid-community/core'; -import { Box, Group, Stack } from '@mantine/core'; -import { useVirtualizer, Virtualizer } from '@tanstack/react-virtual'; -import { useParams } from 'react-router'; -import { AlbumListSort, SortOrder, SongListSort, Song } from '/@/renderer/api/types'; -import { - getColumnDefs, - VirtualTable, - Text, - TextTitle, - NativeScrollArea, -} from '/@/renderer/components'; -import { useAlbumList } from '/@/renderer/features/albums'; -import { PlayButton } from '/@/renderer/features/shared'; -import { useSongList } from '/@/renderer/features/songs'; -import { useSongListStore } from '/@/renderer/store'; -import { usePlayQueueAdd } from '/@/renderer/features/player'; -import { Play } from '/@/renderer/types'; +// import { useMemo, useRef } from 'react'; +// import { ColDef } from '@ag-grid-community/core'; +// import { Box, Group, Stack } from '@mantine/core'; +// import { useVirtualizer, Virtualizer } from '@tanstack/react-virtual'; +// import { useParams } from 'react-router'; +// import { AlbumListSort, SortOrder, SongListSort, Song } from '/@/renderer/api/types'; +// import { +// getColumnDefs, +// VirtualTable, +// Text, +// TextTitle, +// NativeScrollArea, +// } from '/@/renderer/components'; +// import { useAlbumList } from '/@/renderer/features/albums'; +// import { PlayButton } from '/@/renderer/features/shared'; +// import { useSongList } from '/@/renderer/features/songs'; +// import { useSongListStore } from '/@/renderer/store'; +// import { usePlayQueueAdd } from '/@/renderer/features/player'; +// import { Play } from '/@/renderer/types'; -const RowVirtualizer = ({ - rows, - columnDefs, - handlePlay, - rowVirtualizer, -}: { - columnDefs: ColDef[]; - handlePlay: (play: Play, data: any[]) => void; - rowVirtualizer: Virtualizer; - rows: any[]; -}) => { - const items = rowVirtualizer.getVirtualItems(); +// const RowVirtualizer = ({ +// rows, +// columnDefs, +// handlePlay, +// rowVirtualizer, +// }: { +// columnDefs: ColDef[]; +// handlePlay: (play: Play, data: any[]) => void; +// rowVirtualizer: Virtualizer; +// rows: any[]; +// }) => { +// const items = rowVirtualizer.getVirtualItems(); - return ( -
- {items.map((virtualRow) => ( -
- - - {`${rows?.[virtualRow.index]?.name}-cover`} - - - {rows?.[virtualRow.index]?.name} - - {rows?.[virtualRow.index]?.releaseYear} - handlePlay?.(Play.NOW, rows?.[virtualRow.index]?.songs)} - /> - - - - data.data.id} - rowData={rows?.[virtualRow.index]?.songs} - rowHeight={60} - rowModelType="clientSide" - rowSelection="multiple" - /> - - -
- ))} -
- ); -}; +// return ( +//
+// {items.map((virtualRow) => ( +//
+// +// +// {`${rows?.[virtualRow.index]?.name}-cover`} +// +// +// {rows?.[virtualRow.index]?.name} +// +// {rows?.[virtualRow.index]?.releaseYear} +// handlePlay?.(Play.NOW, rows?.[virtualRow.index]?.songs)} +// /> +// +// +// +// data.data.id} +// rowData={rows?.[virtualRow.index]?.songs} +// rowHeight={60} +// rowModelType="clientSide" +// rowSelection="multiple" +// /> +// +// +//
+// ))} +//
+// ); +// }; -export const AlbumArtistDiscographyDetailList = () => { - const { albumArtistId } = useParams() as { albumArtistId: string }; - // const albumArtistQuery = useAlbumArtistDetail({ id: albumArtistId }); +// export const AlbumArtistDiscographyDetailList = () => { +// const { albumArtistId } = useParams() as { albumArtistId: string }; +// // const albumArtistQuery = useAlbumArtistDetail({ id: albumArtistId }); - const albumsQuery = useAlbumList({ - jfParams: { artistIds: albumArtistId }, - ndParams: { artist_id: albumArtistId }, - sortBy: AlbumListSort.YEAR, - sortOrder: SortOrder.DESC, - startIndex: 0, - }); +// const albumsQuery = useAlbumList({ +// jfParams: { artistIds: albumArtistId }, +// ndParams: { artist_id: albumArtistId }, +// sortBy: AlbumListSort.YEAR, +// sortOrder: SortOrder.DESC, +// startIndex: 0, +// }); - const songsQuery = useSongList( - { - albumIds: albumsQuery.data?.items?.map((album) => album.id), - sortBy: SongListSort.ALBUM, - sortOrder: SortOrder.ASC, - startIndex: 0, - }, - { - enabled: !albumsQuery.isLoading, - }, - ); +// const songsQuery = useSongList( +// { +// albumIds: albumsQuery.data?.items?.map((album) => album.id), +// sortBy: SongListSort.ALBUM, +// sortOrder: SortOrder.ASC, +// startIndex: 0, +// }, +// { +// enabled: !albumsQuery.isLoading, +// }, +// ); - const songsByAlbum = useMemo(() => { - if (songsQuery.isLoading || albumsQuery.isLoading) return null; +// const songsByAlbum = useMemo(() => { +// if (songsQuery.isLoading || albumsQuery.isLoading) return null; - const songsByAlbumMap = songsQuery?.data?.items?.reduce((acc, song) => { - if (!acc[song.albumId as keyof typeof acc]) { - acc[song.albumId as keyof typeof acc] = []; - } +// const songsByAlbumMap = songsQuery?.data?.items?.reduce((acc, song) => { +// if (!acc[song.albumId as keyof typeof acc]) { +// acc[song.albumId as keyof typeof acc] = []; +// } - acc[song.albumId as keyof typeof acc].push(song); +// acc[song.albumId as keyof typeof acc].push(song); - return acc; - }, {} as Record); +// return acc; +// }, {} as Record); - const albumDetailWithSongs = albumsQuery?.data?.items?.map((album) => { - return { - ...album, - songs: songsByAlbumMap?.[album.id], - }; - }); +// const albumDetailWithSongs = albumsQuery?.data?.items?.map((album) => { +// return { +// ...album, +// songs: songsByAlbumMap?.[album.id], +// }; +// }); - return albumDetailWithSongs; - }, [ - albumsQuery?.data?.items, - albumsQuery?.isLoading, - songsQuery?.data?.items, - songsQuery?.isLoading, - ]); +// return albumDetailWithSongs; +// }, [ +// albumsQuery?.data?.items, +// albumsQuery?.isLoading, +// songsQuery?.data?.items, +// songsQuery?.isLoading, +// ]); - const page = useSongListStore(); +// const page = useSongListStore(); - const columnDefs: ColDef[] = useMemo( - () => - getColumnDefs(page.table.columns).filter((c) => c.colId !== 'album' && c.colId !== 'artist'), - [page.table.columns], - ); +// const columnDefs: ColDef[] = useMemo( +// () => +// getColumnDefs(page.table.columns).filter((c) => c.colId !== 'album' && c.colId !== 'artist'), +// [page.table.columns], +// ); - const handlePlayQueueAdd = usePlayQueueAdd(); +// const handlePlayQueueAdd = usePlayQueueAdd(); - const parentRef = useRef(); +// const parentRef = useRef(); - const rowVirtualizer = useVirtualizer({ - count: songsByAlbum?.length || 0, - estimateSize: (i) => (songsByAlbum?.[i].songs?.length || 0) * 60 + 300, - getScrollElement: () => parentRef.current, - overscan: 3, - }); +// const rowVirtualizer = useVirtualizer({ +// count: songsByAlbum?.length || 0, +// estimateSize: (i) => (songsByAlbum?.[i].songs?.length || 0) * 60 + 300, +// getScrollElement: () => parentRef.current, +// overscan: 3, +// }); - const handlePlay = (play: Play, data: any[]) => { - handlePlayQueueAdd?.({ - byData: data, - play, - }); - }; +// const handlePlay = (play: Play, data: any[]) => { +// handlePlayQueueAdd?.({ +// byData: data, +// play, +// }); +// }; - if (albumsQuery.isLoading || songsQuery.isLoading) return null; +// if (albumsQuery.isLoading || songsQuery.isLoading) return null; - return ( - - {songsByAlbum && ( - - )} - - ); -}; +// return ( +// +// {songsByAlbum && ( +// +// )} +// +// ); +// };