diff --git a/src/components/dashboard/Dashboard.tsx b/src/components/dashboard/Dashboard.tsx
index a3a1e75..49196ec 100644
--- a/src/components/dashboard/Dashboard.tsx
+++ b/src/components/dashboard/Dashboard.tsx
@@ -1,15 +1,20 @@
import React, { useState } from 'react';
+import _ from 'lodash';
import settings from 'electron-settings';
import { useHistory } from 'react-router-dom';
-import { useQuery } from 'react-query';
-import { getAlbums } from '../../api/api';
+import { useQuery, useQueryClient } from 'react-query';
+import { getAlbums, star, unstar } from '../../api/api';
import PageLoader from '../loader/PageLoader';
import GenericPage from '../layout/GenericPage';
import GenericPageHeader from '../layout/GenericPageHeader';
import ScrollingMenu from '../scrollingmenu/ScrollingMenu';
+import { useAppDispatch } from '../../redux/hooks';
+import { setStar } from '../../redux/playQueueSlice';
const Dashboard = () => {
const history = useHistory();
+ const dispatch = useAppDispatch();
+ const queryClient = useQueryClient();
const cardSize = Number(settings.getSync('gridCardSize'));
const [searchQuery, setSearchQuery] = useState('');
@@ -37,6 +42,80 @@ const Dashboard = () => {
{ 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) {
return (
}>
@@ -76,6 +155,7 @@ const Dashboard = () => {
cardSize={cardSize}
onClickTitle={() => history.push(`/library/album?sortType=recent`)}
type="album"
+ handleFavorite={handleFavorite}
/>
{
cardSize={cardSize}
onClickTitle={() => history.push(`/library/album?sortType=newest`)}
type="album"
+ handleFavorite={handleFavorite}
/>
{
cardSize={cardSize}
onClickTitle={() => history.push(`/library/album?sortType=random`)}
type="album"
+ handleFavorite={handleFavorite}
/>
{
cardSize={cardSize}
onClickTitle={() => history.push(`/library/album?sortType=frequent`)}
type="album"
+ handleFavorite={handleFavorite}
/>
>
)}
diff --git a/src/components/scrollingmenu/ScrollingMenu.tsx b/src/components/scrollingmenu/ScrollingMenu.tsx
index 2e337d4..3112af6 100644
--- a/src/components/scrollingmenu/ScrollingMenu.tsx
+++ b/src/components/scrollingmenu/ScrollingMenu.tsx
@@ -18,7 +18,15 @@ const ScrollMenuContainer = styled.div`
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 misc = useAppSelector((state) => state.misc);
const scrollContainerRef = useRef();
@@ -89,6 +97,7 @@ const ScrollingMenu = ({ cardTitle, cardSubtitle, data, title, onClickTitle, typ
cacheImages={cacheImages}
cachePath={misc.imageCachePath}
style={{ margin: '0px 5px 0px 5px' }}
+ handleFavorite={handleFavorite}
/>
))}
diff --git a/src/components/search/SearchView.tsx b/src/components/search/SearchView.tsx
index 5b1dd88..bee0524 100644
--- a/src/components/search/SearchView.tsx
+++ b/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 (
{
}}
cardSize={cardSize}
type="artist"
+ handleFavorite={handleArtistFavorite}
/>
{
}}
cardSize={cardSize}
type="album"
+ handleFavorite={handleAlbumFavorite}
/>
Songs