|
|
@ -1,4 +1,7 @@ |
|
|
|
import React, { useState, useEffect } from 'react'; |
|
|
|
import React, { useState } from 'react'; |
|
|
|
import settings from 'electron-settings'; |
|
|
|
import { useHistory } from 'react-router-dom'; |
|
|
|
import { useQuery } from 'react-query'; |
|
|
|
import { getAlbums } from '../../api/api'; |
|
|
|
import PageLoader from '../loader/PageLoader'; |
|
|
|
import GenericPage from '../layout/GenericPage'; |
|
|
@ -6,45 +9,34 @@ import GenericPageHeader from '../layout/GenericPageHeader'; |
|
|
|
import ScrollingMenu from '../scrollingmenu/ScrollingMenu'; |
|
|
|
|
|
|
|
const Dashboard = () => { |
|
|
|
/* We use regular state and fetching via axios for the dashboard component as |
|
|
|
the horizontal scrolling menu component breaks due to react-query's autofetching. |
|
|
|
When autofetching occurs, the visibility context of the component fails to update |
|
|
|
which prevents the left/right scrolling buttons from functioning properly. */ |
|
|
|
const [recentAlbums, setRecentAlbums]: any[] = useState(null); |
|
|
|
const [newestAlbums, setNewestAlbums]: any[] = useState(null); |
|
|
|
const [randomAlbums, setRandomAlbums]: any[] = useState(null); |
|
|
|
const [frequentAlbums, setFrequentAlbums]: any[] = useState(null); |
|
|
|
const [isLoading, setIsLoading] = useState(false); |
|
|
|
const [isError, setIsError]: any = useState(null); |
|
|
|
const history = useHistory(); |
|
|
|
const cardSize = Number(settings.getSync('gridCardSize')); |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
const fetchData = async () => { |
|
|
|
setIsLoading(true); |
|
|
|
try { |
|
|
|
const newest = await getAlbums({ type: 'newest', size: 20 }, 250); |
|
|
|
const recent = await getAlbums({ type: 'recent', size: 20 }, 250); |
|
|
|
const random = await getAlbums({ type: 'random', size: 20 }, 250); |
|
|
|
const frequent = await getAlbums({ type: 'frequent', size: 20 }, 250); |
|
|
|
const { isLoading: isLoadingRecent, data: recentAlbums }: any = useQuery( |
|
|
|
['recentAlbums'], |
|
|
|
() => getAlbums({ type: 'newest', size: 20 }, 250), |
|
|
|
{ refetchOnWindowFocus: false } |
|
|
|
); |
|
|
|
|
|
|
|
setNewestAlbums(newest); |
|
|
|
setRecentAlbums(recent); |
|
|
|
setRandomAlbums(random); |
|
|
|
setFrequentAlbums(frequent); |
|
|
|
} catch (err) { |
|
|
|
if (err instanceof Error) { |
|
|
|
setIsError(err.message); |
|
|
|
} else { |
|
|
|
setIsError('An unknown error occurred while fetching the data.'); |
|
|
|
} |
|
|
|
} |
|
|
|
const { isLoading: isLoadingNewest, data: newestAlbums }: any = useQuery( |
|
|
|
['newestAlbums'], |
|
|
|
() => getAlbums({ type: 'recent', size: 20 }, 250), |
|
|
|
{ refetchOnWindowFocus: false } |
|
|
|
); |
|
|
|
|
|
|
|
setIsLoading(false); |
|
|
|
}; |
|
|
|
const { isLoading: isLoadingRandom, data: randomAlbums }: any = useQuery( |
|
|
|
['randomAlbums'], |
|
|
|
() => getAlbums({ type: 'random', size: 20 }, 250), |
|
|
|
{ refetchOnWindowFocus: false } |
|
|
|
); |
|
|
|
|
|
|
|
fetchData(); |
|
|
|
}, []); |
|
|
|
const { isLoading: isLoadingFrequent, data: frequentAlbums }: any = useQuery( |
|
|
|
['frequentAlbums'], |
|
|
|
() => getAlbums({ type: 'frequent', size: 20 }, 250), |
|
|
|
{ refetchOnWindowFocus: false } |
|
|
|
); |
|
|
|
|
|
|
|
if (isLoading) { |
|
|
|
if (isLoadingRecent || isLoadingNewest || isLoadingRandom || isLoadingFrequent) { |
|
|
|
return ( |
|
|
|
<GenericPage hideDivider header={<GenericPageHeader title="Dashboard" />}> |
|
|
|
<PageLoader /> |
|
|
@ -52,14 +44,6 @@ const Dashboard = () => { |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
if (isError) { |
|
|
|
return ( |
|
|
|
<GenericPage hideDivider header={<GenericPageHeader title="Dashboard" />}> |
|
|
|
<span>Error: {isError}</span> |
|
|
|
</GenericPage> |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
return ( |
|
|
|
<GenericPage header={<GenericPageHeader title="Dashboard" />} hideDivider> |
|
|
|
{newestAlbums && recentAlbums && randomAlbums && ( |
|
|
@ -67,49 +51,69 @@ const Dashboard = () => { |
|
|
|
<ScrollingMenu |
|
|
|
title="Recently Played" |
|
|
|
data={recentAlbums.album} |
|
|
|
cardTitle={{ prefix: 'album', property: 'name' }} |
|
|
|
cardTitle={{ |
|
|
|
prefix: '/library/album', |
|
|
|
property: 'name', |
|
|
|
urlProperty: 'albumId', |
|
|
|
}} |
|
|
|
cardSubtitle={{ |
|
|
|
prefix: 'artist', |
|
|
|
property: 'artist', |
|
|
|
urlProperty: 'artistId', |
|
|
|
}} |
|
|
|
cardSize="175px" |
|
|
|
cardSize={cardSize} |
|
|
|
onClickTitle={() => history.push(`/library/album?sortType=recent`)} |
|
|
|
/> |
|
|
|
|
|
|
|
<ScrollingMenu |
|
|
|
title="Recently Added" |
|
|
|
data={newestAlbums.album} |
|
|
|
cardTitle={{ prefix: 'album', property: 'name' }} |
|
|
|
cardTitle={{ |
|
|
|
prefix: '/library/album', |
|
|
|
property: 'name', |
|
|
|
urlProperty: 'albumId', |
|
|
|
}} |
|
|
|
cardSubtitle={{ |
|
|
|
prefix: 'artist', |
|
|
|
property: 'artist', |
|
|
|
urlProperty: 'artistId', |
|
|
|
}} |
|
|
|
cardSize="175px" |
|
|
|
cardSize={cardSize} |
|
|
|
onClickTitle={() => history.push(`/library/album?sortType=newest`)} |
|
|
|
/> |
|
|
|
|
|
|
|
<ScrollingMenu |
|
|
|
title="Random" |
|
|
|
data={randomAlbums.album} |
|
|
|
cardTitle={{ prefix: 'album', property: 'name' }} |
|
|
|
cardTitle={{ |
|
|
|
prefix: '/library/album', |
|
|
|
property: 'name', |
|
|
|
urlProperty: 'albumId', |
|
|
|
}} |
|
|
|
cardSubtitle={{ |
|
|
|
prefix: 'artist', |
|
|
|
property: 'artist', |
|
|
|
urlProperty: 'artistId', |
|
|
|
}} |
|
|
|
cardSize="175px" |
|
|
|
cardSize={cardSize} |
|
|
|
onClickTitle={() => history.push(`/library/album?sortType=random`)} |
|
|
|
/> |
|
|
|
|
|
|
|
<ScrollingMenu |
|
|
|
title="Most Played" |
|
|
|
data={frequentAlbums.album} |
|
|
|
cardTitle={{ prefix: 'album', property: 'name' }} |
|
|
|
cardTitle={{ |
|
|
|
prefix: '/library/album', |
|
|
|
property: 'name', |
|
|
|
urlProperty: 'albumId', |
|
|
|
}} |
|
|
|
cardSubtitle={{ |
|
|
|
prefix: 'artist', |
|
|
|
property: 'artist', |
|
|
|
urlProperty: 'artistId', |
|
|
|
}} |
|
|
|
cardSize="175px" |
|
|
|
cardSize={cardSize} |
|
|
|
onClickTitle={() => history.push(`/library/album?sortType=frequent`)} |
|
|
|
/> |
|
|
|
</> |
|
|
|
)} |
|
|
|