fixed changing activeServer

app/screens/Home.tsx

@@ -5,7 +5,8 @@ import NothingHere from '@app/components/NothingHere'
 import PressableOpacity from '@app/components/PressableOpacity'
 import { AlbumListItem } from '@app/models/music'
 import { homeListsAtom, homeListsUpdatingAtom, useUpdateHomeLists } from '@app/state/music'
-import { homeListTypesAtom, useActiveServerRefresh } from '@app/state/settings'
+import { useActiveServerRefresh } from '@app/state/server'
+import { homeListTypesAtom } from '@app/state/settings'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import { GetAlbumListType } from '@app/subsonic/params'

app/screens/LibraryAlbums.tsx

@@ -3,12 +3,12 @@ import GradientFlatList from '@app/components/GradientFlatList'
 import PressableOpacity from '@app/components/PressableOpacity'
 import { Album } from '@app/models/music'
 import { albumListAtom, albumListUpdatingAtom, useUpdateAlbumList } from '@app/state/music'
-import { useActiveServerRefresh } from '@app/state/settings'
+import { useActiveListRefresh } from '@app/state/server'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import { useNavigation } from '@react-navigation/native'
 import { useAtomValue } from 'jotai/utils'
-import React, { useEffect } from 'react'
+import React from 'react'
 import { StyleSheet, Text, useWindowDimensions, View } from 'react-native'
 
 const AlbumItem = React.memo<{
@@ -56,7 +56,7 @@ const AlbumsList = () => {
   const updating = useAtomValue(albumListUpdatingAtom)
   const updateList = useUpdateAlbumList()
 
-  useActiveServerRefresh(updateList)
+  useActiveListRefresh(list, updateList)
 
   const layout = useWindowDimensions()
 
@@ -65,12 +65,6 @@ const AlbumsList = () => {
 
   const albumsList = list.map(album => ({ album, size, height }))
 
-  useEffect(() => {
-    if (albumsList.length === 0) {
-      updateList()
-    }
-  })
-
   return (
     <View style={styles.container}>
       <GradientFlatList

app/screens/LibraryArtists.tsx

@@ -2,8 +2,9 @@ import GradientFlatList from '@app/components/GradientFlatList'
 import ListItem from '@app/components/ListItem'
 import { Artist } from '@app/models/music'
 import { artistsAtom, artistsUpdatingAtom, useUpdateArtists } from '@app/state/music'
+import { useActiveListRefresh } from '@app/state/server'
 import { useAtomValue } from 'jotai/utils'
-import React, { useEffect } from 'react'
+import React from 'react'
 import { StyleSheet } from 'react-native'
 
 const ArtistRenderItem: React.FC<{ item: Artist }> = ({ item }) => (
@@ -15,11 +16,7 @@ const ArtistsList = () => {
   const updating = useAtomValue(artistsUpdatingAtom)
   const updateArtists = useUpdateArtists()
 
-  useEffect(() => {
-    if (artists.length === 0) {
-      updateArtists()
-    }
-  })
+  useActiveListRefresh(artists, updateArtists)
 
   return (
     <GradientFlatList

app/screens/LibraryPlaylists.tsx

@@ -2,8 +2,9 @@ import GradientFlatList from '@app/components/GradientFlatList'
 import ListItem from '@app/components/ListItem'
 import { PlaylistListItem } from '@app/models/music'
 import { playlistsAtom, playlistsUpdatingAtom, useUpdatePlaylists } from '@app/state/music'
+import { useActiveListRefresh } from '@app/state/server'
 import { useAtomValue } from 'jotai/utils'
-import React, { useEffect } from 'react'
+import React from 'react'
 import { StyleSheet } from 'react-native'
 
 const PlaylistRenderItem: React.FC<{ item: PlaylistListItem }> = ({ item }) => (
@@ -15,11 +16,7 @@ const PlaylistsList = () => {
   const updating = useAtomValue(playlistsUpdatingAtom)
   const updatePlaylists = useUpdatePlaylists()
 
-  useEffect(() => {
-    if (playlists.length === 0) {
-      updatePlaylists()
-    }
-  })
+  useActiveListRefresh(playlists, updatePlaylists)
 
   return (
     <GradientFlatList

app/screens/Settings.tsx

@@ -4,10 +4,10 @@ import Header from '@app/components/Header'
 import PressableOpacity from '@app/components/PressableOpacity'
 import SettingsItem from '@app/components/SettingsItem'
 import { Server } from '@app/models/settings'
+import { useSetActiveServer } from '@app/state/server'
 import { activeServerAtom, appSettingsAtom } from '@app/state/settings'
 import colors from '@app/styles/colors'
 import { useNavigation } from '@react-navigation/core'
-import { useAtom } from 'jotai'
 import { useAtomValue } from 'jotai/utils'
 import React, { useCallback } from 'react'
 import { StatusBar, StyleSheet, View } from 'react-native'
@@ -16,15 +16,13 @@ import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
 const ServerItem = React.memo<{
   server: Server
 }>(({ server }) => {
-  const [activeServer, setActiveServer] = useAtom(activeServerAtom)
+  const activeServer = useAtomValue(activeServerAtom)
+  const setActiveServer = useSetActiveServer()
   const navigation = useNavigation()
 
   const setActive = useCallback(() => {
-    if (activeServer?.id === server.id) {
-      return
-    }
     setActiveServer(server.id)
-  }, [activeServer?.id, server.id, setActiveServer])
+  }, [server.id, setActiveServer])
 
   return (
     <SettingsItem

app/state/music.ts

@@ -43,10 +43,13 @@ export const useUpdateArtists = () => {
     setUpdating(true)
 
     const client = new SubsonicApiClient(server)
-    const response = await client.getArtists()
 
-    setArtists(response.data.artists.map(mapArtistID3toArtist))
-    setUpdating(false)
+    try {
+      const response = await client.getArtists()
+      setArtists(response.data.artists.map(mapArtistID3toArtist))
+    } finally {
+      setUpdating(false)
+    }
   }
 }
 
@@ -83,17 +86,19 @@ export const useUpdateHomeLists = () => {
 
     const client = new SubsonicApiClient(server)
 
-    const promises: Promise<any>[] = []
-    for (const type of types) {
-      promises.push(
-        client.getAlbumList2({ type: type as GetAlbumList2Type, size: 20 }).then(response => {
-          updateHomeList({ type, albums: response.data.albums.map(mapAlbumID3toAlbumListItem) })
-        }),
-      )
+    try {
+      const promises: Promise<any>[] = []
+      for (const type of types) {
+        promises.push(
+          client.getAlbumList2({ type: type as GetAlbumList2Type, size: 20 }).then(response => {
+            updateHomeList({ type, albums: response.data.albums.map(mapAlbumID3toAlbumListItem) })
+          }),
+        )
+      }
+      await Promise.all(promises)
+    } finally {
+      setUpdating(false)
     }
-    await Promise.all(promises)
-
-    setUpdating(false)
   }
 }
 
@@ -120,14 +125,17 @@ export const useUpdateSearchResults = () => {
     setUpdating(true)
 
     const client = new SubsonicApiClient(server)
-    const response = await client.search3({ query })
 
-    updateList({
-      artists: response.data.artists.map(mapArtistID3toArtist),
-      albums: response.data.albums.map(mapAlbumID3toAlbumListItem),
-      songs: response.data.songs.map(a => mapChildToSong(a, client)),
-    })
-    setUpdating(false)
+    try {
+      const response = await client.search3({ query })
+      updateList({
+        artists: response.data.artists.map(mapArtistID3toArtist),
+        albums: response.data.albums.map(mapAlbumID3toAlbumListItem),
+        songs: response.data.songs.map(a => mapChildToSong(a, client)),
+      })
+    } finally {
+      setUpdating(false)
+    }
   }
 }
 
@@ -150,10 +158,13 @@ export const useUpdatePlaylists = () => {
     setUpdating(true)
 
     const client = new SubsonicApiClient(server)
-    const response = await client.getPlaylists()
 
-    updateList(response.data.playlists.map(mapPlaylistListItem))
-    setUpdating(false)
+    try {
+      const response = await client.getPlaylists()
+      updateList(response.data.playlists.map(mapPlaylistListItem))
+    } finally {
+      setUpdating(false)
+    }
   }
 }
 
@@ -165,8 +176,13 @@ export const playlistAtomFamily = atomFamily((id: string) =>
     }
 
     const client = new SubsonicApiClient(server)
-    const response = await client.getPlaylist({ id })
-    return mapPlaylistWithSongs(response.data.playlist, client)
+
+    try {
+      const response = await client.getPlaylist({ id })
+      return mapPlaylistWithSongs(response.data.playlist, client)
+    } catch {
+      return undefined
+    }
   }),
 )
 
@@ -189,10 +205,13 @@ export const useUpdateAlbumList = () => {
     setUpdating(true)
 
     const client = new SubsonicApiClient(server)
-    const response = await client.getAlbumList2({ type: 'alphabeticalByArtist', size: 500 })
 
-    updateList(response.data.albums.map(mapAlbumID3toAlbumListItem))
-    setUpdating(false)
+    try {
+      const response = await client.getAlbumList2({ type: 'alphabeticalByArtist', size: 500 })
+      updateList(response.data.albums.map(mapAlbumID3toAlbumListItem))
+    } finally {
+      setUpdating(false)
+    }
   }
 }
 
@@ -204,8 +223,13 @@ export const albumAtomFamily = atomFamily((id: string) =>
     }
 
     const client = new SubsonicApiClient(server)
-    const response = await client.getAlbum({ id })
-    return mapAlbumID3WithSongstoAlbunWithSongs(response.data.album, response.data.songs, client)
+
+    try {
+      const response = await client.getAlbum({ id })
+      return mapAlbumID3WithSongstoAlbunWithSongs(response.data.album, response.data.songs, client)
+    } catch {
+      return undefined
+    }
   }),
 )
 
@@ -217,13 +241,17 @@ export const artistInfoAtomFamily = atomFamily((id: string) =>
     }
 
     const client = new SubsonicApiClient(server)
-    const [artistResponse, artistInfoResponse] = await Promise.all([
-      client.getArtist({ id }),
-      client.getArtistInfo2({ id }),
-    ])
-    const topSongsResponse = await client.getTopSongs({ artist: artistResponse.data.artist.name, count: 50 })
 
-    return mapArtistInfo(artistResponse.data, artistInfoResponse.data.artistInfo, topSongsResponse.data.songs, client)
+    try {
+      const [artistResponse, artistInfoResponse] = await Promise.all([
+        client.getArtist({ id }),
+        client.getArtistInfo2({ id }),
+      ])
+      const topSongsResponse = await client.getTopSongs({ artist: artistResponse.data.artist.name, count: 50 })
+      return mapArtistInfo(artistResponse.data, artistInfoResponse.data.artistInfo, topSongsResponse.data.songs, client)
+    } catch {
+      return undefined
+    }
   }),
 )
 

app/state/server.ts

@@ -0,0 +1,54 @@
+import { useAtom } from 'jotai'
+import { useAtomValue, useUpdateAtom } from 'jotai/utils'
+import { useEffect } from 'react'
+import { albumListAtom, artistsAtom, homeListsAtom, playlistsAtom, searchResultsAtom } from './music'
+import { activeServerAtom } from './settings'
+import { useReset } from './trackplayer'
+
+export const useSetActiveServer = () => {
+  const [activeServer, setActiveServer] = useAtom(activeServerAtom)
+  const setArtists = useUpdateAtom(artistsAtom)
+  const setHomeLists = useUpdateAtom(homeListsAtom)
+  const setSearchResults = useUpdateAtom(searchResultsAtom)
+  const setPlaylists = useUpdateAtom(playlistsAtom)
+  const setAlbumLists = useUpdateAtom(albumListAtom)
+  const resetPlayer = useReset()
+
+  return async (id: string) => {
+    if (id === activeServer?.id) {
+      return
+    }
+
+    await resetPlayer()
+
+    setArtists([])
+    setHomeLists({})
+    setSearchResults({ artists: [], albums: [], songs: [] })
+    setPlaylists([])
+    setAlbumLists([])
+
+    setActiveServer(id)
+  }
+}
+
+export const useActiveListRefresh = (list: unknown[], update: () => void) => {
+  const activeServer = useAtomValue(activeServerAtom)
+
+  useEffect(() => {
+    if (list.length === 0) {
+      update()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeServer])
+}
+
+export const useActiveServerRefresh = (update: () => void) => {
+  const activeServer = useAtomValue(activeServerAtom)
+
+  useEffect(() => {
+    if (activeServer) {
+      update()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeServer])
+}

app/state/settings.ts

@@ -1,8 +1,6 @@
 import { atom } from 'jotai'
 import { AppSettings, Server } from '@app/models/settings'
 import atomWithAsyncStorage from '@app/storage/atomWithAsyncStorage'
-import { useEffect } from 'react'
-import { useAtomValue } from 'jotai/utils'
 import equal from 'fast-deep-equal'
 
 export const appSettingsAtom = atomWithAsyncStorage<AppSettings>('@appSettings', {
@@ -45,15 +43,4 @@ export const serversAtom = atom<Server[], Server[]>(
   },
 )
 
-export const useActiveServerRefresh = (update: () => any) => {
-  const activeServer = useAtomValue(activeServerAtom)
-
-  useEffect(() => {
-    if (activeServer) {
-      update()
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [activeServer])
-}
-
 export const homeListTypesAtom = atom(get => get(appSettingsAtom).home.lists)