add optimistic update for favorite/ratings mutations

src/renderer/features/shared/mutations/set-rating-mutation.ts

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