start of music store refactor

moving stuff into a state cache
better separate it from view logic

app/screens/ArtistView.tsx

@@ -14,7 +14,8 @@ import dimensions from '@app/styles/dimensions'
 import font from '@app/styles/font'
 import { useLayout } from '@react-native-community/hooks'
 import { useNavigation } from '@react-navigation/native'
-import React from 'react'
+import pick from 'lodash.pick'
+import React, { useEffect } from 'react'
 import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
 import { useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated'
 
@@ -67,6 +68,40 @@ const TopSongs = React.memo<{
   )
 })
 
+const ArtistAlbums = React.memo<{
+  id: string
+}>(({ id }) => {
+  const albums = useStore(store => {
+    const ids = store.entities.artistAlbums[id]
+    return ids ? pick(store.entities.albums, ids) : undefined
+  })
+  const fetchArtist = useStore(store => store.fetchLibraryArtist)
+  const albumsLayout = useLayout()
+
+  useEffect(() => {
+    if (!albums) {
+      fetchArtist(id)
+    }
+  }, [albums, fetchArtist, id])
+
+  const sortedAlbums = (albums ? Object.values(albums) : [])
+    .sort((a, b) => a.name.localeCompare(b.name))
+    .sort((a, b) => (b.year || 0) - (a.year || 0))
+
+  const albumSize = albumsLayout.width / 2 - styles.contentContainer.paddingHorizontal / 2
+
+  return (
+    <>
+      <Header>Albums</Header>
+      <View style={styles.albums} onLayout={albumsLayout.onLayout}>
+        {sortedAlbums.map(a => (
+          <AlbumItem key={a.id} album={a} height={albumSize} width={albumSize} />
+        ))}
+      </View>
+    </>
+  )
+})
+
 const ArtistViewFallback = React.memo(() => (
   <GradientBackground style={styles.fallback}>
     <ActivityIndicator size="large" color={colors.accent} />
@@ -74,8 +109,14 @@ const ArtistViewFallback = React.memo(() => (
 ))
 
 const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) => {
-  const artist = useArtistInfo(id)
-  const albumsLayout = useLayout()
+  // const artist = useArtistInfo(id)
+
+  const artist = useStore(store => store.entities.artists[id])
+  const artistInfo = useStore(store => store.entities.artistInfo[id])
+
+  const fetchArtist = useStore(store => store.fetchLibraryArtist)
+  const fetchArtistInfo = useStore(store => store.fetchLibraryArtistInfo)
+
   const coverLayout = useLayout()
   const headerOpacity = useSharedValue(0)
 
@@ -91,16 +132,22 @@ const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) =>
     }
   })
 
-  const albumSize = albumsLayout.width / 2 - styles.contentContainer.paddingHorizontal / 2
+  useEffect(() => {
+    if (!artist) {
+      fetchArtist(id)
+    }
+  }, [artist, fetchArtist, id])
+
+  useEffect(() => {
+    if (!artistInfo) {
+      fetchArtistInfo(id)
+    }
+  }, [artistInfo, fetchArtistInfo, id])
 
   if (!artist) {
     return <ArtistViewFallback />
   }
 
-  const _albums = [...artist.albums]
-    .sort((a, b) => a.name.localeCompare(b.name))
-    .sort((a, b) => (b.year || 0) - (a.year || 0))
-
   return (
     <View style={styles.container}>
       <HeaderBar title={title} headerStyle={[styles.header, animatedOpacity]} />
@@ -115,17 +162,12 @@ const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) =>
           <Text style={styles.title}>{artist.name}</Text>
         </View>
         <View style={styles.contentContainer}>
-          {artist.topSongs.length > 0 ? (
+          {/* {artist.topSongs.length > 0 ? (
             <TopSongs songs={artist.topSongs} name={artist.name} artistId={artist.id} />
           ) : (
             <></>
-          )}
-          <Header>Albums</Header>
-          <View style={styles.albums} onLayout={albumsLayout.onLayout}>
-            {_albums.map(a => (
-              <AlbumItem key={a.id} album={a} height={albumSize} width={albumSize} />
-            ))}
-          </View>
+          )} */}
+          <ArtistAlbums id={id} />
         </View>
       </GradientScrollView>
     </View>

app/screens/LibraryArtists.tsx

@@ -1,13 +1,13 @@
 import FilterButton, { OptionData } from '@app/components/FilterButton'
 import GradientFlatList from '@app/components/GradientFlatList'
 import ListItem from '@app/components/ListItem'
-import { useFetchList } from '@app/hooks/list'
+import { useFetchList, useFetchList2 } from '@app/hooks/list'
 import { Artist } from '@app/models/music'
 import { ArtistFilterType } from '@app/models/settings'
 import { selectMusic } from '@app/state/music'
 import { selectSettings } from '@app/state/settings'
 import { useStore } from '@app/state/store'
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { StyleSheet, View } from 'react-native'
 
 const ArtistRenderItem: React.FC<{ item: Artist }> = ({ item }) => (
@@ -21,13 +21,18 @@ const filterOptions: OptionData[] = [
 ]
 
 const ArtistsList = () => {
-  const fetchArtists = useStore(selectMusic.fetchArtists)
-  const { list, refreshing, refresh } = useFetchList(fetchArtists)
+  const fetchArtists = useStore(store => store.fetchLibraryArtists)
+  const resetArtists = useStore(store => store.resetLibraryArtists)
+
+  const { refreshing, refresh } = useFetchList2(fetchArtists, resetArtists)
+  const artists = useStore(store => store.entities.artists)
+
   const filter = useStore(selectSettings.libraryArtistFilter)
   const setFilter = useStore(selectSettings.setLibraryArtistFiler)
   const [sortedList, setSortedList] = useState<Artist[]>([])
 
   useEffect(() => {
+    const list = Object.values(artists)
     switch (filter.type) {
       case 'random':
         setSortedList([...list].sort(() => Math.random() - 0.5))
@@ -39,7 +44,7 @@ const ArtistsList = () => {
         setSortedList([...list])
         break
     }
-  }, [list, filter])
+  }, [filter.type, artists])
 
   return (
     <View style={styles.container}>