Browse Source

Re-use logic for row favorite for card favorite

master
jeffvli 3 years ago
committed by Jeff
parent
commit
68dfbf44af
  1. 31
      src/components/card/Card.tsx
  2. 1
      src/components/library/AlbumList.tsx
  3. 1
      src/components/library/ArtistList.tsx
  4. 1
      src/components/library/ArtistView.tsx
  5. 2
      src/components/starred/StarredView.tsx
  6. 15
      src/components/viewtypes/GridViewType.tsx

31
src/components/card/Card.tsx

@ -1,9 +1,8 @@
import React from 'react'; import React from 'react';
import { Icon } from 'rsuite'; import { Icon } from 'rsuite';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import { useQueryClient } from 'react-query';
import cacheImage from '../shared/cacheImage'; 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 { useAppDispatch, useAppSelector } from '../../redux/hooks';
import { appendPlayQueue, fixPlayer2Index, setPlayQueue } from '../../redux/playQueueSlice'; import { appendPlayQueue, fixPlayer2Index, setPlayQueue } from '../../redux/playQueueSlice';
import { isCached } from '../../shared/utils'; import { isCached } from '../../shared/utils';
@ -39,12 +38,12 @@ const Card = ({
size, size,
cacheImages, cacheImages,
cachePath, cachePath,
handleFavorite,
...rest ...rest
}: any) => { }: any) => {
const history = useHistory(); const history = useHistory();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const playQueue = useAppSelector((state) => state.playQueue); const playQueue = useAppSelector((state) => state.playQueue);
const queryClient = useQueryClient();
const handleClick = () => { const handleClick = () => {
history.push(url); 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 = () => { const handleOpenModal = () => {
dispatch( dispatch(
addModalPage({ addModalPage({
@ -185,7 +160,7 @@ const Card = ({
/> />
{playClick.type !== 'playlist' && ( {playClick.type !== 'playlist' && (
<FavoriteOverlayButton <FavoriteOverlayButton
onClick={handleFavorite} onClick={() => handleFavorite(rest.details)}
size={size <= 160 ? 'xs' : 'sm'} size={size <= 160 ? 'xs' : 'sm'}
icon={<Icon icon={rest.details.starred ? 'heart' : 'heart-o'} />} icon={<Icon icon={rest.details.starred ? 'heart' : 'heart-o'} />}
/> />

1
src/components/library/AlbumList.tsx

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

1
src/components/library/ArtistList.tsx

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

1
src/components/library/ArtistView.tsx

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

2
src/components/starred/StarredView.tsx

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

15
src/components/viewtypes/GridViewType.tsx

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

Loading…
Cancel
Save