don't reset parts manually, do it all at once

app/hooks/list.ts

@@ -28,7 +28,7 @@ export const useFetchList = <T>(fetchList: () => Promise<T[]>) => {
   return { list, refreshing, refresh, reset }
 }
 
-export const useFetchList2 = (fetchList: () => Promise<void>, resetList: () => void) => {
+export const useFetchList2 = (fetchList: () => Promise<void>) => {
   const [refreshing, setRefreshing] = useState(false)
 
   const refresh = useCallback(async () => {
@@ -39,9 +39,8 @@ export const useFetchList2 = (fetchList: () => Promise<void>, resetList: () => v
 
   useActiveServerRefresh(
     useCallback(async () => {
-      resetList()
       await refresh()
-    }, [refresh, resetList]),
+    }, [refresh]),
   )
 
   return { refreshing, refresh }
@@ -72,8 +71,8 @@ export const useFetchPaginatedList = <T>(
 
   useActiveServerRefresh(
     useCallback(() => {
-      reset()
-    }, [reset]),
+      refresh()
+    }, [refresh]),
   )
 
   const fetchNextPage = useCallback(() => {

app/screens/Home.tsx

@@ -6,7 +6,7 @@ import NothingHere from '@app/components/NothingHere'
 import { useFetchPaginatedList } from '@app/hooks/list'
 import { useActiveServerRefresh } from '@app/hooks/server'
 import { AlbumListItem } from '@app/models/music'
-import { Album } from '@app/state/library'
+import { Album, mapById } from '@app/state/library'
 import { selectMusic } from '@app/state/music'
 import { selectSettings } from '@app/state/settings'
 import { Store, useStore } from '@app/state/store'
@@ -56,7 +56,7 @@ const Category = React.memo<{
   type: string
 }>(({ type }) => {
   const list = useHomeStore(useCallback(store => store.lists[type] || [], [type]))
-  const albums = useStore(useCallback(store => list.map(id => store.entities.albums[id]), [list]))
+  const albums = useStore(useCallback(store => mapById(store.entities.albums, list), [list]))
 
   const Albums = () => (
     <ScrollView

app/screens/LibraryAlbums.tsx

@@ -4,6 +4,7 @@ import FilterButton, { OptionData } from '@app/components/FilterButton'
 import GradientFlatList from '@app/components/GradientFlatList'
 import { useFetchPaginatedList } from '@app/hooks/list'
 import { Album, AlbumListItem } from '@app/models/music'
+import { mapById } from '@app/state/library'
 import { selectSettings } from '@app/state/settings'
 import { Store, useStore } from '@app/state/store'
 import colors from '@app/styles/colors'
@@ -96,7 +97,7 @@ const AlbumsList = () => {
   )
 
   const { list, refreshing, refresh, fetchNextPage } = useFetchPaginatedList(fetchPage, 300)
-  const albums = useStore(useCallback(store => list.map(id => store.entities.albums[id]), [list]))
+  const albums = useStore(useCallback(store => mapById(store.entities.albums, list), [list]))
 
   const layout = useWindowDimensions()
 

app/screens/LibraryArtists.tsx

@@ -23,9 +23,7 @@ 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 { refreshing, refresh } = useFetchList2(fetchArtists)
   const artists = useStore(selectArtists)
 
   const filter = useStore(selectSettings.libraryArtistFilter)

app/screens/LibraryPlaylists.tsx

@@ -1,10 +1,10 @@
 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 { PlaylistListItem } from '@app/models/music'
 import { selectMusic } from '@app/state/music'
 import { useStore } from '@app/state/store'
-import React from 'react'
+import React, { useCallback, useState } from 'react'
 import { StyleSheet } from 'react-native'
 
 const PlaylistRenderItem: React.FC<{ item: PlaylistListItem }> = ({ item }) => (
@@ -12,12 +12,13 @@ const PlaylistRenderItem: React.FC<{ item: PlaylistListItem }> = ({ item }) => (
 )
 
 const PlaylistsList = () => {
-  const fetchPlaylists = useStore(selectMusic.fetchPlaylists)
-  const { list, refreshing, refresh } = useFetchList(fetchPlaylists)
+  const fetchPlaylists = useStore(store => store.fetchLibraryPlaylists)
+  const { refreshing, refresh } = useFetchList2(fetchPlaylists)
+  const playlists = useStore(store => store.entities.playlists)
 
   return (
     <GradientFlatList
-      data={list}
+      data={Object.values(playlists)}
       renderItem={PlaylistRenderItem}
       keyExtractor={item => item.id}
       onRefresh={refresh}

app/state/library.ts

@@ -20,6 +20,7 @@ import {
   SubsonicResponse,
 } from '@app/subsonic/responses'
 import produce from 'immer'
+import { WritableDraft } from 'immer/dist/types/types-external'
 import merge from 'lodash.merge'
 import pick from 'lodash.pick'
 import { GetState, SetState } from 'zustand'
@@ -175,13 +176,12 @@ export type LibrarySlice = {
     songs: ById<Song>
   }
 
-  resetLibrary: () => void
+  resetLibrary: (state?: WritableDraft<Store>) => void
 
   fetchLibraryArtists: () => Promise<void>
   fetchLibraryArtist: (id: string) => Promise<void>
   fetchLibraryArtistInfo: (artistId: string) => Promise<void>
   fetchLibraryArtistTopSongs: (artistName: string) => Promise<void>
-  resetLibraryArtists: () => void
 
   fetchLibraryAlbum: (id: string) => Promise<void>
 
@@ -205,6 +205,10 @@ function mergeById<T extends { [id: string]: unknown }>(object: T, source: T): v
   merge(object, source)
 }
 
+export function mapById<T>(object: ById<T>, ids: string[]): T[] {
+  return ids.map(id => object[id]).filter(a => a !== undefined)
+}
+
 const defaultEntities = () => ({
   artists: {},
   artistAlbums: {},
@@ -225,7 +229,11 @@ const defaultEntities = () => ({
 export const createLibrarySlice = (set: SetState<Store>, get: GetState<Store>): LibrarySlice => ({
   entities: defaultEntities(),
 
-  resetLibrary: () => {
+  resetLibrary: state => {
+    if (state) {
+      state.entities = defaultEntities()
+      return
+    }
     set(store => {
       store.entities = defaultEntities()
     })
@@ -281,15 +289,6 @@ export const createLibrarySlice = (set: SetState<Store>, get: GetState<Store>):
     )
   },
 
-  resetLibraryArtists: () => {
-    set(
-      produce<LibrarySlice>(state => {
-        state.entities.artists = {}
-        state.entities.artistAlbums = {}
-      }),
-    )
-  },
-
   fetchLibraryArtistInfo: async id => {
     const client = get().client
     if (!client) {

app/state/settings.ts

@@ -115,10 +115,9 @@ export const createSettingsSlice = (set: SetState<Store>, get: GetState<Store>):
       produce<Store>(state => {
         state.settings.activeServer = newActiveServer.id
         state.client = new SubsonicApiClient(newActiveServer)
+        get().resetLibrary(state)
       }),
     )
-
-    get().resetLibrary()
   },
 
   getActiveServer: () => get().settings.servers.find(s => s.id === get().settings.activeServer),