mirror of
https://github.com/austinried/subtracks.git
synced 2026-02-10 06:52:43 +01:00
fix view artist from context menu add loading indicators to song list and artist views (show info we have right away)
77 lines
2.3 KiB
TypeScript
77 lines
2.3 KiB
TypeScript
import { CacheItemTypeKey } from '@app/models/cache'
|
|
import { selectCache } from '@app/state/cache'
|
|
import { selectSettings } from '@app/state/settings'
|
|
import { Store, useStore, useStoreDeep } from '@app/state/store'
|
|
import { useCallback, useEffect } from 'react'
|
|
|
|
const useFileRequest = (key: CacheItemTypeKey, id: string) => {
|
|
const file = useStore(
|
|
useCallback(
|
|
(store: Store) => {
|
|
const activeServerId = store.settings.activeServer
|
|
if (!activeServerId) {
|
|
return
|
|
}
|
|
|
|
return store.cacheFiles[activeServerId][key][id]
|
|
},
|
|
[key, id],
|
|
),
|
|
)
|
|
const request = useStore(
|
|
useCallback(
|
|
(store: Store) => {
|
|
const activeServerId = store.settings.activeServer
|
|
if (!activeServerId) {
|
|
return
|
|
}
|
|
|
|
return store.cacheRequests[activeServerId][key][id]
|
|
},
|
|
[key, id],
|
|
),
|
|
)
|
|
|
|
return { file, request }
|
|
}
|
|
|
|
export const useCoverArtFile = (coverArt = '-1') => {
|
|
const type: CacheItemTypeKey = 'coverArt'
|
|
const { file, request } = useFileRequest(type, coverArt)
|
|
const client = useStore(selectSettings.client)
|
|
const cacheItem = useStore(selectCache.cacheItem)
|
|
|
|
useEffect(() => {
|
|
if (!file && client) {
|
|
cacheItem(type, coverArt, () => client.getCoverArtUri({ id: coverArt }))
|
|
}
|
|
// intentionally leaving file out so it doesn't re-render if the request fails
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [cacheItem, client, coverArt, type])
|
|
|
|
return { file, request }
|
|
}
|
|
|
|
export const useArtistArtFile = (artistId: string) => {
|
|
const type: CacheItemTypeKey = 'artistArt'
|
|
const fetchArtistInfo = useStore(store => store.fetchLibraryArtistInfo)
|
|
const artistInfo = useStoreDeep(store => store.entities.artistInfo[artistId])
|
|
const { file, request } = useFileRequest(type, artistId)
|
|
const cacheItem = useStore(selectCache.cacheItem)
|
|
|
|
useEffect(() => {
|
|
if (!artistInfo) {
|
|
fetchArtistInfo(artistId)
|
|
return
|
|
}
|
|
|
|
if (!file && artistInfo.largeImageUrl) {
|
|
cacheItem(type, artistId, artistInfo.largeImageUrl)
|
|
}
|
|
// intentionally leaving file out so it doesn't re-render if the request fails
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [artistId, cacheItem, fetchArtistInfo, type, artistInfo])
|
|
|
|
return { file, request }
|
|
}
|