Re-use logic for row favorite for card favorite

src/components/card/Card.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import { Icon } from 'rsuite';
 import { useHistory } from 'react-router-dom';
-import { useQueryClient } from 'react-query';
 import cacheImage from '../shared/cacheImage';
-import { getAlbum, getPlaylist, star, unstar, getAllArtistSongs } from '../../api/api';
+import { getAlbum, getPlaylist, getAllArtistSongs } from '../../api/api';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
 import { appendPlayQueue, fixPlayer2Index, setPlayQueue } from '../../redux/playQueueSlice';
 import { isCached } from '../../shared/utils';
@@ -39,12 +38,12 @@ const Card = ({
   size,
   cacheImages,
   cachePath,
+  handleFavorite,
   ...rest
 }: any) => {
   const history = useHistory();
   const dispatch = useAppDispatch();
   const playQueue = useAppSelector((state) => state.playQueue);
-  const queryClient = useQueryClient();
 
   const handleClick = () => {
     history.push(url);
@@ -102,30 +101,6 @@ const Card = ({
     }
   };
 
-  const handleFavorite = async () => {
-    if (!rest.details.starred) {
-      await star(rest.details.id, 'album');
-    } else {
-      await unstar(rest.details.id, 'album');
-    }
-
-    await queryClient.refetchQueries(['artist'], {
-      active: true,
-    });
-    await queryClient.refetchQueries(['album'], {
-      active: true,
-    });
-    await queryClient.refetchQueries(['starred'], {
-      active: true,
-    });
-    await queryClient.refetchQueries(['playlist'], {
-      active: true,
-    });
-    await queryClient.refetchQueries(['search'], {
-      active: true,
-    });
-  };
-
   const handleOpenModal = () => {
     dispatch(
       addModalPage({
@@ -185,7 +160,7 @@ const Card = ({
               />
               {playClick.type !== 'playlist' && (
                 <FavoriteOverlayButton
-                  onClick={handleFavorite}
+                  onClick={() => handleFavorite(rest.details)}
                   size={size <= 160 ? 'xs' : 'sm'}
                   icon={<Icon icon={rest.details.starred ? 'heart' : 'heart-o'} />}
                 />

src/components/library/AlbumList.tsx

@@ -209,6 +209,7 @@ const AlbumList = () => {
           playClick={{ type: 'album', idProperty: 'id' }}
           size={Number(settings.getSync('gridCardSize'))}
           cacheType="album"
+          handleFavorite={handleRowFavorite}
         />
       )}
     </GenericPage>

src/components/library/ArtistList.tsx

@@ -150,6 +150,7 @@ const ArtistList = () => {
           playClick={{ type: 'artist', idProperty: 'id' }}
           size={Number(settings.getSync('gridCardSize'))}
           cacheType="artist"
+          handleFavorite={handleRowFavorite}
         />
       )}
     </GenericPage>

src/components/library/ArtistView.tsx

@@ -268,6 +268,7 @@ const ArtistView = ({ ...rest }: any) => {
             size={Number(settings.getSync('gridCardSize'))}
             cacheType="album"
             isModal={rest.isModal}
+            handleFavorite={handleRowFavorite}
           />
         )}
       </>

src/components/starred/StarredView.tsx

@@ -207,6 +207,7 @@ const StarredView = () => {
                   playClick={{ type: 'album', idProperty: 'id' }}
                   size={Number(settings.getSync('gridCardSize'))}
                   cacheType="album"
+                  handleFavorite={handleRowFavoriteAlbum}
                 />
               )}
             </>
@@ -252,6 +253,7 @@ const StarredView = () => {
                   playClick={{ type: 'artist', idProperty: 'id' }}
                   size={Number(settings.getSync('gridCardSize'))}
                   cacheType="artist"
+                  handleFavorite={handleRowFavoriteArtist}
                 />
               )}
             </>

src/components/viewtypes/GridViewType.tsx

@@ -54,6 +54,7 @@ const GridCard = ({ data, index, style }: any) => {
           details={{ cacheType: data.cacheType, ...data.data[i] }}
           cacheImages={data.cacheImages}
           cachePath={data.cachePath}
+          handleFavorite={data.handleFavorite}
         />
       </div>
     );
@@ -85,6 +86,7 @@ function ListWrapper({
   cacheType,
   cacheImages,
   cachePath,
+  handleFavorite,
 }: any) {
   const gapSize = 5;
   const cardHeight = size + 75; // 225
@@ -108,6 +110,7 @@ function ListWrapper({
       gapSize,
       cacheImages,
       cachePath,
+      handleFavorite,
     }),
     [
       cardHeight,
@@ -122,6 +125,7 @@ function ListWrapper({
       size,
       cacheImages,
       cachePath,
+      handleFavorite,
     ]
   );
 
@@ -139,7 +143,15 @@ function ListWrapper({
   );
 }
 
-const GridViewType = ({ data, cardTitle, cardSubtitle, playClick, size, cacheType }: any) => {
+const GridViewType = ({
+  data,
+  cardTitle,
+  cardSubtitle,
+  playClick,
+  size,
+  cacheType,
+  handleFavorite,
+}: any) => {
   const cacheImages = Boolean(settings.getSync('cacheImages'));
   const cachePath = path.join(getImageCachePath(), '/');
 
@@ -158,6 +170,7 @@ const GridViewType = ({ data, cardTitle, cardSubtitle, playClick, size, cacheTyp
           cacheType={cacheType}
           cacheImages={cacheImages}
           cachePath={cachePath}
+          handleFavorite={handleFavorite}
         />
       )}
     </AutoSizer>