[bugfix]: fix combined title for artist, favoriting on grid pages

src/renderer/components/virtual-grid/virtual-infinite-grid.tsx

@@ -19,6 +19,7 @@ export type VirtualInfiniteGridRef = {
     resetLoadMoreItemsCache: () => void;
     scrollTo: (index: number) => void;
     setItemData: (data: any[]) => void;
+    updateItemData: (rule: (item: any) => any) => void;
 };
 
 interface VirtualGridProps
@@ -135,6 +136,9 @@ export const VirtualInfiniteGrid = forwardRef(
             setItemData: (data: any[]) => {
                 setItemData(data);
             },
+            updateItemData: (rule) => {
+                setItemData((data) => data.map(rule));
+            },
         }));
 
         if (loading) return null;

src/renderer/components/virtual-table/cells/combined-title-cell.tsx

@@ -50,7 +50,7 @@ const StyledImage = styled(SimpleImg)`
 export const CombinedTitleCell = ({ value, rowIndex, node }: ICellRendererParams) => {
     const artists = useMemo(() => {
         if (!value) return null;
-        return value.artists.length ? value.artists : value.albumArtists;
+        return value.artists?.length ? value.artists : value.albumArtists;
     }, [value]);
 
     if (value === undefined) {

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

@@ -19,10 +19,10 @@ import {
 } from '/@/renderer/components/virtual-grid';
 import { useListContext } from '/@/renderer/context/list-context';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
-import { useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/shared';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer, useListStoreActions, useListStoreByKey } from '/@/renderer/store';
 import { CardRow, ListDisplayType } from '/@/renderer/types';
+import { useHandleFavorite } from '/@/renderer/features/shared/hooks/use-handle-favorite';
 
 export const AlbumListGridView = ({ gridRef, itemCount }: any) => {
     const queryClient = useQueryClient();
@@ -36,33 +36,7 @@ export const AlbumListGridView = ({ gridRef, itemCount }: any) => {
     const scrollOffset = searchParams.get('scrollOffset');
     const initialScrollOffset = Number(id ? scrollOffset : grid?.scrollOffset) || 0;
 
-    const createFavoriteMutation = useCreateFavorite({});
+    const handleFavorite = useHandleFavorite({ gridRef, server });
-    const deleteFavoriteMutation = useDeleteFavorite({});
-
-    const handleFavorite = (options: {
-        id: string[];
-        isFavorite: boolean;
-        itemType: LibraryItem;
-    }) => {
-        const { id, itemType, isFavorite } = options;
-        if (isFavorite) {
-            deleteFavoriteMutation.mutate({
-                query: {
-                    id,
-                    type: itemType,
-                },
-                serverId: server?.id,
-            });
-        } else {
-            createFavoriteMutation.mutate({
-                query: {
-                    id,
-                    type: itemType,
-                },
-                serverId: server?.id,
-            });
-        }
-    };
 
     const cardRows = useMemo(() => {
         const rows: CardRow<Album>[] = [ALBUM_CARD_ROWS.name];

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

@@ -20,6 +20,7 @@ import { usePlayQueueAdd } from '/@/renderer/features/player';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer, useListStoreActions } from '/@/renderer/store';
 import { CardRow, ListDisplayType } from '/@/renderer/types';
+import { useHandleFavorite } from '/@/renderer/features/shared/hooks/use-handle-favorite';
 
 interface AlbumArtistListGridViewProps {
     gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
@@ -34,6 +35,7 @@ export const AlbumArtistListGridView = ({ itemCount, gridRef }: AlbumArtistListG
     const { pageKey } = useListContext();
     const { grid, display, filter } = useListStoreByKey({ key: pageKey });
     const { setGrid } = useListStoreActions();
+    const handleFavorite = useHandleFavorite({ gridRef, server });
 
     const fetchInitialData = useCallback(() => {
         const query: Omit<AlbumArtistListQuery, 'startIndex' | 'limit'> = {
@@ -154,6 +156,7 @@ export const AlbumArtistListGridView = ({ itemCount, gridRef }: AlbumArtistListG
                         display={display || ListDisplayType.CARD}
                         fetchFn={fetch}
                         fetchInitialData={fetchInitialData}
+                        handleFavorite={handleFavorite}
                         handlePlayQueueAdd={handlePlayQueueAdd}
                         height={height}
                         initialScrollOffset={grid?.scrollOffset || 0}

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

@@ -20,10 +20,10 @@ import {
     VirtualInfiniteGridRef,
 } from '/@/renderer/components/virtual-grid';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
-import { useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/shared';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer, useGeneralSettings, useListStoreByKey } from '/@/renderer/store';
 import { CardRow, ListDisplayType } from '/@/renderer/types';
+import { useHandleFavorite } from '/@/renderer/features/shared/hooks/use-handle-favorite';
 
 interface PlaylistListGridViewProps {
     gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
@@ -38,34 +38,7 @@ export const PlaylistListGridView = ({ gridRef, itemCount }: PlaylistListGridVie
     const { display, grid, filter } = useListStoreByKey({ key: pageKey });
     const { setGrid } = useListStoreActions();
     const { defaultFullPlaylist } = useGeneralSettings();
-
+    const handleFavorite = useHandleFavorite({ gridRef, server });
-    const createFavoriteMutation = useCreateFavorite({});
-    const deleteFavoriteMutation = useDeleteFavorite({});
-
-    const handleFavorite = (options: {
-        id: string[];
-        isFavorite: boolean;
-        itemType: LibraryItem;
-    }) => {
-        const { id, itemType, isFavorite } = options;
-        if (isFavorite) {
-            deleteFavoriteMutation.mutate({
-                query: {
-                    id,
-                    type: itemType,
-                },
-                serverId: server?.id,
-            });
-        } else {
-            createFavoriteMutation.mutate({
-                query: {
-                    id,
-                    type: itemType,
-                },
-                serverId: server?.id,
-            });
-        }
-    };
 
     const cardRows = useMemo(() => {
         const rows: CardRow<Playlist>[] = defaultFullPlaylist

src/renderer/features/shared/hooks/use-handle-favorite.ts

@@ -0,0 +1,56 @@
+import { MutableRefObject, useCallback } from 'react';
+import { LibraryItem } from '/@/renderer/api/types';
+import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
+import { useCreateFavorite } from '/@/renderer/features/shared/mutations/create-favorite-mutation';
+import { useDeleteFavorite } from '/@/renderer/features/shared/mutations/delete-favorite-mutation';
+import { ServerListItem } from '/@/renderer/types';
+
+interface HandleFavoriteProps {
+    gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
+    server: ServerListItem | null;
+}
+
+export const useHandleFavorite = ({ gridRef, server }: HandleFavoriteProps) => {
+    const createFavoriteMutation = useCreateFavorite({});
+    const deleteFavoriteMutation = useDeleteFavorite({});
+
+    const handleFavorite = useCallback(
+        async (options: { id: string[]; isFavorite: boolean; itemType: LibraryItem }) => {
+            const { id, itemType, isFavorite } = options;
+            try {
+                if (isFavorite) {
+                    await deleteFavoriteMutation.mutateAsync({
+                        query: {
+                            id,
+                            type: itemType,
+                        },
+                        serverId: server?.id,
+                    });
+                } else {
+                    await createFavoriteMutation.mutateAsync({
+                        query: {
+                            id,
+                            type: itemType,
+                        },
+                        serverId: server?.id,
+                    });
+                }
+
+                const idSet = new Set(id);
+                gridRef.current?.updateItemData((data) =>
+                    idSet.has(data.id)
+                        ? {
+                              ...data,
+                              userFavorite: !isFavorite,
+                          }
+                        : data,
+                );
+            } catch (error) {
+                console.error(error);
+            }
+        },
+        [createFavoriteMutation, deleteFavoriteMutation, gridRef, server?.id],
+    );
+
+    return handleFavorite;
+};

src/renderer/features/songs/components/song-list-grid-view.tsx

@@ -19,10 +19,10 @@ import {
 } from '/@/renderer/components/virtual-grid';
 import { useListContext } from '/@/renderer/context/list-context';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
-import { useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/shared';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer, useListStoreActions, useListStoreByKey } from '/@/renderer/store';
 import { CardRow, ListDisplayType } from '/@/renderer/types';
+import { useHandleFavorite } from '/@/renderer/features/shared/hooks/use-handle-favorite';
 
 export const SongListGridView = ({ gridRef, itemCount }: any) => {
     const queryClient = useQueryClient();
@@ -36,33 +36,7 @@ export const SongListGridView = ({ gridRef, itemCount }: any) => {
     const scrollOffset = searchParams.get('scrollOffset');
     const initialScrollOffset = Number(id ? scrollOffset : grid?.scrollOffset) || 0;
 
-    const createFavoriteMutation = useCreateFavorite({});
+    const handleFavorite = useHandleFavorite({ gridRef, server });
-    const deleteFavoriteMutation = useDeleteFavorite({});
-
-    const handleFavorite = (options: {
-        id: string[];
-        isFavorite: boolean;
-        itemType: LibraryItem;
-    }) => {
-        const { id, itemType, isFavorite } = options;
-        if (isFavorite) {
-            deleteFavoriteMutation.mutate({
-                query: {
-                    id,
-                    type: itemType,
-                },
-                serverId: server?.id,
-            });
-        } else {
-            createFavoriteMutation.mutate({
-                query: {
-                    id,
-                    type: itemType,
-                },
-                serverId: server?.id,
-            });
-        }
-    };
 
     const cardRows = useMemo(() => {
         const rows: CardRow<Song>[] = [