From d1e55711637daffe113423f8938aa8763d75ab6e Mon Sep 17 00:00:00 2001 From: jeffvli Date: Tue, 8 Aug 2023 01:26:02 -0700 Subject: [PATCH] Add initial fetch for all grid views --- src/renderer/api/query-keys.ts | 11 ++++- .../components/album-list-grid-view.tsx | 12 ++--- .../albums/queries/album-list-query.ts | 6 ++- .../album-artist-list-grid-view.tsx | 2 +- .../components/genre-list-grid-view.tsx | 38 +++++++++++++++- .../components/playlist-list-grid-view.tsx | 44 ++++++++++++++++++- 6 files changed, 101 insertions(+), 12 deletions(-) diff --git a/src/renderer/api/query-keys.ts b/src/renderer/api/query-keys.ts index 8f3def7f..7b7a7dea 100644 --- a/src/renderer/api/query-keys.ts +++ b/src/renderer/api/query-keys.ts @@ -74,12 +74,21 @@ export const queryKeys: Record< albums: { detail: (serverId: string, query?: AlbumDetailQuery) => [serverId, 'albums', 'detail', query] as const, - list: (serverId: string, query?: AlbumListQuery) => { + list: (serverId: string, query?: AlbumListQuery, artistId?: string) => { const { pagination, filter } = splitPaginatedQuery(query); + + if (query && pagination && artistId) { + return [serverId, 'albums', 'list', artistId, filter, pagination] as const; + } + if (query && pagination) { return [serverId, 'albums', 'list', filter, pagination] as const; } + if (query && artistId) { + return [serverId, 'albums', 'list', artistId, filter] as const; + } + if (query) { return [serverId, 'albums', 'list', filter] as const; } diff --git a/src/renderer/features/albums/components/album-list-grid-view.tsx b/src/renderer/features/albums/components/album-list-grid-view.tsx index a9d9c097..05fe3908 100644 --- a/src/renderer/features/albums/components/album-list-grid-view.tsx +++ b/src/renderer/features/albums/components/album-list-grid-view.tsx @@ -150,10 +150,12 @@ export const AlbumListGridView = ({ gridRef, itemCount }: any) => { ...customFilters, }; + const queryKey = queryKeys.albums.list(server?.id || '', query, id); + const queriesFromCache: [QueryKey, AlbumListResponse][] = queryClient.getQueriesData({ exact: false, fetchStatus: 'idle', - queryKey: queryKeys.albums.list(server?.id || '', query), + queryKey, stale: false, }); @@ -162,7 +164,7 @@ export const AlbumListGridView = ({ gridRef, itemCount }: any) => { for (const [, data] of queriesFromCache) { const { items, startIndex } = data || {}; - if (items && startIndex !== undefined) { + if (items && items.length !== 1 && startIndex !== undefined) { let itemIndex = 0; for ( let rowIndex = startIndex; @@ -176,7 +178,7 @@ export const AlbumListGridView = ({ gridRef, itemCount }: any) => { } return itemData; - }, [customFilters, filter, queryClient, server?.id]); + }, [customFilters, filter, id, queryClient, server?.id]); const fetch = useCallback( async ({ skip, take }: { skip: number; take: number }) => { @@ -191,7 +193,7 @@ export const AlbumListGridView = ({ gridRef, itemCount }: any) => { ...customFilters, }; - const queryKey = queryKeys.albums.list(server?.id || '', query); + const queryKey = queryKeys.albums.list(server?.id || '', query, id); const albums = await queryClient.fetchQuery(queryKey, async ({ signal }) => controller.getAlbumList({ @@ -205,7 +207,7 @@ export const AlbumListGridView = ({ gridRef, itemCount }: any) => { return albums; }, - [customFilters, filter, queryClient, server], + [customFilters, filter, id, queryClient, server], ); return ( diff --git a/src/renderer/features/albums/queries/album-list-query.ts b/src/renderer/features/albums/queries/album-list-query.ts index a4785ab6..8c65b744 100644 --- a/src/renderer/features/albums/queries/album-list-query.ts +++ b/src/renderer/features/albums/queries/album-list-query.ts @@ -22,7 +22,11 @@ export const useAlbumList = (args: QueryHookArgs) => { query, }); }, - queryKey: queryKeys.albums.list(serverId || '', query), + queryKey: queryKeys.albums.list( + serverId || '', + query, + query?.artistIds?.length === 1 ? query?.artistIds[0] : undefined, + ), ...options, }); }; diff --git a/src/renderer/features/artists/components/album-artist-list-grid-view.tsx b/src/renderer/features/artists/components/album-artist-list-grid-view.tsx index 4fa26025..d9887684 100644 --- a/src/renderer/features/artists/components/album-artist-list-grid-view.tsx +++ b/src/renderer/features/artists/components/album-artist-list-grid-view.tsx @@ -52,7 +52,7 @@ export const AlbumArtistListGridView = ({ itemCount, gridRef }: AlbumArtistListG for (const [, data] of queriesFromCache) { const { items, startIndex } = data || {}; - if (items && startIndex !== undefined) { + if (items && items.length !== 1 && startIndex !== undefined) { let itemIndex = 0; for ( let rowIndex = startIndex; diff --git a/src/renderer/features/genres/components/genre-list-grid-view.tsx b/src/renderer/features/genres/components/genre-list-grid-view.tsx index e3dc5f43..2240473e 100644 --- a/src/renderer/features/genres/components/genre-list-grid-view.tsx +++ b/src/renderer/features/genres/components/genre-list-grid-view.tsx @@ -1,11 +1,11 @@ -import { useQueryClient } from '@tanstack/react-query'; +import { QueryKey, useQueryClient } from '@tanstack/react-query'; import { useCallback, useMemo } from 'react'; import { useSearchParams } from 'react-router-dom'; import AutoSizer, { Size } from 'react-virtualized-auto-sizer'; import { ListOnScrollProps } from 'react-window'; import { api } from '/@/renderer/api'; import { queryKeys } from '/@/renderer/api/query-keys'; -import { Album, GenreListQuery, LibraryItem } from '/@/renderer/api/types'; +import { Album, GenreListQuery, GenreListResponse, LibraryItem } from '/@/renderer/api/types'; import { ALBUM_CARD_ROWS } from '/@/renderer/components'; import { VirtualGridAutoSizerContainer, @@ -51,6 +51,39 @@ export const GenreListGridView = ({ gridRef, itemCount }: any) => { [id, pageKey, setGrid, setSearchParams], ); + const fetchInitialData = useCallback(() => { + const query: Omit = { + ...filter, + }; + + const queriesFromCache: [QueryKey, GenreListResponse][] = queryClient.getQueriesData({ + exact: false, + fetchStatus: 'idle', + queryKey: queryKeys.genres.list(server?.id || '', query), + stale: false, + }); + + const itemData = []; + + for (const [, data] of queriesFromCache) { + const { items, startIndex } = data || {}; + + if (items && items.length !== 1 && startIndex !== undefined) { + let itemIndex = 0; + for ( + let rowIndex = startIndex; + rowIndex < startIndex + items.length; + rowIndex += 1 + ) { + itemData[rowIndex] = items[itemIndex]; + itemIndex += 1; + } + } + } + + return itemData; + }, [filter, queryClient, server?.id]); + const fetch = useCallback( async ({ skip, take }: { skip: number; take: number }) => { if (!server) { @@ -93,6 +126,7 @@ export const GenreListGridView = ({ gridRef, itemCount }: any) => { cardRows={cardRows} display={display || ListDisplayType.CARD} fetchFn={fetch} + fetchInitialData={fetchInitialData} handlePlayQueueAdd={handlePlayQueueAdd} height={height} initialScrollOffset={initialScrollOffset} diff --git a/src/renderer/features/playlists/components/playlist-list-grid-view.tsx b/src/renderer/features/playlists/components/playlist-list-grid-view.tsx index 7f478a4d..14abc68e 100644 --- a/src/renderer/features/playlists/components/playlist-list-grid-view.tsx +++ b/src/renderer/features/playlists/components/playlist-list-grid-view.tsx @@ -1,4 +1,4 @@ -import { useQueryClient } from '@tanstack/react-query'; +import { QueryKey, useQueryClient } from '@tanstack/react-query'; import { MutableRefObject, useCallback, useMemo } from 'react'; import AutoSizer, { Size } from 'react-virtualized-auto-sizer'; import { ListOnScrollProps } from 'react-window'; @@ -6,7 +6,13 @@ import { useListContext } from '../../../context/list-context'; import { useListStoreActions } from '../../../store/list.store'; import { controller } from '/@/renderer/api/controller'; import { queryKeys } from '/@/renderer/api/query-keys'; -import { LibraryItem, Playlist, PlaylistListQuery, PlaylistListSort } from '/@/renderer/api/types'; +import { + LibraryItem, + Playlist, + PlaylistListQuery, + PlaylistListResponse, + PlaylistListSort, +} from '/@/renderer/api/types'; import { PLAYLIST_CARD_ROWS } from '/@/renderer/components'; import { VirtualGridAutoSizerContainer, @@ -96,6 +102,39 @@ export const PlaylistListGridView = ({ gridRef, itemCount }: PlaylistListGridVie [pageKey, setGrid], ); + const fetchInitialData = useCallback(() => { + const query: Omit = { + ...filter, + }; + + const queriesFromCache: [QueryKey, PlaylistListResponse][] = queryClient.getQueriesData({ + exact: false, + fetchStatus: 'idle', + queryKey: queryKeys.playlists.list(server?.id || '', query), + stale: false, + }); + + const itemData = []; + + for (const [, data] of queriesFromCache) { + const { items, startIndex } = data || {}; + + if (items && items.length !== 1 && startIndex !== undefined) { + let itemIndex = 0; + for ( + let rowIndex = startIndex; + rowIndex < startIndex + items.length; + rowIndex += 1 + ) { + itemData[rowIndex] = items[itemIndex]; + itemIndex += 1; + } + } + } + + return itemData; + }, [filter, queryClient, server?.id]); + const fetch = useCallback( async ({ skip, take }: { skip: number; take: number }) => { if (!server) { @@ -136,6 +175,7 @@ export const PlaylistListGridView = ({ gridRef, itemCount }: PlaylistListGridVie cardRows={cardRows} display={display || ListDisplayType.CARD} fetchFn={fetch} + fetchInitialData={fetchInitialData} handleFavorite={handleFavorite} handlePlayQueueAdd={handlePlayQueueAdd} height={height}