vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-08 13:00:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

add optimistic update for favorite/ratings mutations

Browse Source
This commit is contained in:
jeffvli
2025-11-23 03:40:53 -08:00
parent 0bc3ea51ec
commit 84419820b8
19 changed files with 975 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/shared/components/library-header.tsx
+2 -1
View File
@@ -185,6 +185,7 @@ export const LibraryHeaderMenu = ({
const isMutatingRating = useIsMutatingRating();
const isMutatingCreateFavorite = useIsMutatingCreateFavorite();
const isMutatingDeleteFavorite = useIsMutatingDeleteFavorite();
const isMutatingFavorite = isMutatingCreateFavorite || isMutatingDeleteFavorite;
return (
<div className={styles.libraryHeaderMenu}>
@@ -203,7 +204,7 @@ export const LibraryHeaderMenu = ({
)}
{onFavorite && (
<ActionIcon
disabled={isMutatingCreateFavorite || isMutatingDeleteFavorite}
disabled={isMutatingFavorite}
icon="favorite"
iconProps={{
fill: favorite ? 'primary' : undefined,
src/renderer/features/shared/mutations/create-favorite-mutation.ts
+24 -68
View File
@@ -1,33 +1,47 @@
import { useIsMutating, useMutation, useQueryClient } from '@tanstack/react-query';
import { AxiosError } from 'axios';
import isElectron from 'is-electron';
import { useTranslation } from 'react-i18next';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
import { eventEmitter } from '/@/renderer/events/event-emitter';
import {
applyFavoriteOptimisticUpdates,
PreviousQueryData,
restoreFavoriteQueryData,
} from '/@/renderer/features/shared/mutations/favorite-optimistic-updates';
import { MutationHookArgs } from '/@/renderer/lib/react-query';
import { useFavoriteEvent } from '/@/renderer/store/event.store';
import { toast } from '/@/shared/components/toast/toast';
import { FavoriteArgs, FavoriteResponse, LibraryItem } from '/@/shared/types/domain-types';
const remote = isElectron() ? window.api.remote : null;
const createFavoriteQueryKey = ['set-favorite', true];
const createFavoriteMutationKey = ['set-favorite', true];
export const useCreateFavorite = (args: MutationHookArgs) => {
const { options } = args || {};
const queryClient = useQueryClient();
const { t } = useTranslation();
const setFavoriteEvent = useFavoriteEvent();
return useMutation<FavoriteResponse, AxiosError, FavoriteArgs, null>({
return useMutation<FavoriteResponse, AxiosError, FavoriteArgs, PreviousQueryData[]>({
mutationFn: (args) => {
return api.controller.createFavorite({
...args,
apiClientProps: { serverId: args.apiClientProps.serverId },
});
},
mutationKey: createFavoriteQueryKey,
onError: (_error, variables) => {
mutationKey: createFavoriteMutationKey,
onError: (_error, variables, context) => {
if (context) {
restoreFavoriteQueryData(queryClient, context);
}
toast.show({
message: _error.message,
title: t('error.genericError', { postProcess: 'sentenceCase' }) as string,
type: 'error',
});
eventEmitter.emit('USER_FAVORITE', {
favorite: false,
id: variables.query.id,
@@ -43,69 +57,11 @@ export const useCreateFavorite = (args: MutationHookArgs) => {
serverId: variables.apiClientProps.serverId,
});
return null;
return applyFavoriteOptimisticUpdates(queryClient, variables, true);
},
onSuccess: (_data, variables) => {
if (variables.query.type === LibraryItem.SONG) {
remote?.updateFavorite(true, variables.apiClientProps.serverId, variables.query.id);
setFavoriteEvent(variables.query.id, true);
}
switch (variables.query.type) {
case LibraryItem.ALBUM: {
const queryKey = queryKeys.albums.detail(variables.apiClientProps.serverId);
queryClient.invalidateQueries({
exact: false,
queryKey,
});
break;
}
case LibraryItem.ALBUM_ARTIST: {
const queryKey = queryKeys.albumArtists.detail(
variables.apiClientProps.serverId,
);
queryClient.invalidateQueries({
exact: false,
queryKey,
});
break;
}
case LibraryItem.ARTIST: {
const queryKey = queryKeys.artists.detail(variables.apiClientProps.serverId);
queryClient.invalidateQueries({
exact: false,
queryKey,
});
break;
}
case LibraryItem.PLAYLIST_SONG:
case LibraryItem.QUEUE_SONG:
case LibraryItem.SONG: {
const songDetailQueryKey = queryKeys.songs.detail(
variables.apiClientProps.serverId,
);
queryClient.invalidateQueries({
exact: false,
queryKey: songDetailQueryKey,
});
const albumDetailQueryKey = queryKeys.albums.detail(
variables.apiClientProps.serverId,
);
queryClient.invalidateQueries({
exact: false,
queryKey: albumDetailQueryKey,
});
break;
}
}
},
...options,
@@ -113,6 +69,6 @@ export const useCreateFavorite = (args: MutationHookArgs) => {
};
export const useIsMutatingCreateFavorite = () => {
const mutatingCount = useIsMutating({ mutationKey: createFavoriteQueryKey });
const mutatingCount = useIsMutating({ mutationKey: createFavoriteMutationKey });
return mutatingCount > 0;
};
src/renderer/features/shared/mutations/delete-favorite-mutation.ts
+28 -70
View File
@@ -1,36 +1,52 @@
import { useIsMutating, useMutation, useQueryClient } from '@tanstack/react-query';
import { AxiosError } from 'axios';
import isElectron from 'is-electron';
import { useTranslation } from 'react-i18next';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
import { eventEmitter } from '/@/renderer/events/event-emitter';
import {
applyFavoriteOptimisticUpdates,
PreviousQueryData,
restoreFavoriteQueryData,
} from '/@/renderer/features/shared/mutations/favorite-optimistic-updates';
import { MutationHookArgs } from '/@/renderer/lib/react-query';
import { useFavoriteEvent } from '/@/renderer/store/event.store';
import { toast } from '/@/shared/components/toast/toast';
import { FavoriteArgs, FavoriteResponse, LibraryItem } from '/@/shared/types/domain-types';
const remote = isElectron() ? window.api.remote : null;
const deleteFavoriteQueryKey = ['set-favorite', false];
const deleteFavoriteMutationKey = ['set-favorite', false];
export const useDeleteFavorite = (args: MutationHookArgs) => {
const { options } = args || {};
const queryClient = useQueryClient();
const setFavoriteEvent = useFavoriteEvent();
return useMutation<FavoriteResponse, AxiosError, FavoriteArgs, null>({
const { t } = useTranslation();
return useMutation<FavoriteResponse, AxiosError, FavoriteArgs, PreviousQueryData[]>({
mutationFn: (args) => {
return api.controller.deleteFavorite({
...args,
apiClientProps: { serverId: args.apiClientProps.serverId },
});
},
mutationKey: deleteFavoriteQueryKey,
onError: (_error, variables) => {
mutationKey: deleteFavoriteMutationKey,
onError: (_error, _variables, context) => {
if (context) {
restoreFavoriteQueryData(queryClient, context);
}
toast.show({
message: _error.message,
title: t('error.genericError', { postProcess: 'sentenceCase' }) as string,
type: 'error',
});
eventEmitter.emit('USER_FAVORITE', {
favorite: true,
id: variables.query.id,
itemType: variables.query.type,
serverId: variables.apiClientProps.serverId,
id: _variables.query.id,
itemType: _variables.query.type,
serverId: _variables.apiClientProps.serverId,
});
},
onMutate: (variables) => {
@@ -41,7 +57,7 @@ export const useDeleteFavorite = (args: MutationHookArgs) => {
serverId: variables.apiClientProps.serverId,
});
return null;
return applyFavoriteOptimisticUpdates(queryClient, variables, false);
},
onSuccess: (_data, variables) => {
if (variables.query.type === LibraryItem.SONG) {
@@ -50,64 +66,6 @@ export const useDeleteFavorite = (args: MutationHookArgs) => {
variables.apiClientProps.serverId,
variables.query.id,
);
setFavoriteEvent(variables.query.id, false);
}
switch (variables.query.type) {
case LibraryItem.ALBUM: {
const queryKey = queryKeys.albums.detail(variables.apiClientProps.serverId);
queryClient.invalidateQueries({
exact: false,
queryKey,
});
break;
}
case LibraryItem.ALBUM_ARTIST: {
const queryKey = queryKeys.albumArtists.detail(
variables.apiClientProps.serverId,
);
queryClient.invalidateQueries({
exact: false,
queryKey,
});
break;
}
case LibraryItem.ARTIST: {
const queryKey = queryKeys.artists.detail(variables.apiClientProps.serverId);
queryClient.invalidateQueries({
exact: false,
queryKey,
});
break;
}
case LibraryItem.PLAYLIST_SONG:
case LibraryItem.QUEUE_SONG:
case LibraryItem.SONG: {
const songDetailQueryKey = queryKeys.songs.detail(
variables.apiClientProps.serverId,
);
queryClient.invalidateQueries({
exact: false,
queryKey: songDetailQueryKey,
});
const albumDetailQueryKey = queryKeys.albums.detail(
variables.apiClientProps.serverId,
);
queryClient.invalidateQueries({
exact: false,
queryKey: albumDetailQueryKey,
});
break;
}
}
},
...options,
@@ -115,6 +73,6 @@ export const useDeleteFavorite = (args: MutationHookArgs) => {
};
export const useIsMutatingDeleteFavorite = () => {
const mutatingCount = useIsMutating({ mutationKey: deleteFavoriteQueryKey });
const mutatingCount = useIsMutating({ mutationKey: deleteFavoriteMutationKey });
return mutatingCount > 0;
};
src/renderer/features/shared/mutations/favorite-optimistic-updates.ts
+389
View File
@@ -0,0 +1,389 @@
import { QueryClient } from '@tanstack/react-query';
import { queryKeys } from '/@/renderer/api/query-keys';
import {
Album,
AlbumArtist,
AlbumArtistDetailResponse,
AlbumArtistListResponse,
AlbumDetailResponse,
AlbumListResponse,
Artist,
ArtistListResponse,
FavoriteArgs,
LibraryItem,
Song,
SongDetailResponse,
} from '/@/shared/types/domain-types';
export interface PreviousQueryData {
data: unknown;
queryKey: readonly unknown[];
}
export const applyFavoriteOptimisticUpdates = (
queryClient: QueryClient,
variables: FavoriteArgs,
isFavorite: boolean,
): PreviousQueryData[] => {
const previousQueries: PreviousQueryData[] = [];
const itemIdSet = new Set<string>();
if (Array.isArray(variables.query.id)) {
variables.query.id.forEach((id) => {
itemIdSet.add(id);
});
} else {
itemIdSet.add(variables.query.id);
}
switch (variables.query.type) {
case LibraryItem.ALBUM: {
const detailQueryKey = queryKeys.albums.detail(variables.apiClientProps.serverId);
const detailQueries = queryClient.getQueriesData({
exact: false,
queryKey: detailQueryKey,
});
if (detailQueries.length) {
detailQueries.forEach(([queryKey, data]) => {
if (data) {
previousQueries.push({ data, queryKey });
queryClient.setQueryData(queryKey, (prev: AlbumDetailResponse) => {
if (prev && itemIdSet.has(prev.id)) {
return {
...prev,
userFavorite: isFavorite,
};
}
return prev;
});
}
});
}
const listQueryKey = queryKeys.albums.list(variables.apiClientProps.serverId);
const listQueries = queryClient.getQueriesData({
exact: false,
queryKey: listQueryKey,
});
if (listQueries.length) {
listQueries.forEach(([queryKey, data]) => {
if (data) {
previousQueries.push({ data, queryKey });
queryClient.setQueryData(queryKey, (prev: AlbumListResponse) => {
if (prev) {
return {
...prev,
items: prev.items.map((item: Album) => {
return itemIdSet.has(item.id)
? { ...item, userFavorite: isFavorite }
: item;
}),
};
}
return prev;
});
}
});
}
const infiniteListQueryKey = queryKeys.albums.infiniteList(
variables.apiClientProps.serverId,
);
const infiniteListQueries = queryClient.getQueriesData({
exact: false,
queryKey: infiniteListQueryKey,
});
if (infiniteListQueries.length) {
infiniteListQueries.forEach(([queryKey, data]) => {
if (data) {
previousQueries.push({ data, queryKey });
queryClient.setQueryData(
queryKey,
(prev: { pageParams: string[]; pages: AlbumListResponse[] }) => {
if (prev) {
return {
...prev,
pages: prev.pages.map((page: AlbumListResponse) => {
return {
...page,
items: page.items.map((item: Album) => {
return itemIdSet.has(item.id)
? { ...item, userFavorite: isFavorite }
: item;
}),
};
}),
};
}
return prev;
},
);
}
});
}
break;
}
case LibraryItem.ALBUM_ARTIST: {
const detailQueryKey = queryKeys.albumArtists.detail(variables.apiClientProps.serverId);
const detailQueries = queryClient.getQueriesData({
exact: false,
queryKey: detailQueryKey,
});
if (detailQueries.length) {
detailQueries.forEach(([queryKey, data]) => {
if (data) {
previousQueries.push({ data, queryKey });
queryClient.setQueryData(queryKey, (prev: AlbumArtistDetailResponse) => {
if (prev && itemIdSet.has(prev.id)) {
return {
...prev,
userFavorite: isFavorite,
};
}
return prev;
});
}
});
}
const listQueryKey = queryKeys.albumArtists.list(variables.apiClientProps.serverId);
const listQueries = queryClient.getQueriesData({
exact: false,
queryKey: listQueryKey,
});
if (listQueries.length) {
listQueries.forEach(([queryKey, data]) => {
if (data) {
previousQueries.push({ data, queryKey });
queryClient.setQueryData(queryKey, (prev: AlbumArtistListResponse) => {
if (prev) {
return {
...prev,
items: prev.items.map((item: AlbumArtist) => {
return itemIdSet.has(item.id)
? { ...item, userFavorite: isFavorite }
: item;
}),
};
}
return prev;
});
}
});
}
const infiniteListQueryKey = queryKeys.albumArtists.infiniteList(
variables.apiClientProps.serverId,
);
const infiniteListQueries = queryClient.getQueriesData({
exact: false,
queryKey: infiniteListQueryKey,
});
if (infiniteListQueries.length) {
infiniteListQueries.forEach(([queryKey, data]) => {
if (data) {
previousQueries.push({ data, queryKey });
queryClient.setQueryData(
queryKey,
(prev: { pageParams: string[]; pages: AlbumArtistListResponse[] }) => {
return {
...prev,
pages: prev.pages.map((page: AlbumArtistListResponse) => {
return {
...page,
items: page.items.map((item: AlbumArtist) => {
return itemIdSet.has(item.id)
? {
...item,
userFavorite: isFavorite,
}
: item;
}),
};
}),
};
},
);
}
});
}
break;
}
case LibraryItem.ARTIST: {
const detailQueryKey = queryKeys.artists.detail(variables.apiClientProps.serverId);
const detailQueries = queryClient.getQueriesData({
exact: false,
queryKey: detailQueryKey,
});
if (detailQueries.length) {
detailQueries.forEach(([queryKey, data]) => {
if (data) {
previousQueries.push({ data, queryKey });
queryClient.setQueryData(queryKey, (prev: AlbumArtistDetailResponse) => {
if (prev && itemIdSet.has(prev.id)) {
return {
...prev,
userFavorite: isFavorite,
};
}
return prev;
});
}
});
}
const listQueryKey = queryKeys.artists.list(variables.apiClientProps.serverId);
const listQueries = queryClient.getQueriesData({
exact: false,
queryKey: listQueryKey,
});
if (listQueries.length) {
listQueries.forEach(([queryKey, data]) => {
if (data) {
previousQueries.push({ data, queryKey });
queryClient.setQueryData(queryKey, (prev: ArtistListResponse) => {
return {
...prev,
items: prev.items.map((item: Artist) => {
return itemIdSet.has(item.id)
? { ...item, userFavorite: isFavorite }
: item;
}),
};
});
}
});
}
const infiniteListQueryKey = queryKeys.artists.infiniteList(
variables.apiClientProps.serverId,
);
const infiniteListQueries = queryClient.getQueriesData({
exact: false,
queryKey: infiniteListQueryKey,
});
if (infiniteListQueries.length) {
infiniteListQueries.forEach(([queryKey, data]) => {
if (data) {
previousQueries.push({ data, queryKey });
queryClient.setQueryData(
queryKey,
(prev: { pageParams: string[]; pages: ArtistListResponse[] }) => {
return {
...prev,
pages: prev.pages.map((page: ArtistListResponse) => {
return {
...page,
items: page.items.map((item: Artist) => {
return itemIdSet.has(item.id)
? { ...item, userFavorite: isFavorite }
: item;
}),
};
}),
};
},
);
}
});
}
break;
}
case LibraryItem.PLAYLIST_SONG:
case LibraryItem.QUEUE_SONG:
case LibraryItem.SONG: {
const albumDetailQueryKey = queryKeys.albums.detail(variables.apiClientProps.serverId);
const albumDetailQueries = queryClient.getQueriesData({
exact: false,
queryKey: albumDetailQueryKey,
});
if (albumDetailQueries.length) {
albumDetailQueries.forEach(([queryKey, data]) => {
if (data) {
previousQueries.push({ data, queryKey });
queryClient.setQueryData(queryKey, (prev: AlbumDetailResponse) => {
if (prev) {
return {
...prev,
songs: prev.songs?.map((song: Song) => {
return itemIdSet.has(song.id)
? { ...song, userFavorite: isFavorite }
: song;
}),
};
}
return prev;
});
}
});
}
const detailQueryKey = queryKeys.songs.detail(variables.apiClientProps.serverId);
const detailQueries = queryClient.getQueriesData({
exact: false,
queryKey: detailQueryKey,
});
if (detailQueries.length) {
detailQueries.forEach(([queryKey, data]) => {
if (data) {
previousQueries.push({ data, queryKey });
queryClient.setQueryData(queryKey, (prev: SongDetailResponse) => {
if (prev && itemIdSet.has(prev.id)) {
return {
...prev,
userFavorite: isFavorite,
};
}
return prev;
});
}
});
}
break;
}
}
return previousQueries;
};
export const restoreFavoriteQueryData = (
queryClient: QueryClient,
previousQueries: PreviousQueryData[],
): void => {
previousQueries.forEach(({ data, queryKey }) => {
queryClient.setQueryData(queryKey, data);
});
};
src/renderer/features/shared/mutations/rating-optimistic-updates.ts
+354
View File
@@ -0,0 +1,354 @@
import { QueryClient } from '@tanstack/react-query';
import { PreviousQueryData } from './favorite-optimistic-updates';
import { queryKeys } from '/@/renderer/api/query-keys';
import {
Album,
AlbumArtist,
AlbumArtistDetailResponse,
AlbumArtistListResponse,
AlbumDetailResponse,
AlbumListResponse,
Artist,
ArtistListResponse,
LibraryItem,
SetRatingArgs,
Song,
SongDetailResponse,
} from '/@/shared/types/domain-types';
export const applyRatingOptimisticUpdates = (
queryClient: QueryClient,
variables: SetRatingArgs,
rating: number,
): PreviousQueryData[] => {
const previousQueries: PreviousQueryData[] = [];
const itemIdSet = new Set<string>();
if (Array.isArray(variables.query.id)) {
variables.query.id.forEach((id) => {
itemIdSet.add(id);
});
} else {
itemIdSet.add(variables.query.id);
}
switch (variables.query.type) {
case LibraryItem.ALBUM: {
const detailQueryKey = queryKeys.albums.detail(variables.apiClientProps.serverId);
const detailQueries = queryClient.getQueriesData({
exact: false,
queryKey: detailQueryKey,
});
if (detailQueries.length) {
detailQueries.forEach(([queryKey, data]) => {
if (data) {
previousQueries.push({ data, queryKey });
queryClient.setQueryData(queryKey, (prev: AlbumDetailResponse) => {
if (prev && itemIdSet.has(prev.id)) {
return { ...prev, userRating: rating };
}
return prev;
});
}
});
}
const listQueryKey = queryKeys.albums.list(variables.apiClientProps.serverId);
const listQueries = queryClient.getQueriesData({
exact: false,
queryKey: listQueryKey,
});
if (listQueries.length) {
listQueries.forEach(([queryKey, data]) => {
if (data) {
previousQueries.push({ data, queryKey });
queryClient.setQueryData(queryKey, (prev: AlbumListResponse) => {
return {
...prev,
items: prev.items.map((item: Album) => {
return itemIdSet.has(item.id)
? { ...item, userRating: rating }
: item;
}),
};
});
}
});
}
const infiniteListQueryKey = queryKeys.albums.infiniteList(
variables.apiClientProps.serverId,
);
const infiniteListQueries = queryClient.getQueriesData({
exact: false,
queryKey: infiniteListQueryKey,
});
if (infiniteListQueries.length) {
infiniteListQueries.forEach(([queryKey, data]) => {
if (data) {
previousQueries.push({ data, queryKey });
queryClient.setQueryData(
queryKey,
(prev: { pageParams: string[]; pages: AlbumListResponse[] }) => {
return {
...prev,
pages: prev.pages.map((page: AlbumListResponse) => {
return {
...page,
items: page.items.map((item: Album) => {
return itemIdSet.has(item.id)
? { ...item, userRating: rating }
: item;
}),
};
}),
};
},
);
}
});
}
break;
}
case LibraryItem.ALBUM_ARTIST: {
const detailQueryKey = queryKeys.albumArtists.detail(variables.apiClientProps.serverId);
const detailQueries = queryClient.getQueriesData({
exact: false,
queryKey: detailQueryKey,
});
if (detailQueries.length) {
detailQueries.forEach(([queryKey, data]) => {
if (data) {
previousQueries.push({ data, queryKey });
queryClient.setQueryData(queryKey, (prev: AlbumArtistDetailResponse) => {
if (prev && itemIdSet.has(prev.id)) {
return { ...prev, userRating: rating };
}
return prev;
});
}
});
}
const listQueryKey = queryKeys.albumArtists.list(variables.apiClientProps.serverId);
const listQueries = queryClient.getQueriesData({
exact: false,
queryKey: listQueryKey,
});
if (listQueries.length) {
listQueries.forEach(([queryKey, data]) => {
if (data) {
previousQueries.push({ data, queryKey });
queryClient.setQueryData(queryKey, (prev: AlbumArtistListResponse) => {
return {
...prev,
items: prev.items.map((item: AlbumArtist) => {
return itemIdSet.has(item.id)
? { ...item, userRating: rating }
: item;
}),
};
});
}
});
}
const infiniteListQueryKey = queryKeys.albumArtists.infiniteList(
variables.apiClientProps.serverId,
);
const infiniteListQueries = queryClient.getQueriesData({
exact: false,
queryKey: infiniteListQueryKey,
});
if (infiniteListQueries.length) {
infiniteListQueries.forEach(([queryKey, data]) => {
if (data) {
previousQueries.push({ data, queryKey });
queryClient.setQueryData(
queryKey,
(prev: { pageParams: string[]; pages: AlbumArtistListResponse[] }) => {
return {
...prev,
pages: prev.pages.map((page: AlbumArtistListResponse) => {
return {
...page,
items: page.items.map((item: AlbumArtist) => {
return itemIdSet.has(item.id)
? { ...item, userRating: rating }
: item;
}),
};
}),
};
},
);
}
});
}
break;
}
case LibraryItem.ARTIST: {
const detailQueryKey = queryKeys.artists.detail(variables.apiClientProps.serverId);
const detailQueries = queryClient.getQueriesData({
exact: false,
queryKey: detailQueryKey,
});
if (detailQueries.length) {
detailQueries.forEach(([queryKey, data]) => {
if (data) {
previousQueries.push({ data, queryKey });
queryClient.setQueryData(queryKey, (prev: AlbumArtistDetailResponse) => {
if (prev && itemIdSet.has(prev.id)) {
return { ...prev, userRating: rating };
}
return prev;
});
}
});
}
const listQueryKey = queryKeys.artists.list(variables.apiClientProps.serverId);
const listQueries = queryClient.getQueriesData({
exact: false,
queryKey: listQueryKey,
});
if (listQueries.length) {
listQueries.forEach(([queryKey, data]) => {
if (data) {
previousQueries.push({ data, queryKey });
queryClient.setQueryData(queryKey, (prev: ArtistListResponse) => {
return {
...prev,
items: prev.items.map((item: Artist) => {
return itemIdSet.has(item.id)
? { ...item, userRating: rating }
: item;
}),
};
});
}
});
}
const infiniteListQueryKey = queryKeys.artists.infiniteList(
variables.apiClientProps.serverId,
);
const infiniteListQueries = queryClient.getQueriesData({
exact: false,
queryKey: infiniteListQueryKey,
});
if (infiniteListQueries.length) {
infiniteListQueries.forEach(([queryKey, data]) => {
if (data) {
previousQueries.push({ data, queryKey });
queryClient.setQueryData(
queryKey,
(prev: { pageParams: string[]; pages: ArtistListResponse[] }) => {
return {
...prev,
pages: prev.pages.map((page: ArtistListResponse) => {
return {
...page,
items: page.items.map((item: Artist) => {
return itemIdSet.has(item.id)
? { ...item, userRating: rating }
: item;
}),
};
}),
};
},
);
}
});
}
break;
}
case LibraryItem.PLAYLIST_SONG:
case LibraryItem.QUEUE_SONG:
case LibraryItem.SONG: {
const albumDetailQueryKey = queryKeys.albums.detail(variables.apiClientProps.serverId);
const albumDetailQueries = queryClient.getQueriesData({
exact: false,
queryKey: albumDetailQueryKey,
});
if (albumDetailQueries.length) {
albumDetailQueries.forEach(([queryKey, data]) => {
if (data) {
previousQueries.push({ data, queryKey });
queryClient.setQueryData(queryKey, (prev: AlbumDetailResponse) => {
if (prev) {
return {
...prev,
songs: prev.songs?.map((song: Song) => {
return itemIdSet.has(song.id)
? { ...song, userRating: rating }
: song;
}),
};
}
return prev;
});
}
});
}
const detailQueryKey = queryKeys.songs.detail(variables.apiClientProps.serverId);
const detailQueries = queryClient.getQueriesData({
exact: false,
queryKey: detailQueryKey,
});
if (detailQueries.length) {
detailQueries.forEach(([queryKey, data]) => {
if (data) {
previousQueries.push({ data, queryKey });
queryClient.setQueryData(queryKey, (prev: SongDetailResponse) => {
if (prev && itemIdSet.has(prev.id)) {
return { ...prev, userRating: rating };
}
return prev;
});
}
});
}
break;
}
}
return previousQueries;
};
export const restoreRatingQueryData = (
queryClient: QueryClient,
previousQueries: PreviousQueryData[],
): void => {
previousQueries.forEach(({ data, queryKey }) => {
queryClient.setQueryData(queryKey, data);
});
};
src/renderer/features/shared/mutations/set-rating-mutation.ts
+29 -75
View File
@@ -1,37 +1,49 @@
import { useIsMutating, useMutation, useQueryClient } from '@tanstack/react-query';
import { AxiosError } from 'axios';
import { useTranslation } from 'react-i18next';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
import { eventEmitter } from '/@/renderer/events/event-emitter';
import { PreviousQueryData } from '/@/renderer/features/shared/mutations/favorite-optimistic-updates';
import {
applyRatingOptimisticUpdates,
restoreRatingQueryData,
} from '/@/renderer/features/shared/mutations/rating-optimistic-updates';
import { MutationHookArgs } from '/@/renderer/lib/react-query';
import { LibraryItem, RatingResponse, SetRatingArgs } from '/@/shared/types/domain-types';
import { toast } from '/@/shared/components/toast/toast';
import { RatingResponse, SetRatingArgs } from '/@/shared/types/domain-types';
const setRatingQueryKey = ['set-rating'];
const setRatingMutationKey = ['set-rating'];
export const useSetRating = (args: MutationHookArgs) => {
const { options } = args || {};
const queryClient = useQueryClient();
const { t } = useTranslation();
return useMutation<
RatingResponse,
AxiosError,
SetRatingArgs,
{ previous: undefined | { id: string[]; rating: number; type: LibraryItem } }
>({
return useMutation<RatingResponse, AxiosError, SetRatingArgs, PreviousQueryData[]>({
mutationFn: (args) => {
return api.controller.setRating({
...args,
apiClientProps: { serverId: args.apiClientProps.serverId },
});
},
mutationKey: setRatingQueryKey,
onError: (_error, variables) => {
mutationKey: setRatingMutationKey,
onError: (_error, _variables, context) => {
if (context) {
restoreRatingQueryData(queryClient, context);
}
toast.show({
message: _error.message,
title: t('error.genericError', { postProcess: 'sentenceCase' }) as string,
type: 'error',
});
eventEmitter.emit('USER_RATING', {
id: variables.query.id,
itemType: variables.query.type,
rating: variables.query.rating,
serverId: variables.apiClientProps.serverId,
id: _variables.query.id,
itemType: _variables.query.type,
rating: _variables.query.rating,
serverId: _variables.apiClientProps.serverId,
});
},
onMutate: (variables) => {
@@ -42,71 +54,13 @@ export const useSetRating = (args: MutationHookArgs) => {
serverId: variables.apiClientProps.serverId,
});
return { previous: undefined };
},
onSuccess: (_data, variables) => {
switch (variables.query.type) {
case LibraryItem.ALBUM: {
const queryKey = queryKeys.albums.detail(variables.apiClientProps.serverId);
queryClient.invalidateQueries({
exact: false,
queryKey,
});
break;
}
case LibraryItem.ALBUM_ARTIST: {
const queryKey = queryKeys.albumArtists.detail(
variables.apiClientProps.serverId,
);
queryClient.invalidateQueries({
exact: false,
queryKey,
});
break;
}
case LibraryItem.ARTIST: {
const queryKey = queryKeys.artists.detail(variables.apiClientProps.serverId);
queryClient.invalidateQueries({
exact: false,
queryKey,
});
break;
}
case LibraryItem.PLAYLIST_SONG:
case LibraryItem.QUEUE_SONG:
case LibraryItem.SONG: {
const songDetailQueryKey = queryKeys.songs.detail(
variables.apiClientProps.serverId,
);
queryClient.invalidateQueries({
exact: false,
queryKey: songDetailQueryKey,
});
const albumDetailQueryKey = queryKeys.albums.detail(
variables.apiClientProps.serverId,
);
queryClient.invalidateQueries({
exact: false,
queryKey: albumDetailQueryKey,
});
break;
}
}
return applyRatingOptimisticUpdates(queryClient, variables, variables.query.rating);
},
...options,
});
};
export const useIsMutatingRating = () => {
const mutatingCount = useIsMutating({ mutationKey: setRatingQueryKey });
const mutatingCount = useIsMutating({ mutationKey: setRatingMutationKey });
return mutatingCount > 0;
};