From 68dfbf44afb5e8996d01d914adea6433af3af861 Mon Sep 17 00:00:00 2001 From: jeffvli Date: Sun, 10 Oct 2021 18:11:29 -0700 Subject: [PATCH] Re-use logic for row favorite for card favorite --- src/components/card/Card.tsx | 31 +++-------------------- src/components/library/AlbumList.tsx | 1 + src/components/library/ArtistList.tsx | 1 + src/components/library/ArtistView.tsx | 1 + src/components/starred/StarredView.tsx | 2 ++ src/components/viewtypes/GridViewType.tsx | 15 ++++++++++- 6 files changed, 22 insertions(+), 29 deletions(-) diff --git a/src/components/card/Card.tsx b/src/components/card/Card.tsx index 1c4a439..be2cb54 100644 --- a/src/components/card/Card.tsx +++ b/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' && ( handleFavorite(rest.details)} size={size <= 160 ? 'xs' : 'sm'} icon={} /> diff --git a/src/components/library/AlbumList.tsx b/src/components/library/AlbumList.tsx index 20d0f9b..c5f5afc 100644 --- a/src/components/library/AlbumList.tsx +++ b/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} /> )} diff --git a/src/components/library/ArtistList.tsx b/src/components/library/ArtistList.tsx index 1be6ab6..01de9db 100644 --- a/src/components/library/ArtistList.tsx +++ b/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} /> )} diff --git a/src/components/library/ArtistView.tsx b/src/components/library/ArtistView.tsx index 9a60c65..59fef48 100644 --- a/src/components/library/ArtistView.tsx +++ b/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} /> )} diff --git a/src/components/starred/StarredView.tsx b/src/components/starred/StarredView.tsx index 882fc97..b8d010b 100644 --- a/src/components/starred/StarredView.tsx +++ b/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} /> )} diff --git a/src/components/viewtypes/GridViewType.tsx b/src/components/viewtypes/GridViewType.tsx index 27eaf73..3d2ad20 100644 --- a/src/components/viewtypes/GridViewType.tsx +++ b/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} /> ); @@ -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} /> )}