Fix star for dashboard/search (#27)

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 { useQuery, useQueryClient } from 'react-query';
-import { getAlbums } from '../../api/api';
+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 (
       <GenericPage hideDivider header={<GenericPageHeader title="Dashboard" />}>
@@ -76,6 +155,7 @@ const Dashboard = () => {
             cardSize={cardSize}
             onClickTitle={() => history.push(`/library/album?sortType=recent`)}
             type="album"
+            handleFavorite={handleFavorite}
           />
 
           <ScrollingMenu
@@ -94,6 +174,7 @@ const Dashboard = () => {
             cardSize={cardSize}
             onClickTitle={() => history.push(`/library/album?sortType=newest`)}
             type="album"
+            handleFavorite={handleFavorite}
           />
 
           <ScrollingMenu
@@ -112,6 +193,7 @@ const Dashboard = () => {
             cardSize={cardSize}
             onClickTitle={() => history.push(`/library/album?sortType=random`)}
             type="album"
+            handleFavorite={handleFavorite}
           />
 
           <ScrollingMenu
@@ -130,6 +212,7 @@ const Dashboard = () => {
             cardSize={cardSize}
             onClickTitle={() => history.push(`/library/album?sortType=frequent`)}
             type="album"
+            handleFavorite={handleFavorite}
           />
         </>
       )}

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<any>();
@@ -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}
             />
           </span>
         ))}

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 (
     <GenericPage
       header={
@@ -121,6 +169,7 @@ const SearchView = () => {
             }}
             cardSize={cardSize}
             type="artist"
+            handleFavorite={handleArtistFavorite}
           />
 
           <ScrollingMenu
@@ -139,6 +188,7 @@ const SearchView = () => {
             }}
             cardSize={cardSize}
             type="album"
+            handleFavorite={handleAlbumFavorite}
           />
           <SectionTitleWrapper>
             <SectionTitle>Songs</SectionTitle>