mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-07 12:30:12 +02:00
large performance refactor
This commit is contained in:
@@ -100,6 +100,7 @@ export const LibraryHeader = forwardRef(
|
||||
<Image
|
||||
alt="cover"
|
||||
className={styles.image}
|
||||
containerClassName={styles.image}
|
||||
loading="eager"
|
||||
onError={onImageError}
|
||||
src={imageUrl || ''}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { QueryClient } from '@tanstack/react-query';
|
||||
|
||||
import { queryKeys } from '/@/renderer/api/query-keys';
|
||||
import { infiniteLoaderDataQueryKey } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
|
||||
import {
|
||||
Album,
|
||||
AlbumArtist,
|
||||
@@ -8,7 +9,6 @@ import {
|
||||
AlbumArtistListResponse,
|
||||
AlbumDetailResponse,
|
||||
AlbumListResponse,
|
||||
Artist,
|
||||
ArtistListResponse,
|
||||
FavoriteArgs,
|
||||
LibraryItem,
|
||||
@@ -151,6 +151,52 @@ export const applyFavoriteOptimisticUpdates = (
|
||||
});
|
||||
}
|
||||
|
||||
const infiniteLoaderQueryKey = infiniteLoaderDataQueryKey(
|
||||
variables.apiClientProps.serverId,
|
||||
LibraryItem.ALBUM,
|
||||
);
|
||||
|
||||
const infiniteLoaderQueries = queryClient.getQueriesData({
|
||||
exact: false,
|
||||
queryKey: infiniteLoaderQueryKey,
|
||||
});
|
||||
|
||||
if (infiniteLoaderQueries.length) {
|
||||
infiniteLoaderQueries.forEach(([queryKey, data]) => {
|
||||
if (data) {
|
||||
previousQueries.push({ data, queryKey });
|
||||
queryClient.setQueryData(
|
||||
queryKey,
|
||||
(
|
||||
prev:
|
||||
| undefined
|
||||
| {
|
||||
data: unknown[];
|
||||
pagesLoaded: Record<string, boolean>;
|
||||
},
|
||||
) => {
|
||||
if (prev && prev.data) {
|
||||
return {
|
||||
...prev,
|
||||
data: prev.data.map((item: any) => {
|
||||
if (!item || !item.id) {
|
||||
return item;
|
||||
}
|
||||
|
||||
return itemIdSet.has(item.id)
|
||||
? { ...item, userFavorite: isFavorite }
|
||||
: item;
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
return prev;
|
||||
},
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
case LibraryItem.ALBUM_ARTIST: {
|
||||
@@ -271,6 +317,52 @@ export const applyFavoriteOptimisticUpdates = (
|
||||
});
|
||||
}
|
||||
|
||||
const infiniteLoaderQueryKey = infiniteLoaderDataQueryKey(
|
||||
variables.apiClientProps.serverId,
|
||||
LibraryItem.ALBUM_ARTIST,
|
||||
);
|
||||
|
||||
const infiniteLoaderQueries = queryClient.getQueriesData({
|
||||
exact: false,
|
||||
queryKey: infiniteLoaderQueryKey,
|
||||
});
|
||||
|
||||
if (infiniteLoaderQueries.length) {
|
||||
infiniteLoaderQueries.forEach(([queryKey, data]) => {
|
||||
if (data) {
|
||||
previousQueries.push({ data, queryKey });
|
||||
queryClient.setQueryData(
|
||||
queryKey,
|
||||
(
|
||||
prev:
|
||||
| undefined
|
||||
| {
|
||||
data: unknown[];
|
||||
pagesLoaded: Record<string, boolean>;
|
||||
},
|
||||
) => {
|
||||
if (prev && prev.data) {
|
||||
return {
|
||||
...prev,
|
||||
data: prev.data.map((item: any) => {
|
||||
if (!item || !item.id) {
|
||||
return item;
|
||||
}
|
||||
|
||||
return itemIdSet.has(item.id)
|
||||
? { ...item, userFavorite: isFavorite }
|
||||
: item;
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
return prev;
|
||||
},
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
case LibraryItem.ARTIST: {
|
||||
@@ -291,7 +383,7 @@ export const applyFavoriteOptimisticUpdates = (
|
||||
if (prev) {
|
||||
return {
|
||||
...prev,
|
||||
items: prev.items.map((item: Artist) => {
|
||||
items: prev.items.map((item: AlbumArtist) => {
|
||||
return itemIdSet.has(item.id)
|
||||
? { ...item, userFavorite: isFavorite }
|
||||
: item;
|
||||
@@ -332,7 +424,7 @@ export const applyFavoriteOptimisticUpdates = (
|
||||
pages: prev.pages.map((page: ArtistListResponse) => {
|
||||
return {
|
||||
...page,
|
||||
items: page.items.map((item: Artist) => {
|
||||
items: page.items.map((item: AlbumArtist) => {
|
||||
return itemIdSet.has(item.id)
|
||||
? { ...item, userFavorite: isFavorite }
|
||||
: item;
|
||||
@@ -349,6 +441,52 @@ export const applyFavoriteOptimisticUpdates = (
|
||||
});
|
||||
}
|
||||
|
||||
const infiniteLoaderQueryKey = infiniteLoaderDataQueryKey(
|
||||
variables.apiClientProps.serverId,
|
||||
LibraryItem.ARTIST,
|
||||
);
|
||||
|
||||
const infiniteLoaderQueries = queryClient.getQueriesData({
|
||||
exact: false,
|
||||
queryKey: infiniteLoaderQueryKey,
|
||||
});
|
||||
|
||||
if (infiniteLoaderQueries.length) {
|
||||
infiniteLoaderQueries.forEach(([queryKey, data]) => {
|
||||
if (data) {
|
||||
previousQueries.push({ data, queryKey });
|
||||
queryClient.setQueryData(
|
||||
queryKey,
|
||||
(
|
||||
prev:
|
||||
| undefined
|
||||
| {
|
||||
data: unknown[];
|
||||
pagesLoaded: Record<string, boolean>;
|
||||
},
|
||||
) => {
|
||||
if (prev && prev.data) {
|
||||
return {
|
||||
...prev,
|
||||
data: prev.data.map((item: any) => {
|
||||
if (!item || !item.id) {
|
||||
return item;
|
||||
}
|
||||
|
||||
return itemIdSet.has(item.id)
|
||||
? { ...item, userFavorite: isFavorite }
|
||||
: item;
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
return prev;
|
||||
},
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
case LibraryItem.PLAYLIST_SONG:
|
||||
|
||||
@@ -10,7 +10,6 @@ import {
|
||||
AlbumArtistListResponse,
|
||||
AlbumDetailResponse,
|
||||
AlbumListResponse,
|
||||
Artist,
|
||||
ArtistListResponse,
|
||||
LibraryItem,
|
||||
SetRatingArgs,
|
||||
@@ -120,6 +119,54 @@ export const applyRatingOptimisticUpdates = (
|
||||
});
|
||||
}
|
||||
|
||||
// Update infinite loader custom query keys
|
||||
const infiniteLoaderQueryKey = [
|
||||
variables.apiClientProps.serverId,
|
||||
'item-list-infinite-loader',
|
||||
LibraryItem.ALBUM,
|
||||
];
|
||||
|
||||
const infiniteLoaderQueries = queryClient.getQueriesData({
|
||||
exact: false,
|
||||
queryKey: infiniteLoaderQueryKey,
|
||||
});
|
||||
|
||||
if (infiniteLoaderQueries.length) {
|
||||
infiniteLoaderQueries.forEach(([queryKey, data]) => {
|
||||
if (data) {
|
||||
previousQueries.push({ data, queryKey });
|
||||
queryClient.setQueryData(
|
||||
queryKey,
|
||||
(
|
||||
prev:
|
||||
| undefined
|
||||
| {
|
||||
data: unknown[];
|
||||
pagesLoaded: Record<string, boolean>;
|
||||
},
|
||||
) => {
|
||||
if (prev && prev.data) {
|
||||
return {
|
||||
...prev,
|
||||
data: prev.data.map((item: any) => {
|
||||
if (!item || !item.id) {
|
||||
return item;
|
||||
}
|
||||
|
||||
return itemIdSet.has(item.id)
|
||||
? { ...item, userRating: rating }
|
||||
: item;
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
return prev;
|
||||
},
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
case LibraryItem.ALBUM_ARTIST: {
|
||||
@@ -206,6 +253,54 @@ export const applyRatingOptimisticUpdates = (
|
||||
});
|
||||
}
|
||||
|
||||
// Update infinite loader custom query keys
|
||||
const infiniteLoaderQueryKey = [
|
||||
variables.apiClientProps.serverId,
|
||||
'item-list-infinite-loader',
|
||||
LibraryItem.ALBUM_ARTIST,
|
||||
];
|
||||
|
||||
const infiniteLoaderQueries = queryClient.getQueriesData({
|
||||
exact: false,
|
||||
queryKey: infiniteLoaderQueryKey,
|
||||
});
|
||||
|
||||
if (infiniteLoaderQueries.length) {
|
||||
infiniteLoaderQueries.forEach(([queryKey, data]) => {
|
||||
if (data) {
|
||||
previousQueries.push({ data, queryKey });
|
||||
queryClient.setQueryData(
|
||||
queryKey,
|
||||
(
|
||||
prev:
|
||||
| undefined
|
||||
| {
|
||||
data: unknown[];
|
||||
pagesLoaded: Record<string, boolean>;
|
||||
},
|
||||
) => {
|
||||
if (prev && prev.data) {
|
||||
return {
|
||||
...prev,
|
||||
data: prev.data.map((item: any) => {
|
||||
if (!item || !item.id) {
|
||||
return item;
|
||||
}
|
||||
|
||||
return itemIdSet.has(item.id)
|
||||
? { ...item, userRating: rating }
|
||||
: item;
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
return prev;
|
||||
},
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
case LibraryItem.ARTIST: {
|
||||
@@ -223,7 +318,7 @@ export const applyRatingOptimisticUpdates = (
|
||||
queryClient.setQueryData(queryKey, (prev: ArtistListResponse) => {
|
||||
return {
|
||||
...prev,
|
||||
items: prev.items.map((item: Artist) => {
|
||||
items: prev.items.map((item: AlbumArtist) => {
|
||||
return itemIdSet.has(item.id)
|
||||
? { ...item, userRating: rating }
|
||||
: item;
|
||||
@@ -254,7 +349,7 @@ export const applyRatingOptimisticUpdates = (
|
||||
pages: prev.pages.map((page: ArtistListResponse) => {
|
||||
return {
|
||||
...page,
|
||||
items: page.items.map((item: Artist) => {
|
||||
items: page.items.map((item: AlbumArtist) => {
|
||||
return itemIdSet.has(item.id)
|
||||
? { ...item, userRating: rating }
|
||||
: item;
|
||||
@@ -268,6 +363,54 @@ export const applyRatingOptimisticUpdates = (
|
||||
});
|
||||
}
|
||||
|
||||
// Update infinite loader custom query keys
|
||||
const infiniteLoaderQueryKey = [
|
||||
variables.apiClientProps.serverId,
|
||||
'item-list-infinite-loader',
|
||||
LibraryItem.ARTIST,
|
||||
];
|
||||
|
||||
const infiniteLoaderQueries = queryClient.getQueriesData({
|
||||
exact: false,
|
||||
queryKey: infiniteLoaderQueryKey,
|
||||
});
|
||||
|
||||
if (infiniteLoaderQueries.length) {
|
||||
infiniteLoaderQueries.forEach(([queryKey, data]) => {
|
||||
if (data) {
|
||||
previousQueries.push({ data, queryKey });
|
||||
queryClient.setQueryData(
|
||||
queryKey,
|
||||
(
|
||||
prev:
|
||||
| undefined
|
||||
| {
|
||||
data: unknown[];
|
||||
pagesLoaded: Record<string, boolean>;
|
||||
},
|
||||
) => {
|
||||
if (prev && prev.data) {
|
||||
return {
|
||||
...prev,
|
||||
data: prev.data.map((item: any) => {
|
||||
if (!item || !item.id) {
|
||||
return item;
|
||||
}
|
||||
|
||||
return itemIdSet.has(item.id)
|
||||
? { ...item, userRating: rating }
|
||||
: item;
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
return prev;
|
||||
},
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
case LibraryItem.PLAYLIST_SONG:
|
||||
|
||||
Reference in New Issue
Block a user