React Query refactor (#91)

* initial react-query experiments

* use queries for item screens

send the data we do have over routing to prepopulate (album/playlist)
use number for starred because sending Date freaks out react-navigation

* add in equiv. song cover art fix

* reorg, switch artistview over

start mapping song cover art when any are available

* refactor useStar to queries

fix caching for starred items and album cover art

* add hook to reset queries on server change

* refactor search to use query

* fix song cover art setting

* use query for artistInfo

* remove last bits of library state

* cleanup

* use query key factory

already fixed one wrong key...

* require coverart size

* let's try no promise queues on these for now

* image cache uses query

* perf fix for playlist parsing

also use placeholder data so we don't have to deal with staleness

* drill that disabled

also list controls doesn't need its own songs hook/copy

* switch to react-native-blob-util for downloads

slightly slower but allows us to use DownloadManager, which backgrounds downloads so they are no longer corrupted when the app suspends

* add a fake "top songs" based on artist search

then sorted by play count/ratings
artistview should load now even if topSongs fails

* try not to swap between topSongs/search on refetch

set queueContext by song list so the index isn't off if the list changes

* add content type validation for file fetching

also try to speed up existing file return by limiting fs ops

* if the HEAD fails, don't queue the download

* clean up params

* reimpl clear image cache

* precompute contextId

prevents wrong "is playing" when any mismatch between queue and list

* clear images from all servers

use external files dir instead of cache

* fix pressable disabled flicker

don't retry topsongs on failure
try to optimize setqueue and fixcoverart a bit

* wait for queries during clear

* break out fetchExistingFile from fetchFile

allows to tell if file is coming from disk or not
only show placeholder/loading spinner if actually fetching image

* forgot these wouldn't do anything with objects

* remove query cache when switching servers

* add content-disposition extension gathering

add support for progress hook (needs native support still)

* added custom RNBU pkg with progress changes

* fully unmount tabs when server changes

prevents unwanted requests, gives fresh start on switch
fix fixCoverArt not re-rendering in certain cases on search

* use serverId from fetch deps

* fix lint

* update licenses

* just use the whole lodash package

* make using cache buster optional

app/screens/ArtistView.tsx

@@ -5,15 +5,16 @@ import GradientScrollView from '@app/components/GradientScrollView'
 import Header from '@app/components/Header'
 import HeaderBar from '@app/components/HeaderBar'
 import ListItem from '@app/components/ListItem'
+import { useQueryArtist, useQueryArtistTopSongs } from '@app/hooks/query'
+import { useSetQueue } from '@app/hooks/trackplayer'
 import { Album, Song } from '@app/models/library'
-import { useStore, useStoreDeep } from '@app/state/store'
 import colors from '@app/styles/colors'
 import dimensions from '@app/styles/dimensions'
 import font from '@app/styles/font'
-import { mapById } from '@app/util/state'
 import { useLayout } from '@react-native-community/hooks'
 import { useNavigation } from '@react-navigation/native'
-import React, { useCallback, useEffect } from 'react'
+import equal from 'fast-deep-equal/es6/react'
+import React from 'react'
 import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
 import { useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated'
 
@@ -31,22 +32,21 @@ const AlbumItem = React.memo<{
   return (
     <AlbumContextPressable
       album={album}
-      onPress={() => navigation.navigate('album', { id: album.id, title: album.name })}
+      onPress={() => navigation.navigate('album', { id: album.id, title: album.name, album })}
       menuStyle={[styles.albumItem, { width }]}
       triggerOuterWrapperStyle={{ width }}>
-      <CoverArt type="cover" coverArt={album.coverArt} style={{ height, width }} resizeMode={'cover'} />
+      <CoverArt type="cover" coverArt={album.coverArt} style={{ height, width }} resizeMode="cover" size="thumbnail" />
       <Text style={styles.albumTitle}>{album.name}</Text>
       <Text style={styles.albumYear}> {album.year ? album.year : ''}</Text>
     </AlbumContextPressable>
   )
-})
+}, equal)
 
 const TopSongs = React.memo<{
   songs: Song[]
   name: string
-  artistId: string
-}>(({ songs, name, artistId }) => {
-  const setQueue = useStore(store => store.setQueue)
+}>(({ songs, name }) => {
+  const { setQueue, isReady, contextId } = useSetQueue('artist', songs)
 
   return (
     <>
@@ -55,16 +55,17 @@ const TopSongs = React.memo<{
         <ListItem
           key={i}
           item={s}
-          contextId={artistId}
+          contextId={contextId}
           queueId={i}
           showArt={true}
           subtitle={s.album}
-          onPress={() => setQueue(songs, name, 'artist', artistId, i)}
+          onPress={() => setQueue({ title: name, playTrack: i })}
+          disabled={!isReady}
         />
       ))}
     </>
   )
-})
+}, equal)
 
 const ArtistAlbums = React.memo<{
   albums: Album[]
@@ -87,7 +88,7 @@ const ArtistAlbums = React.memo<{
       </View>
     </>
   )
-})
+}, equal)
 
 const ArtistViewFallback = React.memo(() => (
   <GradientBackground style={styles.fallback}>
@@ -96,18 +97,8 @@ const ArtistViewFallback = React.memo(() => (
 ))
 
 const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) => {
-  const artist = useStoreDeep(useCallback(store => store.library.artists[id], [id]))
-  const topSongIds = useStoreDeep(useCallback(store => store.library.artistNameTopSongs[artist?.name], [artist?.name]))
-  const topSongs = useStoreDeep(
-    useCallback(store => (topSongIds ? mapById(store.library.songs, topSongIds) : undefined), [topSongIds]),
-  )
-  const albumIds = useStoreDeep(useCallback(store => store.library.artistAlbums[id], [id]))
-  const albums = useStoreDeep(
-    useCallback(store => (albumIds ? mapById(store.library.albums, albumIds) : undefined), [albumIds]),
-  )
-
-  const fetchArtist = useStore(store => store.fetchArtist)
-  const fetchTopSongs = useStore(store => store.fetchArtistTopSongs)
+  const { data: artistData } = useQueryArtist(id)
+  const { data: topSongs, isError } = useQueryArtistTopSongs(artistData?.artist?.name)
 
   const coverLayout = useLayout()
   const headerOpacity = useSharedValue(0)
@@ -124,22 +115,12 @@ const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) =>
     }
   })
 
-  useEffect(() => {
-    if (!artist || !albumIds) {
-      fetchArtist(id)
-    }
-  }, [artist, albumIds, fetchArtist, id])
-
-  useEffect(() => {
-    if (artist && !topSongIds) {
-      fetchTopSongs(artist.name)
-    }
-  }, [artist, fetchTopSongs, topSongIds])
-
-  if (!artist) {
+  if (!artistData) {
     return <ArtistViewFallback />
   }
 
+  const { artist, albums } = artistData
+
   return (
     <View style={styles.container}>
       <HeaderBar title={title} headerStyle={[styles.header, animatedOpacity]} />
@@ -149,15 +130,15 @@ const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) =>
         style={styles.scroll}
         contentContainerStyle={styles.scrollContent}
         onScroll={onScroll}>
-        <CoverArt type="artist" size="original" artistId={artist.id} style={styles.artistCover} resizeMode={'cover'} />
+        <CoverArt type="artist" size="original" artistId={artist.id} style={styles.artistCover} resizeMode="cover" />
         <View style={styles.titleContainer}>
           <Text style={styles.title}>{artist.name}</Text>
         </View>
         <View style={styles.contentContainer}>
-          {topSongs && albums ? (
-            topSongs.length > 0 ? (
+          {(topSongs || isError) && artist ? (
+            topSongs && topSongs.length > 0 ? (
               <>
-                <TopSongs songs={topSongs} name={artist.name} artistId={artist.id} />
+                <TopSongs songs={topSongs} name={artist.name} />
                 <ArtistAlbums albums={albums} />
               </>
             ) : (