blago
/
tunio-desktop
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Fix star for dashboard/search (#27)

master
jeffvli 3 years ago
committed by Jeff
parent
5ccd7bbeb0
commit
a6eca4f2ba
3 changed files with 145 additions and 3 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

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

11
src/components/scrollingmenu/ScrollingMenu.tsx
View File

@ -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>
))}

50
src/components/search/SearchView.tsx
View File

@ -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>

Write Preview
Loading…
Cancel
Save