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