refactored library lists to enable pagination

app/screens/Home.tsx

@@ -3,7 +3,7 @@ import CoverArt from '@app/components/CoverArt'
 import GradientScrollView from '@app/components/GradientScrollView'
 import Header from '@app/components/Header'
 import NothingHere from '@app/components/NothingHere'
-import { useActiveListRefresh2 } from '@app/hooks/server'
+import { useActiveServerRefresh } from '@app/hooks/server'
 import { AlbumListItem } from '@app/models/music'
 import { selectMusic } from '@app/state/music'
 import { selectSettings } from '@app/state/settings'
@@ -87,7 +87,7 @@ const Home = () => {
   const update = useStore(selectMusic.fetchHomeLists)
   const clear = useStore(selectMusic.clearHomeLists)
 
-  useActiveListRefresh2(
+  useActiveServerRefresh(
     useCallback(() => {
       clear()
       update()

app/screens/LibraryAlbums.tsx

@@ -1,7 +1,7 @@
 import { AlbumContextPressable } from '@app/components/ContextMenu'
 import CoverArt from '@app/components/CoverArt'
 import GradientFlatList from '@app/components/GradientFlatList'
-import { useActiveListRefresh2 } from '@app/hooks/server'
+import { useFetchPaginatedList } from '@app/hooks/list'
 import { Album, AlbumListItem } from '@app/models/music'
 import { selectMusic } from '@app/state/music'
 import { useStore } from '@app/state/store'
@@ -48,31 +48,28 @@ const AlbumListRenderItem: React.FC<{
 }> = ({ item }) => <AlbumItem album={item.album} size={item.size} height={item.height} />
 
 const AlbumsList = () => {
-  const list = useStore(selectMusic.albums)
-  const updating = useStore(selectMusic.albumsUpdating)
-  const updateList = useStore(selectMusic.fetchAlbums)
-
-  useActiveListRefresh2(updateList)
+  const fetchAlbums = useStore(selectMusic.fetchAlbums)
+  const { list, refreshing, refresh, fetchNextPage } = useFetchPaginatedList(fetchAlbums, 60)
 
   const layout = useWindowDimensions()
 
   const size = layout.width / 3 - styles.itemWrapper.marginHorizontal * 2
   const height = size + 36
 
-  const albumsList = list.map(album => ({ album, size, height }))
-
   return (
     <View style={styles.container}>
       <GradientFlatList
         contentContainerStyle={styles.listContent}
-        data={albumsList}
+        data={list.map(album => ({ album, size, height }))}
         renderItem={AlbumListRenderItem}
         keyExtractor={item => item.album.id}
         numColumns={3}
         removeClippedSubviews={true}
-        refreshing={updating}
-        onRefresh={updateList}
+        refreshing={refreshing}
+        onRefresh={refresh}
         overScrollMode="never"
+        onEndReached={fetchNextPage}
+        onEndReachedThreshold={1}
         getItemLayout={(_data, index) => ({
           length: height,
           offset: height * Math.floor(index / 3),

app/screens/LibraryArtists.tsx

@@ -1,6 +1,6 @@
 import GradientFlatList from '@app/components/GradientFlatList'
 import ListItem from '@app/components/ListItem'
-import { useActiveListRefresh2 } from '@app/hooks/server'
+import { useFetchList } from '@app/hooks/list'
 import { Artist } from '@app/models/music'
 import { selectMusic } from '@app/state/music'
 import { useStore } from '@app/state/store'
@@ -12,20 +12,17 @@ const ArtistRenderItem: React.FC<{ item: Artist }> = ({ item }) => (
 )
 
 const ArtistsList = () => {
-  const artists = useStore(selectMusic.artists)
-  const updating = useStore(selectMusic.artistsUpdating)
-  const updateArtists = useStore(selectMusic.fetchArtists)
-
-  useActiveListRefresh2(updateArtists)
+  const fetchArtists = useStore(selectMusic.fetchArtists)
+  const { list, refreshing, refresh } = useFetchList(fetchArtists)
 
   return (
     <GradientFlatList
       contentContainerStyle={styles.listContent}
-      data={artists}
+      data={list}
       renderItem={ArtistRenderItem}
       keyExtractor={item => item.id}
-      onRefresh={updateArtists}
-      refreshing={updating}
+      onRefresh={refresh}
+      refreshing={refreshing}
       overScrollMode="never"
     />
   )

app/screens/LibraryPlaylists.tsx

@@ -1,6 +1,6 @@
 import GradientFlatList from '@app/components/GradientFlatList'
 import ListItem from '@app/components/ListItem'
-import { useActiveListRefresh2 } from '@app/hooks/server'
+import { useFetchList } from '@app/hooks/list'
 import { PlaylistListItem } from '@app/models/music'
 import { selectMusic } from '@app/state/music'
 import { useStore } from '@app/state/store'
@@ -12,20 +12,17 @@ const PlaylistRenderItem: React.FC<{ item: PlaylistListItem }> = ({ item }) => (
 )
 
 const PlaylistsList = () => {
-  const playlists = useStore(selectMusic.playlists)
-  const updating = useStore(selectMusic.playlistsUpdating)
-  const updatePlaylists = useStore(selectMusic.fetchPlaylists)
-
-  useActiveListRefresh2(updatePlaylists)
+  const fetchPlaylists = useStore(selectMusic.fetchPlaylists)
+  const { list, refreshing, refresh } = useFetchList(fetchPlaylists)
 
   return (
     <GradientFlatList
       contentContainerStyle={styles.listContent}
-      data={playlists}
+      data={list}
       renderItem={PlaylistRenderItem}
       keyExtractor={item => item.id}
-      onRefresh={updatePlaylists}
-      refreshing={updating}
+      onRefresh={refresh}
+      refreshing={refreshing}
       overScrollMode="never"
     />
   )

app/screens/Search.tsx

@@ -2,7 +2,7 @@ import GradientScrollView from '@app/components/GradientScrollView'
 import Header from '@app/components/Header'
 import ListItem from '@app/components/ListItem'
 import NothingHere from '@app/components/NothingHere'
-import { useActiveListRefresh2 } from '@app/hooks/server'
+import { useActiveServerRefresh } from '@app/hooks/server'
 import { ListableItem, SearchResults, Song } from '@app/models/music'
 import { selectMusic } from '@app/state/music'
 import { useStore } from '@app/state/store'
@@ -68,7 +68,7 @@ const Search = () => {
   const updating = useStore(selectMusic.searchResultsUpdating)
   const results = useStore(selectMusic.searchResults)
 
-  useActiveListRefresh2(
+  useActiveServerRefresh(
     useCallback(() => {
       setText('')
       clearSearch()

app/screens/Settings.tsx

@@ -199,13 +199,6 @@ const SettingsContent = React.memo(() => {
         onPress={clear}
         buttonStyle="hollow"
       />
-      {/* <Button
-        disabled={clearing}
-        style={styles.button}
-        title="Reset everything to default"
-        onPress={() => {}}
-        buttonStyle="hollow"
-      /> */}
     </View>
   )
 })