pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add initial fetch for all grid views

Browse source
This commit is contained in:
jeffvli 2023-08-08 01:26:02 -07:00
parent e542fcb8aa
commit d1e5571163
6 changed files with 101 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/renderer/api/query-keys.ts
View file

@ -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;
}

12
src/renderer/features/albums/components/album-list-grid-view.tsx
View file

@ -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 (

6
src/renderer/features/albums/queries/album-list-query.ts
View file

@ -22,7 +22,11 @@ export const useAlbumList = (args: QueryHookArgs<AlbumListQuery>) => {
query,
});
},
queryKey: queryKeys.albums.list(serverId || '', query),
queryKey: queryKeys.albums.list(
serverId || '',
query,
query?.artistIds?.length === 1 ? query?.artistIds[0] : undefined,
),
...options,
});
};

2
src/renderer/features/artists/components/album-artist-list-grid-view.tsx
View file

@ -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;

38
src/renderer/features/genres/components/genre-list-grid-view.tsx
View file

@ -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<GenreListQuery, 'startIndex' | 'limit'> = {
...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}

44
src/renderer/features/playlists/components/playlist-list-grid-view.tsx
View file

@ -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<PlaylistListQuery, 'startIndex' | 'limit'> = {
...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}