store client in state, populate with active server

app/hooks/music.ts

@@ -31,36 +31,33 @@ const selectors = {
 }
 
 export const useArtistInfo = (id: string) => {
-  const server = useStore(selectSettings.activeServer)
   const artistInfo = useStore(useCallback((state: Store) => state.artistInfo[id], [id]))
   const fetchArtistInfo = useStore(selectors.fetchArtistInfo)
 
-  if (server && !artistInfo) {
-    fetchArtistInfo(server, id)
+  if (!artistInfo) {
+    fetchArtistInfo(id)
   }
 
   return artistInfo
 }
 
 export const useAlbumWithSongs = (id: string) => {
-  const server = useStore(selectSettings.activeServer)
   const album = useStore(useCallback((state: Store) => state.albums[id], [id]))
   const fetchAlbum = useStore(selectors.fetchAlbum)
 
-  if (server && !album) {
-    fetchAlbum(server, id)
+  if (!album) {
+    fetchAlbum(id)
   }
 
   return album
 }
 
 export const usePlaylistWithSongs = (id: string) => {
-  const server = useStore(selectSettings.activeServer)
   const playlist = useStore(useCallback((state: Store) => state.playlists[id], [id]))
   const fetchPlaylist = useStore(selectors.fetchPlaylist)
 
-  if (server && !playlist) {
-    fetchPlaylist(server, id)
+  if (!playlist) {
+    fetchPlaylist(id)
   }
 
   return playlist

app/state/music.ts

@@ -10,9 +10,7 @@ import {
   PlaylistWithSongs,
   SearchResults,
 } from '@app/models/music'
-import { Server } from '@app/models/settings'
 import { Store } from '@app/state/store'
-import { SubsonicApiClient } from '@app/subsonic/api'
 import produce from 'immer'
 import { atom } from 'jotai'
 import { GetState, SetState } from 'zustand'
@@ -25,12 +23,12 @@ export type MusicSlice = {
   albumsCache: string[]
   playlists: { [id: string]: PlaylistWithSongs | undefined }
   playlistsCache: string[]
-  fetchArtistInfo: (server: Server, id: string) => Promise<ArtistInfo | undefined>
-  fetchAlbum: (server: Server, id: string) => Promise<AlbumWithSongs | undefined>
-  fetchPlaylist: (server: Server, id: string) => Promise<PlaylistWithSongs | undefined>
+  fetchArtistInfo: (id: string) => Promise<ArtistInfo | undefined>
+  fetchAlbum: (id: string) => Promise<AlbumWithSongs | undefined>
+  fetchPlaylist: (id: string) => Promise<PlaylistWithSongs | undefined>
 }
 
-export const createMusicSlice = (set: SetState<Store>, _get: GetState<Store>): MusicSlice => ({
+export const createMusicSlice = (set: SetState<Store>, get: GetState<Store>): MusicSlice => ({
   cacheSize: 100,
   artistInfo: {},
   artistInfoCache: [],
@@ -38,8 +36,11 @@ export const createMusicSlice = (set: SetState<Store>, _get: GetState<Store>): M
   albumsCache: [],
   playlists: {},
   playlistsCache: [],
-  fetchArtistInfo: async (server, id) => {
-    const client = new SubsonicApiClient(server)
+  fetchArtistInfo: async id => {
+    const client = get().client
+    if (!client) {
+      return undefined
+    }
 
     try {
       const [artistResponse, artistInfoResponse] = await Promise.all([
@@ -68,8 +69,11 @@ export const createMusicSlice = (set: SetState<Store>, _get: GetState<Store>): M
       return undefined
     }
   },
-  fetchAlbum: async (server, id) => {
-    const client = new SubsonicApiClient(server)
+  fetchAlbum: async id => {
+    const client = get().client
+    if (!client) {
+      return undefined
+    }
 
     try {
       const response = await client.getAlbum({ id })
@@ -89,8 +93,11 @@ export const createMusicSlice = (set: SetState<Store>, _get: GetState<Store>): M
       return undefined
     }
   },
-  fetchPlaylist: async (server, id) => {
-    const client = new SubsonicApiClient(server)
+  fetchPlaylist: async id => {
+    const client = get().client
+    if (!client) {
+      return undefined
+    }
 
     try {
       const response = await client.getPlaylist({ id })

app/state/settings.ts

@@ -1,35 +1,55 @@
 import { AppSettings, Server } from '@app/models/settings'
 import { Store } from '@app/state/store'
+import { SubsonicApiClient } from '@app/subsonic/api'
 import produce from 'immer'
 import { GetState, SetState } from 'zustand'
 
 export type SettingsSlice = {
   settings: AppSettings
+  client?: SubsonicApiClient
+  createClient: () => void
   setActiveServer: (id?: string) => void
   setServers: (servers: Server[]) => void
 }
 
-export const createSettingsSlice = (set: SetState<Store>, _get: GetState<Store>): SettingsSlice => ({
+export const createSettingsSlice = (set: SetState<Store>, get: GetState<Store>): SettingsSlice => ({
   settings: {
     servers: [],
     home: {
       lists: ['recent', 'random', 'frequent', 'starred'],
     },
   },
-  setActiveServer: id =>
+  createClient: () => {
+    const server = get().settings.servers.find(s => s.id === get().settings.activeServer)
+    if (!server) {
+      return
+    }
+
+    set(
+      produce<Store>(state => {
+        state.client = new SubsonicApiClient(server)
+      }),
+    )
+  },
+  setActiveServer: id => {
+    const servers = get().settings.servers
+    const currentActiveServerId = get().settings.activeServer
+
+    if (!servers.find(s => s.id === id)) {
+      return
+    }
+    if (currentActiveServerId === id) {
+      return
+    }
+
     set(
       produce<Store>(state => {
-        if (!state.settings.servers.find(s => s.id === id)) {
-          console.log('could not find')
-          return
-        }
-        if (state.settings.activeServer === id) {
-          console.log('already active')
-          return
-        }
         state.settings.activeServer = id
       }),
-    ),
+    )
+
+    get().createClient()
+  },
   setServers: servers =>
     set(
       produce<Store>(state => {

app/state/store.ts

@@ -34,9 +34,11 @@ export const useStore = create<Store>(
       name: '@appStore',
       getStorage: () => storage,
       whitelist: ['settings'],
-      // onRehydrateStorage: state => {
-      //   return (state, error) => {}
-      // },
+      onRehydrateStorage: _preState => {
+        return (postState, _error) => {
+          postState?.createClient()
+        }
+      },
     },
   ),
 )