Browse Source

Fix star for dashboard/search (#27)

master
jeffvli 3 years ago
committed by Jeff
parent
commit
a6eca4f2ba
  1. 87
      src/components/dashboard/Dashboard.tsx
  2. 11
      src/components/scrollingmenu/ScrollingMenu.tsx
  3. 50
      src/components/search/SearchView.tsx

87
src/components/dashboard/Dashboard.tsx

@ -1,15 +1,20 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import _ from 'lodash';
import settings from 'electron-settings'; import settings from 'electron-settings';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import { useQuery } from 'react-query'; import { useQuery, useQueryClient } from 'react-query';
import { getAlbums } from '../../api/api'; import { getAlbums, star, unstar } from '../../api/api';
import PageLoader from '../loader/PageLoader'; import PageLoader from '../loader/PageLoader';
import GenericPage from '../layout/GenericPage'; import GenericPage from '../layout/GenericPage';
import GenericPageHeader from '../layout/GenericPageHeader'; import GenericPageHeader from '../layout/GenericPageHeader';
import ScrollingMenu from '../scrollingmenu/ScrollingMenu'; import ScrollingMenu from '../scrollingmenu/ScrollingMenu';
import { useAppDispatch } from '../../redux/hooks';
import { setStar } from '../../redux/playQueueSlice';
const Dashboard = () => { const Dashboard = () => {
const history = useHistory(); const history = useHistory();
const dispatch = useAppDispatch();
const queryClient = useQueryClient();
const cardSize = Number(settings.getSync('gridCardSize')); const cardSize = Number(settings.getSync('gridCardSize'));
const [searchQuery, setSearchQuery] = useState(''); const [searchQuery, setSearchQuery] = useState('');
@ -37,6 +42,80 @@ const Dashboard = () => {
{ refetchOnWindowFocus: false } { refetchOnWindowFocus: false }
); );
const handleFavorite = async (rowData: any) => {
if (!rowData.starred) {
await star(rowData.id, 'album');
dispatch(setStar({ id: [rowData.id], type: 'star' }));
queryClient.setQueryData(['recentAlbums'], (oldData: any) => {
const starredIndices = _.keys(_.pickBy(oldData?.album, { id: rowData.id }));
starredIndices.forEach((index) => {
oldData.album[index].starred = Date.now();
});
return oldData;
});
queryClient.setQueryData(['newestAlbums'], (oldData: any) => {
const starredIndices = _.keys(_.pickBy(oldData?.album, { id: rowData.id }));
starredIndices.forEach((index) => {
oldData.album[index].starred = Date.now();
});
return oldData;
});
queryClient.setQueryData(['randomAlbums'], (oldData: any) => {
const starredIndices = _.keys(_.pickBy(oldData?.album, { id: rowData.id }));
starredIndices.forEach((index) => {
oldData.album[index].starred = Date.now();
});
return oldData;
});
queryClient.setQueryData(['frequentAlbums'], (oldData: any) => {
const starredIndices = _.keys(_.pickBy(oldData?.album, { id: rowData.id }));
starredIndices.forEach((index) => {
oldData.album[index].starred = Date.now();
});
return oldData;
});
} else {
await unstar(rowData.id, 'album');
dispatch(setStar({ id: [rowData.id], type: 'unstar' }));
queryClient.setQueryData(['recentAlbums'], (oldData: any) => {
const starredIndices = _.keys(_.pickBy(oldData?.album, { id: rowData.id }));
starredIndices.forEach((index) => {
oldData.album[index].starred = undefined;
});
return oldData;
});
queryClient.setQueryData(['newestAlbums'], (oldData: any) => {
const starredIndices = _.keys(_.pickBy(oldData?.album, { id: rowData.id }));
starredIndices.forEach((index) => {
oldData.album[index].starred = undefined;
});
return oldData;
});
queryClient.setQueryData(['randomAlbums'], (oldData: any) => {
const starredIndices = _.keys(_.pickBy(oldData?.album, { id: rowData.id }));
starredIndices.forEach((index) => {
oldData.album[index].starred = undefined;
});
return oldData;
});
queryClient.setQueryData(['frequentAlbums'], (oldData: any) => {
const starredIndices = _.keys(_.pickBy(oldData?.album, { id: rowData.id }));
starredIndices.forEach((index) => {
oldData.album[index].starred = undefined;
});
return oldData;
});
}
};
if (isLoadingRecent || isLoadingNewest || isLoadingRandom || isLoadingFrequent) { if (isLoadingRecent || isLoadingNewest || isLoadingRandom || isLoadingFrequent) {
return ( return (
<GenericPage hideDivider header={<GenericPageHeader title="Dashboard" />}> <GenericPage hideDivider header={<GenericPageHeader title="Dashboard" />}>
@ -76,6 +155,7 @@ const Dashboard = () => {
cardSize={cardSize} cardSize={cardSize}
onClickTitle={() => history.push(`/library/album?sortType=recent`)} onClickTitle={() => history.push(`/library/album?sortType=recent`)}
type="album" type="album"
handleFavorite={handleFavorite}
/> />
<ScrollingMenu <ScrollingMenu
@ -94,6 +174,7 @@ const Dashboard = () => {
cardSize={cardSize} cardSize={cardSize}
onClickTitle={() => history.push(`/library/album?sortType=newest`)} onClickTitle={() => history.push(`/library/album?sortType=newest`)}
type="album" type="album"
handleFavorite={handleFavorite}
/> />
<ScrollingMenu <ScrollingMenu
@ -112,6 +193,7 @@ const Dashboard = () => {
cardSize={cardSize} cardSize={cardSize}
onClickTitle={() => history.push(`/library/album?sortType=random`)} onClickTitle={() => history.push(`/library/album?sortType=random`)}
type="album" type="album"
handleFavorite={handleFavorite}
/> />
<ScrollingMenu <ScrollingMenu
@ -130,6 +212,7 @@ const Dashboard = () => {
cardSize={cardSize} cardSize={cardSize}
onClickTitle={() => history.push(`/library/album?sortType=frequent`)} onClickTitle={() => history.push(`/library/album?sortType=frequent`)}
type="album" type="album"
handleFavorite={handleFavorite}
/> />
</> </>
)} )}

11
src/components/scrollingmenu/ScrollingMenu.tsx

@ -18,7 +18,15 @@ const ScrollMenuContainer = styled.div`
scroll-behavior: smooth; scroll-behavior: smooth;
`; `;
const ScrollingMenu = ({ cardTitle, cardSubtitle, data, title, onClickTitle, type }: any) => { const ScrollingMenu = ({
cardTitle,
cardSubtitle,
data,
title,
onClickTitle,
type,
handleFavorite,
}: any) => {
const cacheImages = Boolean(settings.getSync('cacheImages')); const cacheImages = Boolean(settings.getSync('cacheImages'));
const misc = useAppSelector((state) => state.misc); const misc = useAppSelector((state) => state.misc);
const scrollContainerRef = useRef<any>(); const scrollContainerRef = useRef<any>();
@ -89,6 +97,7 @@ const ScrollingMenu = ({ cardTitle, cardSubtitle, data, title, onClickTitle, typ
cacheImages={cacheImages} cacheImages={cacheImages}
cachePath={misc.imageCachePath} cachePath={misc.imageCachePath}
style={{ margin: '0px 5px 0px 5px' }} style={{ margin: '0px 5px 0px 5px' }}
handleFavorite={handleFavorite}
/> />
</span> </span>
))} ))}

50
src/components/search/SearchView.tsx

@ -91,6 +91,54 @@ const SearchView = () => {
} }
}; };
const handleArtistFavorite = async (rowData: any) => {
if (!rowData.starred) {
await star(rowData.id, 'artist');
queryClient.setQueryData(['search', urlQuery], (oldData: any) => {
const starredIndices = _.keys(_.pickBy(oldData.artist, { id: rowData.id }));
starredIndices.forEach((index) => {
oldData.artist[index].starred = Date.now();
});
return oldData;
});
} else {
await unstar(rowData.id, 'album');
queryClient.setQueryData(['search', urlQuery], (oldData: any) => {
const starredIndices = _.keys(_.pickBy(oldData.artist, { id: rowData.id }));
starredIndices.forEach((index) => {
oldData.artist[index].starred = undefined;
});
return oldData;
});
}
};
const handleAlbumFavorite = async (rowData: any) => {
if (!rowData.starred) {
await star(rowData.id, 'artist');
queryClient.setQueryData(['search', urlQuery], (oldData: any) => {
const starredIndices = _.keys(_.pickBy(oldData.album, { id: rowData.id }));
starredIndices.forEach((index) => {
oldData.album[index].starred = Date.now();
});
return oldData;
});
} else {
await unstar(rowData.id, 'album');
queryClient.setQueryData(['search', urlQuery], (oldData: any) => {
const starredIndices = _.keys(_.pickBy(oldData.album, { id: rowData.id }));
starredIndices.forEach((index) => {
oldData.album[index].starred = undefined;
});
return oldData;
});
}
};
return ( return (
<GenericPage <GenericPage
header={ header={
@ -121,6 +169,7 @@ const SearchView = () => {
}} }}
cardSize={cardSize} cardSize={cardSize}
type="artist" type="artist"
handleFavorite={handleArtistFavorite}
/> />
<ScrollingMenu <ScrollingMenu
@ -139,6 +188,7 @@ const SearchView = () => {
}} }}
cardSize={cardSize} cardSize={cardSize}
type="album" type="album"
handleFavorite={handleAlbumFavorite}
/> />
<SectionTitleWrapper> <SectionTitleWrapper>
<SectionTitle>Songs</SectionTitle> <SectionTitle>Songs</SectionTitle>

Loading…
Cancel
Save