added paginated list/album list

app/screens/ArtistView.tsx

@@ -5,7 +5,6 @@ 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 { useArtistInfo } from '@app/hooks/music'
 import { Album, Song } from '@app/models/music'
 import { useStore } from '@app/state/store'
 import { selectTrackPlayer } from '@app/state/trackplayer'
@@ -15,7 +14,7 @@ import font from '@app/styles/font'
 import { useLayout } from '@react-native-community/hooks'
 import { useNavigation } from '@react-navigation/native'
 import pick from 'lodash.pick'
-import React, { useEffect } from 'react'
+import React, { useCallback, useEffect } from 'react'
 import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
 import { useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated'
 
@@ -71,10 +70,16 @@ 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 albums = useStore(
+    useCallback(
+      store => {
+        const ids = store.entities.artistAlbums[id]
+        return ids ? pick(store.entities.albums, ids) : undefined
+      },
+      [id],
+    ),
+  )
+
   const fetchArtist = useStore(store => store.fetchLibraryArtist)
   const albumsLayout = useLayout()
 
@@ -109,10 +114,8 @@ const ArtistViewFallback = React.memo(() => (
 ))
 
 const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) => {
-  // const artist = useArtistInfo(id)
-
-  const artist = useStore(store => store.entities.artists[id])
-  const artistInfo = useStore(store => store.entities.artistInfo[id])
+  const artist = useStore(useCallback(store => store.entities.artists[id], [id]))
+  const artistInfo = useStore(useCallback(store => store.entities.artistInfo[id], [id]))
 
   const fetchArtist = useStore(store => store.fetchLibraryArtist)
   const fetchArtistInfo = useStore(store => store.fetchLibraryArtistInfo)

app/screens/LibraryAlbums.tsx

@@ -2,11 +2,10 @@ import { AlbumContextPressable } from '@app/components/ContextMenu'
 import CoverArt from '@app/components/CoverArt'
 import FilterButton, { OptionData } from '@app/components/FilterButton'
 import GradientFlatList from '@app/components/GradientFlatList'
-import { useFetchPaginatedList } from '@app/hooks/list'
+import { useFetchPaginatedList2 } from '@app/hooks/list'
 import { Album, AlbumListItem } from '@app/models/music'
-import { selectMusic } from '@app/state/music'
 import { selectSettings } from '@app/state/settings'
-import { useStore } from '@app/state/store'
+import { Store, useStore } from '@app/state/store'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import { GetAlbumList2Type } from '@app/subsonic/params'
@@ -56,9 +55,19 @@ const filterOptions: OptionData[] = [
   // { text: 'By Genre...', value: 'byGenre' },
 ]
 
+const selectAlbumList = (store: Store) => {
+  return Object.values(store.entities.albumsList)
+    .flat()
+    .map(id => store.entities.albums[id])
+}
+
 const AlbumsList = () => {
-  const fetchAlbums = useStore(selectMusic.fetchAlbums)
-  const { list, refreshing, refresh, reset, fetchNextPage } = useFetchPaginatedList(fetchAlbums, 300)
+  const list = useStore(selectAlbumList)
+
+  const fetchAlbumsNextPage = useStore(store => store.fetchLibraryAlbumsNextPage)
+  const resetAlbumsList = useStore(store => store.resetLibraryAlbumsList)
+  const { refreshing, refresh, fetchNextPage } = useFetchPaginatedList2(fetchAlbumsNextPage, resetAlbumsList)
+
   const filter = useStore(selectSettings.libraryAlbumFilter)
   const setFilter = useStore(selectSettings.setLibraryAlbumFilter)
 
@@ -67,7 +76,9 @@ const AlbumsList = () => {
   const size = layout.width / 3 - styles.itemWrapper.marginHorizontal * 2
   const height = size + 36
 
-  useEffect(() => reset(), [reset, filter])
+  useEffect(() => {
+    refresh()
+  }, [refresh, filter])
 
   return (
     <View style={styles.container}>

app/screens/LibraryArtists.tsx

@@ -1,13 +1,12 @@
 import FilterButton, { OptionData } from '@app/components/FilterButton'
 import GradientFlatList from '@app/components/GradientFlatList'
 import ListItem from '@app/components/ListItem'
-import { useFetchList, useFetchList2 } from '@app/hooks/list'
+import { 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, { useCallback, useEffect, useState } from 'react'
+import { Store, useStore } from '@app/state/store'
+import React, { useEffect, useState } from 'react'
 import { StyleSheet, View } from 'react-native'
 
 const ArtistRenderItem: React.FC<{ item: Artist }> = ({ item }) => (
@@ -20,12 +19,14 @@ const filterOptions: OptionData[] = [
   { text: 'Random', value: 'random' },
 ]
 
+const selectArtists = (store: Store) => store.entities.artists
+
 const ArtistsList = () => {
   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 artists = useStore(selectArtists)
 
   const filter = useStore(selectSettings.libraryArtistFilter)
   const setFilter = useStore(selectSettings.setLibraryArtistFiler)