big ol' impl of zustand for settings/family states

still need to move track player state over for non-react access to that

app/state/music.ts

@@ -1,63 +1,125 @@
 import {
-  Album,
   AlbumListItem,
   AlbumWithSongs,
   Artist,
   ArtistInfo,
+  mapAlbumID3WithSongstoAlbunWithSongs,
+  mapArtistInfo,
+  mapPlaylistWithSongs,
   PlaylistListItem,
   PlaylistWithSongs,
   SearchResults,
-  Song,
 } from '@app/models/music'
-import { activeServerAtom, homeListTypesAtom } from '@app/state/settings'
+import { Server } from '@app/models/settings'
+import { Store } from '@app/state/store'
 import { SubsonicApiClient } from '@app/subsonic/api'
-import {
-  AlbumID3Element,
-  ArtistID3Element,
-  ArtistInfo2Element,
-  ChildElement,
-  PlaylistElement,
-  PlaylistWithSongsElement,
-} from '@app/subsonic/elements'
-import { GetAlbumList2Type, GetCoverArtParams } from '@app/subsonic/params'
-import { GetArtistResponse } from '@app/subsonic/responses'
-import { atom, useAtom } from 'jotai'
-import { atomFamily, useAtomValue, useUpdateAtom } from 'jotai/utils'
+import produce from 'immer'
+import { atom } from 'jotai'
+import { GetState, SetState } from 'zustand'
 
-export const artistsAtom = atom<Artist[]>([])
-export const artistsUpdatingAtom = atom(false)
-
-export const useUpdateArtists = () => {
-  const server = useAtomValue(activeServerAtom)
-  const [updating, setUpdating] = useAtom(artistsUpdatingAtom)
-  const setArtists = useUpdateAtom(artistsAtom)
-
-  if (!server) {
-    return () => Promise.resolve()
-  }
-
-  return async () => {
-    if (updating) {
-      return
-    }
-    setUpdating(true)
+export type MusicSlice = {
+  cacheSize: number
+  artistInfo: { [id: string]: ArtistInfo | undefined }
+  artistInfoCache: string[]
+  albums: { [id: string]: AlbumWithSongs | undefined }
+  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>
+}
 
+export const createMusicSlice = (set: SetState<Store>, _get: GetState<Store>): MusicSlice => ({
+  cacheSize: 100,
+  artistInfo: {},
+  artistInfoCache: [],
+  albums: {},
+  albumsCache: [],
+  playlists: {},
+  playlistsCache: [],
+  fetchArtistInfo: async (server, id) => {
     const client = new SubsonicApiClient(server)
 
     try {
-      const response = await client.getArtists()
-      setArtists(response.data.artists.map(mapArtistID3toArtist))
-    } finally {
-      setUpdating(false)
+      const [artistResponse, artistInfoResponse] = await Promise.all([
+        client.getArtist({ id }),
+        client.getArtistInfo2({ id }),
+      ])
+      const topSongsResponse = await client.getTopSongs({ artist: artistResponse.data.artist.name, count: 50 })
+      const artistInfo = mapArtistInfo(
+        artistResponse.data,
+        artistInfoResponse.data.artistInfo,
+        topSongsResponse.data.songs,
+        client,
+      )
+
+      set(
+        produce<MusicSlice>(state => {
+          if (state.artistInfoCache.length >= state.cacheSize) {
+            delete state.albums[state.artistInfoCache.shift() as string]
+          }
+          state.artistInfo[id] = artistInfo
+          state.artistInfoCache.push(id)
+        }),
+      )
+      return artistInfo
+    } catch {
+      return undefined
     }
-  }
-}
+  },
+  fetchAlbum: async (server, id) => {
+    const client = new SubsonicApiClient(server)
+
+    try {
+      const response = await client.getAlbum({ id })
+      const album = mapAlbumID3WithSongstoAlbunWithSongs(response.data.album, response.data.songs, client)
+
+      set(
+        produce<MusicSlice>(state => {
+          if (state.albumsCache.length >= state.cacheSize) {
+            delete state.albums[state.albumsCache.shift() as string]
+          }
+          state.albums[id] = album
+          state.albumsCache.push(id)
+        }),
+      )
+      return album
+    } catch {
+      return undefined
+    }
+  },
+  fetchPlaylist: async (server, id) => {
+    const client = new SubsonicApiClient(server)
+
+    try {
+      const response = await client.getPlaylist({ id })
+      const playlist = mapPlaylistWithSongs(response.data.playlist, client)
+
+      set(
+        produce<MusicSlice>(state => {
+          if (state.playlistsCache.length >= state.cacheSize) {
+            delete state.playlists[state.playlistsCache.shift() as string]
+          }
+          state.playlists[id] = playlist
+          state.playlistsCache.push(id)
+        }),
+      )
+      return playlist
+    } catch {
+      return undefined
+    }
+  },
+})
+
+export const artistsAtom = atom<Artist[]>([])
+export const artistsUpdatingAtom = atom(false)
 
 export type HomeLists = { [key: string]: AlbumListItem[] }
 
 export const homeListsUpdatingAtom = atom(false)
 export const homeListsAtom = atom<HomeLists>({})
-const homeListsWriteAtom = atom<HomeLists, { type: string; albums: AlbumListItem[] }>(
+export const homeListsWriteAtom = atom<HomeLists, { type: string; albums: AlbumListItem[] }>(
   get => get(homeListsAtom),
   (get, set, { type, albums }) => {
     const lists = get(homeListsAtom)
@@ -68,40 +130,6 @@ const homeListsWriteAtom = atom<HomeLists, { type: string; albums: AlbumListItem
   },
 )
 
-export const useUpdateHomeLists = () => {
-  const server = useAtomValue(activeServerAtom)
-  const types = useAtomValue(homeListTypesAtom)
-  const updateHomeList = useUpdateAtom(homeListsWriteAtom)
-  const [updating, setUpdating] = useAtom(homeListsUpdatingAtom)
-
-  if (!server) {
-    return async () => {}
-  }
-
-  return async () => {
-    if (updating) {
-      return
-    }
-    setUpdating(true)
-
-    const client = new SubsonicApiClient(server)
-
-    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)
-    }
-  }
-}
-
 export const searchResultsUpdatingAtom = atom(false)
 export const searchResultsAtom = atom<SearchResults>({
   artists: [],
@@ -109,260 +137,8 @@ export const searchResultsAtom = atom<SearchResults>({
   songs: [],
 })
 
-export const useUpdateSearchResults = () => {
-  const server = useAtomValue(activeServerAtom)
-  const updateList = useUpdateAtom(searchResultsAtom)
-  const [updating, setUpdating] = useAtom(searchResultsUpdatingAtom)
-
-  if (!server) {
-    return async () => {}
-  }
-
-  return async (query: string) => {
-    if (updating || query.length < 2) {
-      return
-    }
-    setUpdating(true)
-
-    const client = new SubsonicApiClient(server)
-
-    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)
-    }
-  }
-}
-
 export const playlistsUpdatingAtom = atom(false)
 export const playlistsAtom = atom<PlaylistListItem[]>([])
 
-export const useUpdatePlaylists = () => {
-  const server = useAtomValue(activeServerAtom)
-  const updateList = useUpdateAtom(playlistsAtom)
-  const [updating, setUpdating] = useAtom(playlistsUpdatingAtom)
-
-  if (!server) {
-    return async () => {}
-  }
-
-  return async () => {
-    if (updating) {
-      return
-    }
-    setUpdating(true)
-
-    const client = new SubsonicApiClient(server)
-
-    try {
-      const response = await client.getPlaylists()
-      updateList(response.data.playlists.map(mapPlaylistListItem))
-    } finally {
-      setUpdating(false)
-    }
-  }
-}
-
-export const playlistAtomFamily = atomFamily((id: string) =>
-  atom<PlaylistWithSongs | undefined>(async get => {
-    const server = get(activeServerAtom)
-    if (!server) {
-      return undefined
-    }
-
-    const client = new SubsonicApiClient(server)
-
-    try {
-      const response = await client.getPlaylist({ id })
-      return mapPlaylistWithSongs(response.data.playlist, client)
-    } catch {
-      return undefined
-    }
-  }),
-)
-
 export const albumListUpdatingAtom = atom(false)
 export const albumListAtom = atom<AlbumListItem[]>([])
-
-export const useUpdateAlbumList = () => {
-  const server = useAtomValue(activeServerAtom)
-  const updateList = useUpdateAtom(albumListAtom)
-  const [updating, setUpdating] = useAtom(albumListUpdatingAtom)
-
-  if (!server) {
-    return async () => {}
-  }
-
-  return async () => {
-    if (updating) {
-      return
-    }
-    setUpdating(true)
-
-    const client = new SubsonicApiClient(server)
-
-    try {
-      const response = await client.getAlbumList2({ type: 'alphabeticalByArtist', size: 500 })
-      updateList(response.data.albums.map(mapAlbumID3toAlbumListItem))
-    } finally {
-      setUpdating(false)
-    }
-  }
-}
-
-export const albumAtomFamily = atomFamily((id: string) =>
-  atom<AlbumWithSongs | undefined>(async get => {
-    const server = get(activeServerAtom)
-    if (!server) {
-      return undefined
-    }
-
-    const client = new SubsonicApiClient(server)
-
-    try {
-      const response = await client.getAlbum({ id })
-      return mapAlbumID3WithSongstoAlbunWithSongs(response.data.album, response.data.songs, client)
-    } catch {
-      return undefined
-    }
-  }),
-)
-
-export const artistInfoAtomFamily = atomFamily((id: string) =>
-  atom<ArtistInfo | undefined>(async get => {
-    const server = get(activeServerAtom)
-    if (!server) {
-      return undefined
-    }
-
-    const client = new SubsonicApiClient(server)
-
-    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
-    }
-  }),
-)
-
-export const useCoverArtUri = () => {
-  const server = useAtomValue(activeServerAtom)
-
-  if (!server) {
-    return () => undefined
-  }
-
-  const client = new SubsonicApiClient(server)
-
-  return (coverArt?: string, size: 'thumbnail' | 'original' = 'thumbnail') => {
-    const params: GetCoverArtParams = { id: coverArt || '-1' }
-    if (size === 'thumbnail') {
-      params.size = '256'
-    }
-
-    return client.getCoverArtUri(params)
-  }
-}
-
-function mapArtistID3toArtist(artist: ArtistID3Element): Artist {
-  return {
-    itemType: 'artist',
-    id: artist.id,
-    name: artist.name,
-    starred: artist.starred,
-    coverArt: artist.coverArt,
-  }
-}
-
-function mapArtistInfo(
-  artistResponse: GetArtistResponse,
-  info: ArtistInfo2Element,
-  topSongs: ChildElement[],
-  client: SubsonicApiClient,
-): ArtistInfo {
-  const { artist, albums } = artistResponse
-
-  const mappedAlbums = albums.map(mapAlbumID3toAlbum)
-
-  return {
-    ...mapArtistID3toArtist(artist),
-    albums: mappedAlbums,
-    smallImageUrl: info.smallImageUrl,
-    mediumImageUrl: info.mediumImageUrl,
-    largeImageUrl: info.largeImageUrl,
-    topSongs: topSongs.map(s => mapChildToSong(s, client)).slice(0, 5),
-  }
-}
-
-function mapAlbumID3toAlbumListItem(album: AlbumID3Element): AlbumListItem {
-  return {
-    itemType: 'album',
-    id: album.id,
-    name: album.name,
-    artist: album.artist,
-    starred: album.starred,
-    coverArt: album.coverArt,
-  }
-}
-
-function mapAlbumID3toAlbum(album: AlbumID3Element): Album {
-  return {
-    ...mapAlbumID3toAlbumListItem(album),
-    coverArt: album.coverArt,
-    year: album.year,
-  }
-}
-
-function mapChildToSong(child: ChildElement, client: SubsonicApiClient): Song {
-  return {
-    itemType: 'song',
-    id: child.id,
-    album: child.album,
-    artist: child.artist,
-    title: child.title,
-    track: child.track,
-    duration: child.duration,
-    starred: child.starred,
-    coverArt: child.coverArt,
-    streamUri: client.streamUri({ id: child.id }),
-  }
-}
-
-function mapAlbumID3WithSongstoAlbunWithSongs(
-  album: AlbumID3Element,
-  songs: ChildElement[],
-  client: SubsonicApiClient,
-): AlbumWithSongs {
-  return {
-    ...mapAlbumID3toAlbum(album),
-    songs: songs.map(s => mapChildToSong(s, client)),
-  }
-}
-
-function mapPlaylistListItem(playlist: PlaylistElement): PlaylistListItem {
-  return {
-    itemType: 'playlist',
-    id: playlist.id,
-    name: playlist.name,
-    comment: playlist.comment,
-    coverArt: playlist.coverArt,
-  }
-}
-
-function mapPlaylistWithSongs(playlist: PlaylistWithSongsElement, client: SubsonicApiClient): PlaylistWithSongs {
-  return {
-    ...mapPlaylistListItem(playlist),
-    songs: playlist.songs.map(s => mapChildToSong(s, client)),
-    coverArt: playlist.coverArt,
-  }
-}

app/state/server.ts

@@ -1,54 +0,0 @@
-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,46 +1,47 @@
-import { atom } from 'jotai'
 import { AppSettings, Server } from '@app/models/settings'
-import atomWithAsyncStorage from '@app/storage/atomWithAsyncStorage'
-import equal from 'fast-deep-equal'
+import { Store } from '@app/state/store'
+import produce from 'immer'
+import { GetState, SetState } from 'zustand'
 
-export const appSettingsAtom = atomWithAsyncStorage<AppSettings>('@appSettings', {
-  servers: [],
-  home: {
-    lists: ['recent', 'random', 'frequent', 'starred'],
+export type SettingsSlice = {
+  settings: AppSettings
+  setActiveServer: (id?: string) => void
+  setServers: (servers: Server[]) => void
+}
+
+export const createSettingsSlice = (set: SetState<Store>, _get: GetState<Store>): SettingsSlice => ({
+  settings: {
+    servers: [],
+    home: {
+      lists: ['recent', 'random', 'frequent', 'starred'],
+    },
   },
+  setActiveServer: id =>
+    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
+      }),
+    ),
+  setServers: servers =>
+    set(
+      produce<Store>(state => {
+        state.settings.servers = servers
+      }),
+    ),
 })
 
-export const activeServerAtom = atom<Server | undefined, string>(
-  get => {
-    const appSettings = get(appSettingsAtom)
-    return appSettings.servers.find(x => x.id === appSettings.activeServer)
-  },
-  (get, set, update) => {
-    const appSettings = get(appSettingsAtom)
-    if (!appSettings.servers.find(s => s.id === update)) {
-      return
-    }
-    if (appSettings.activeServer === update) {
-      return
-    }
-    set(appSettingsAtom, {
-      ...appSettings,
-      activeServer: update,
-    })
-  },
-)
-
-export const serversAtom = atom<Server[], Server[]>(
-  get => get(appSettingsAtom).servers,
-  (get, set, update) => {
-    const settings = get(appSettingsAtom)
-    if (!equal(settings.servers, update)) {
-      set(appSettingsAtom, {
-        ...settings,
-        servers: update,
-      })
-    }
-  },
-)
-
-export const homeListTypesAtom = atom(get => get(appSettingsAtom).home.lists)
+export const selectSettings = {
+  activeServer: (state: Store) => state.settings.servers.find(s => s.id === state.settings.activeServer),
+  setActiveServer: (state: Store) => state.setActiveServer,
+  servers: (state: Store) => state.settings.servers,
+  setServers: (state: Store) => state.setServers,
+  homeLists: (state: Store) => state.settings.home.lists,
+}

app/state/store.ts

@@ -0,0 +1,42 @@
+import { createMusicSlice, MusicSlice } from '@app/state/music'
+import { createSettingsSlice, SettingsSlice } from '@app/state/settings'
+import AsyncStorage from '@react-native-async-storage/async-storage'
+import create from 'zustand'
+import { persist, StateStorage } from 'zustand/middleware'
+
+export type Store = SettingsSlice & MusicSlice
+
+const storage: StateStorage = {
+  getItem: async name => {
+    try {
+      return await AsyncStorage.getItem(name)
+    } catch (err) {
+      console.error(`getItem error (key: ${name})`, err)
+      return null
+    }
+  },
+  setItem: async (name, item) => {
+    try {
+      await AsyncStorage.setItem(name, item)
+    } catch (err) {
+      console.error(`setItem error (key: ${name})`, err)
+    }
+  },
+}
+
+export const useStore = create<Store>(
+  persist(
+    (set, get) => ({
+      ...createSettingsSlice(set, get),
+      ...createMusicSlice(set, get),
+    }),
+    {
+      name: '@appStore',
+      getStorage: () => storage,
+      whitelist: ['settings'],
+      // onRehydrateStorage: state => {
+      //   return (state, error) => {}
+      // },
+    },
+  ),
+)

app/state/trackplayer.ts

@@ -1,3 +1,4 @@
+import { useCoverArtUri } from '@app/hooks/music'
 import { Song } from '@app/models/music'
 import PromiseQueue from '@app/util/PromiseQueue'
 import equal from 'fast-deep-equal'
@@ -7,7 +8,6 @@ import { atomWithStore } from 'jotai/zustand'
 import { useCallback, useEffect } from 'react'
 import TrackPlayer, { State, Track } from 'react-native-track-player'
 import create from 'zustand'
-import { useCoverArtUri } from './music'
 
 type TrackExt = Track & {
   id: string