big ol' impl of zustand for settings/family states

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

app/components/CoverArt.tsx

@@ -1,6 +1,5 @@
-import { artistInfoAtomFamily, useCoverArtUri } from '@app/state/music'
+import { useArtistInfo, useCoverArtUri } from '@app/hooks/music'
 import colors from '@app/styles/colors'
-import { useAtomValue } from 'jotai/utils'
 import React, { useEffect, useState } from 'react'
 import { ActivityIndicator, StyleSheet, View, ViewStyle } from 'react-native'
 import FastImage, { ImageStyle } from 'react-native-fast-image'
@@ -32,9 +31,23 @@ type CoverArtImageProps = BaseImageProps & CoverArtProp
 
 type CoverArtProps = BaseProps & CoverArtProp & Partial<ArtistIdProp>
 
-const ArtistIdImageLoaded = React.memo<ArtistIdImageProps>(
+const ArtistImageFallback: React.FC<{
+  enableLoading: () => void
+}> = ({ enableLoading }) => {
+  useEffect(() => {
+    enableLoading()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+  return <></>
+}
+
+const ArtistImage = React.memo<ArtistIdImageProps>(
   ({ artistId, imageSize, style, imageStyle, resizeMode, enableLoading, disableLoading, fallbackError }) => {
-    const artistInfo = useAtomValue(artistInfoAtomFamily(artistId))
+    const artistInfo = useArtistInfo(artistId)
+
+    if (!artistInfo) {
+      return <ArtistImageFallback enableLoading={enableLoading} />
+    }
 
     const uri = imageSize === 'thumbnail' ? artistInfo?.smallImageUrl : artistInfo?.largeImageUrl
 
@@ -51,24 +64,6 @@ const ArtistIdImageLoaded = React.memo<ArtistIdImageProps>(
   },
 )
 
-const ArtistIdImageFallback: React.FC<{
-  enableLoading: () => void
-}> = ({ enableLoading }) => {
-  useEffect(() => {
-    enableLoading()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-  return <></>
-}
-
-const ArtistIdImage = React.memo<ArtistIdImageProps>(props => {
-  return (
-    <React.Suspense fallback={<ArtistIdImageFallback enableLoading={props.enableLoading} />}>
-      <ArtistIdImageLoaded {...props} />
-    </React.Suspense>
-  )
-})
-
 const CoverArtImage = React.memo<CoverArtImageProps>(
   ({ coverArt, imageSize, style, imageStyle, resizeMode, enableLoading, disableLoading, fallbackError }) => {
     const coverArtUri = useCoverArtUri()
@@ -108,7 +103,7 @@ const CoverArt: React.FC<CoverArtProps> = ({ coverArt, artistId, resizeMode, ima
   let ImageComponent
   if (artistId) {
     ImageComponent = (
-      <ArtistIdImage
+      <ArtistImage
         artistId={artistId}
         imageSize={imageSize}
         style={style}

app/components/ListPlayerControls.tsx

@@ -3,7 +3,7 @@ import { Song } from '@app/models/music'
 import { useSetQueue } from '@app/state/trackplayer'
 import colors from '@app/styles/colors'
 import React, { useState } from 'react'
-import { StyleSheet, View, ViewStyle } from 'react-native'
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
 import Icon from 'react-native-vector-icons/Ionicons'
 import IconMat from 'react-native-vector-icons/MaterialIcons'
 
@@ -11,7 +11,7 @@ const ListPlayerControls = React.memo<{
   songs: Song[]
   typeName: string
   queueName: string
-  style?: ViewStyle
+  style?: StyleProp<ViewStyle>
 }>(({ songs, typeName, queueName, style }) => {
   const [downloaded, setDownloaded] = useState(false)
   const setQueue = useSetQueue()

app/hooks/music.ts

@@ -0,0 +1,228 @@
+import {
+  mapAlbumID3toAlbumListItem,
+  mapArtistID3toArtist,
+  mapChildToSong,
+  mapPlaylistListItem,
+} from '@app/models/music'
+import {
+  albumListAtom,
+  albumListUpdatingAtom,
+  artistsAtom,
+  artistsUpdatingAtom,
+  homeListsUpdatingAtom,
+  homeListsWriteAtom,
+  playlistsAtom,
+  playlistsUpdatingAtom,
+  searchResultsAtom,
+  searchResultsUpdatingAtom,
+} from '@app/state/music'
+import { selectSettings } from '@app/state/settings'
+import { Store, useStore } from '@app/state/store'
+import { SubsonicApiClient } from '@app/subsonic/api'
+import { GetAlbumList2Type, GetCoverArtParams } from '@app/subsonic/params'
+import { useAtom } from 'jotai'
+import { useUpdateAtom } from 'jotai/utils'
+import { useCallback } from 'react'
+
+const selectors = {
+  fetchArtistInfo: (state: Store) => state.fetchArtistInfo,
+  fetchAlbum: (state: Store) => state.fetchAlbum,
+  fetchPlaylist: (state: Store) => state.fetchPlaylist,
+}
+
+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)
+  }
+
+  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)
+  }
+
+  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)
+  }
+
+  return playlist
+}
+
+export const useUpdateArtists = () => {
+  const server = useStore(selectSettings.activeServer)
+  const [updating, setUpdating] = useAtom(artistsUpdatingAtom)
+  const setArtists = useUpdateAtom(artistsAtom)
+
+  if (!server) {
+    return () => Promise.resolve()
+  }
+
+  return async () => {
+    if (updating) {
+      return
+    }
+    setUpdating(true)
+
+    const client = new SubsonicApiClient(server)
+
+    try {
+      const response = await client.getArtists()
+      setArtists(response.data.artists.map(mapArtistID3toArtist))
+    } finally {
+      setUpdating(false)
+    }
+  }
+}
+
+export const useUpdateHomeLists = () => {
+  const server = useStore(selectSettings.activeServer)
+  const types = useStore(selectSettings.homeLists)
+  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 useUpdateSearchResults = () => {
+  const server = useStore(selectSettings.activeServer)
+  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 useUpdatePlaylists = () => {
+  const server = useStore(selectSettings.activeServer)
+  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 useUpdateAlbumList = () => {
+  const server = useStore(selectSettings.activeServer)
+  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 useCoverArtUri = () => {
+  const server = useStore(selectSettings.activeServer)
+
+  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)
+  }
+}

app/hooks/server.ts

@@ -1,12 +1,13 @@
-import { useAtom } from 'jotai'
+import { albumListAtom, artistsAtom, homeListsAtom, playlistsAtom, searchResultsAtom } from '@app/state/music'
-import { useAtomValue, useUpdateAtom } from 'jotai/utils'
+import { selectSettings } from '@app/state/settings'
+import { useStore } from '@app/state/store'
+import { useReset } from '@app/state/trackplayer'
+import { 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 = () => {
+export const useSwitchActiveServer = () => {
-  const [activeServer, setActiveServer] = useAtom(activeServerAtom)
+  const activeServer = useStore(selectSettings.activeServer)
+  const setActiveServer = useStore(selectSettings.setActiveServer)
   const setArtists = useUpdateAtom(artistsAtom)
   const setHomeLists = useUpdateAtom(homeListsAtom)
   const setSearchResults = useUpdateAtom(searchResultsAtom)
@@ -32,7 +33,7 @@ export const useSetActiveServer = () => {
 }
 
 export const useActiveListRefresh = (list: unknown[], update: () => void) => {
-  const activeServer = useAtomValue(activeServerAtom)
+  const activeServer = useStore(selectSettings.activeServer)
 
   useEffect(() => {
     if (list.length === 0) {
@@ -43,7 +44,7 @@ export const useActiveListRefresh = (list: unknown[], update: () => void) => {
 }
 
 export const useActiveServerRefresh = (update: () => void) => {
-  const activeServer = useAtomValue(activeServerAtom)
+  const activeServer = useStore(selectSettings.activeServer)
 
   useEffect(() => {
     if (activeServer) {

app/models/music.ts

@@ -1,3 +1,14 @@
+import { SubsonicApiClient } from '@app/subsonic/api'
+import {
+  AlbumID3Element,
+  ArtistID3Element,
+  ArtistInfo2Element,
+  ChildElement,
+  PlaylistElement,
+  PlaylistWithSongsElement,
+} from '@app/subsonic/elements'
+import { GetArtistResponse } from '@app/subsonic/responses'
+
 export interface Artist {
   itemType: 'artist'
   id: string
@@ -98,3 +109,96 @@ export type DownloadedPlaylist = {
   songs: string[]
   name: string
 }
+
+export function mapArtistID3toArtist(artist: ArtistID3Element): Artist {
+  return {
+    itemType: 'artist',
+    id: artist.id,
+    name: artist.name,
+    starred: artist.starred,
+    coverArt: artist.coverArt,
+  }
+}
+
+export 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),
+  }
+}
+
+export function mapAlbumID3toAlbumListItem(album: AlbumID3Element): AlbumListItem {
+  return {
+    itemType: 'album',
+    id: album.id,
+    name: album.name,
+    artist: album.artist,
+    starred: album.starred,
+    coverArt: album.coverArt,
+  }
+}
+
+export function mapAlbumID3toAlbum(album: AlbumID3Element): Album {
+  return {
+    ...mapAlbumID3toAlbumListItem(album),
+    coverArt: album.coverArt,
+    year: album.year,
+  }
+}
+
+export 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 }),
+  }
+}
+
+export function mapAlbumID3WithSongstoAlbunWithSongs(
+  album: AlbumID3Element,
+  songs: ChildElement[],
+  client: SubsonicApiClient,
+): AlbumWithSongs {
+  return {
+    ...mapAlbumID3toAlbum(album),
+    songs: songs.map(s => mapChildToSong(s, client)),
+  }
+}
+
+export function mapPlaylistListItem(playlist: PlaylistElement): PlaylistListItem {
+  return {
+    itemType: 'playlist',
+    id: playlist.id,
+    name: playlist.name,
+    comment: playlist.comment,
+    coverArt: playlist.coverArt,
+  }
+}
+
+export function mapPlaylistWithSongs(playlist: PlaylistWithSongsElement, client: SubsonicApiClient): PlaylistWithSongs {
+  return {
+    ...mapPlaylistListItem(playlist),
+    songs: playlist.songs.map(s => mapChildToSong(s, client)),
+    coverArt: playlist.coverArt,
+  }
+}

app/navigation/BottomTabNavigator.tsx

@@ -1,9 +1,8 @@
 import BottomTabBar from '@app/navigation/BottomTabBar'
 import LibraryTopTabNavigator from '@app/navigation/LibraryTopTabNavigator'
-import AlbumView from '@app/screens/AlbumView'
+import SongListView from '@app/screens/SongListView'
 import ArtistView from '@app/screens/ArtistView'
 import Home from '@app/screens/Home'
-import PlaylistView from '@app/screens/PlaylistView'
 import Search from '@app/screens/Search'
 import ServerView from '@app/screens/ServerView'
 import SettingsView from '@app/screens/Settings'
@@ -30,7 +29,7 @@ type AlbumScreenProps = {
 }
 
 const AlbumScreen: React.FC<AlbumScreenProps> = ({ route }) => (
-  <AlbumView id={route.params.id} title={route.params.title} />
+  <SongListView id={route.params.id} title={route.params.title} type="album" />
 )
 
 type ArtistScreenNavigationProp = NativeStackNavigationProp<TabStackParamList, 'artist'>
@@ -52,7 +51,7 @@ type PlaylistScreenProps = {
 }
 
 const PlaylistScreen: React.FC<PlaylistScreenProps> = ({ route }) => (
-  <PlaylistView id={route.params.id} title={route.params.title} />
+  <SongListView id={route.params.id} title={route.params.title} type="playlist" />
 )
 
 const styles = StyleSheet.create({

app/navigation/RootNavigator.tsx

@@ -1,5 +1,5 @@
 import BottomTabNavigator from '@app/navigation/BottomTabNavigator'
-import NowPlayingLayout from '@app/screens/NowPlayingLayout'
+import NowPlayingView from '@app/screens/NowPlayingView'
 import colors from '@app/styles/colors'
 import { DarkTheme, NavigationContainer } from '@react-navigation/native'
 import React from 'react'
@@ -32,7 +32,7 @@ const RootNavigator = () => (
       }}
       initialRouteName="main">
       <RootStack.Screen name="main" component={BottomTabNavigator} />
-      <RootStack.Screen name="now-playing" component={NowPlayingLayout} />
+      <RootStack.Screen name="now-playing" component={NowPlayingView} />
     </RootStack.Navigator>
   </NavigationContainer>
 )

app/screens/AlbumView.tsx

@@ -1,126 +0,0 @@
-import CoverArt from '@app/components/CoverArt'
-import GradientBackground from '@app/components/GradientBackground'
-import ImageGradientScrollView from '@app/components/ImageGradientScrollView'
-import ListPlayerControls from '@app/components/ListPlayerControls'
-import NothingHere from '@app/components/NothingHere'
-import ListItem from '@app/components/ListItem'
-import { albumAtomFamily, useCoverArtUri } from '@app/state/music'
-import { useSetQueue } from '@app/state/trackplayer'
-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 { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
-
-const AlbumDetails: React.FC<{
-  id: string
-}> = ({ id }) => {
-  const album = useAtomValue(albumAtomFamily(id))
-  const coverArtUri = useCoverArtUri()
-  const setQueue = useSetQueue()
-
-  if (!album) {
-    return <></>
-  }
-
-  const Songs = () => (
-    <>
-      <ListPlayerControls songs={album.songs} typeName="Album" queueName={album.name} />
-      <View style={styles.songs}>
-        {album.songs
-          .sort((a, b) => {
-            if (b.track && a.track) {
-              return a.track - b.track
-            } else {
-              return a.title.localeCompare(b.title)
-            }
-          })
-          .map((s, i) => (
-            <ListItem key={i} item={s} subtitle={s.artist} onPress={() => setQueue(album.songs, album.name, i)} />
-          ))}
-      </View>
-    </>
-  )
-
-  return (
-    <ImageGradientScrollView
-      imageUri={coverArtUri(album.coverArt)}
-      imageKey={`${album.name}${album.artist}`}
-      style={styles.container}>
-      <View style={styles.content}>
-        <CoverArt coverArt={album.coverArt} style={styles.cover} imageSize="original" />
-        <Text style={styles.title}>{album.name}</Text>
-        <Text style={styles.subtitle}>
-          {album.artist}
-          {album.year ? ` • ${album.year}` : ''}
-        </Text>
-        {album.songs.length > 0 ? <Songs /> : <NothingHere height={300} width={250} />}
-      </View>
-    </ImageGradientScrollView>
-  )
-}
-
-const AlbumViewFallback = () => (
-  <GradientBackground style={styles.fallback}>
-    <ActivityIndicator size="large" color={colors.accent} />
-  </GradientBackground>
-)
-
-const AlbumView: React.FC<{
-  id: string
-  title: string
-}> = ({ id, title }) => {
-  const navigation = useNavigation()
-
-  useEffect(() => {
-    navigation.setOptions({ title })
-  })
-
-  return (
-    <React.Suspense fallback={<AlbumViewFallback />}>
-      <AlbumDetails id={id} />
-    </React.Suspense>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  content: {
-    alignItems: 'center',
-    paddingTop: 10,
-    paddingHorizontal: 20,
-  },
-  title: {
-    fontSize: 24,
-    fontFamily: font.bold,
-    color: colors.text.primary,
-    marginTop: 12,
-    textAlign: 'center',
-  },
-  subtitle: {
-    fontFamily: font.regular,
-    color: colors.text.secondary,
-    fontSize: 14,
-    marginTop: 4,
-    marginBottom: 20,
-    textAlign: 'center',
-  },
-  cover: {
-    height: 220,
-    width: 220,
-  },
-  songs: {
-    marginTop: 26,
-    marginBottom: 30,
-    width: '100%',
-  },
-  fallback: {
-    alignItems: 'center',
-    paddingTop: 100,
-  },
-})
-
-export default React.memo(AlbumView)

app/screens/ArtistView.tsx

@@ -1,16 +1,15 @@
 import CoverArt from '@app/components/CoverArt'
 import GradientScrollView from '@app/components/GradientScrollView'
 import Header from '@app/components/Header'
-import PressableOpacity from '@app/components/PressableOpacity'
 import ListItem from '@app/components/ListItem'
-import { Album } from '@app/models/music'
+import PressableOpacity from '@app/components/PressableOpacity'
-import { artistInfoAtomFamily } from '@app/state/music'
+import { useArtistInfo } from '@app/hooks/music'
+import { Album, Song } from '@app/models/music'
 import { useSetQueue } from '@app/state/trackplayer'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import { useLayout } from '@react-native-community/hooks'
 import { useNavigation } from '@react-navigation/native'
-import { useAtomValue } from 'jotai/utils'
 import React, { useEffect } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 import FastImage from 'react-native-fast-image'
@@ -33,9 +32,30 @@ const AlbumItem = React.memo<{
   )
 })
 
-const ArtistDetails: React.FC<{ id: string }> = ({ id }) => {
+const TopSongs = React.memo<{
-  const artist = useAtomValue(artistInfoAtomFamily(id))
+  songs: Song[]
+  name: string
+}>(({ songs, name }) => {
   const setQueue = useSetQueue()
+
+  return (
+    <>
+      <Header>Top Songs</Header>
+      {songs.map((s, i) => (
+        <ListItem
+          key={i}
+          item={s}
+          showArt={true}
+          subtitle={s.album}
+          onPress={() => setQueue(songs, `Top Songs: ${name}`, i)}
+        />
+      ))}
+    </>
+  )
+})
+
+const ArtistDetails: React.FC<{ id: string }> = ({ id }) => {
+  const artist = useArtistInfo(id)
   const albumsLayout = useLayout()
   const coverLayout = useLayout()
 
@@ -45,21 +65,6 @@ const ArtistDetails: React.FC<{ id: string }> = ({ id }) => {
     return <></>
   }
 
-  const TopSongs = () => (
-    <>
-      <Header>Top Songs</Header>
-      {artist.topSongs.map((s, i) => (
-        <ListItem
-          key={i}
-          item={s}
-          showArt={true}
-          subtitle={s.album}
-          onPress={() => setQueue(artist.topSongs, `Top Songs: ${artist.name}`, i)}
-        />
-      ))}
-    </>
-  )
-
   return (
     <GradientScrollView
       onLayout={coverLayout.onLayout}
@@ -77,7 +82,7 @@ const ArtistDetails: React.FC<{ id: string }> = ({ id }) => {
         <Text style={styles.title}>{artist.name}</Text>
       </View>
       <View style={styles.container}>
-        {artist.topSongs.length > 0 ? <TopSongs /> : <></>}
+        {artist.topSongs.length > 0 ? <TopSongs songs={artist.topSongs} name={artist.name} /> : <></>}
         <Header>Albums</Header>
         <View style={styles.albums} onLayout={albumsLayout.onLayout}>
           {artist.albums.map(a => (
@@ -89,22 +94,18 @@ const ArtistDetails: React.FC<{ id: string }> = ({ id }) => {
   )
 }
 
-const ArtistView: React.FC<{
+const ArtistView = React.memo<{
   id: string
   title: string
-}> = ({ id, title }) => {
+}>(({ id, title }) => {
   const navigation = useNavigation()
 
   useEffect(() => {
     navigation.setOptions({ title })
   })
 
-  return (
+  return <ArtistDetails id={id} />
-    <React.Suspense fallback={<Text>Loading...</Text>}>
+})
-      <ArtistDetails id={id} />
-    </React.Suspense>
-  )
-}
 
 const artistCoverHeight = 280
 
@@ -164,4 +165,4 @@ const styles = StyleSheet.create({
   },
 })
 
-export default React.memo(ArtistView)
+export default ArtistView

app/screens/ArtistsList.tsx

@@ -1,36 +0,0 @@
-import React from 'react'
-import { FlatList, Text, View } from 'react-native'
-import { useAtomValue } from 'jotai/utils'
-import { Artist } from '@app/models/music'
-import { artistsAtom } from '@app/state/music'
-
-const ArtistItem: React.FC<{ item: Artist }> = ({ item }) => (
-  <View>
-    <Text>{item.id}</Text>
-    <Text
-      style={{
-        fontSize: 60,
-        paddingBottom: 400,
-      }}>
-      {item.name}
-    </Text>
-  </View>
-)
-
-const List = () => {
-  const artists = useAtomValue(artistsAtom)
-
-  const renderItem: React.FC<{ item: Artist }> = ({ item }) => <ArtistItem item={item} />
-
-  return <FlatList data={artists} renderItem={renderItem} keyExtractor={item => item.id} />
-}
-
-const ArtistsList = () => (
-  <View>
-    <React.Suspense fallback={<Text>Loading...</Text>}>
-      <List />
-    </React.Suspense>
-  </View>
-)
-
-export default ArtistsList

app/screens/Home.tsx

@@ -3,10 +3,12 @@ import GradientScrollView from '@app/components/GradientScrollView'
 import Header from '@app/components/Header'
 import NothingHere from '@app/components/NothingHere'
 import PressableOpacity from '@app/components/PressableOpacity'
+import { useUpdateHomeLists } from '@app/hooks/music'
+import { useActiveServerRefresh } from '@app/hooks/server'
 import { AlbumListItem } from '@app/models/music'
-import { homeListsAtom, homeListsUpdatingAtom, useUpdateHomeLists } from '@app/state/music'
+import { homeListsAtom, homeListsUpdatingAtom } from '@app/state/music'
-import { useActiveServerRefresh } from '@app/state/server'
+import { selectSettings } from '@app/state/settings'
-import { homeListTypesAtom } from '@app/state/settings'
+import { useStore } from '@app/state/store'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import { GetAlbumListType } from '@app/subsonic/params'
@@ -75,7 +77,7 @@ const Category = React.memo<{
 })
 
 const Home = () => {
-  const types = useAtomValue(homeListTypesAtom)
+  const types = useStore(selectSettings.homeLists)
   const lists = useAtomValue(homeListsAtom)
   const updating = useAtomValue(homeListsUpdatingAtom)
   const update = useUpdateHomeLists()

app/screens/LibraryAlbums.tsx

@@ -1,9 +1,10 @@
 import CoverArt from '@app/components/CoverArt'
 import GradientFlatList from '@app/components/GradientFlatList'
 import PressableOpacity from '@app/components/PressableOpacity'
+import { useUpdateAlbumList } from '@app/hooks/music'
+import { useActiveListRefresh } from '@app/hooks/server'
 import { Album } from '@app/models/music'
-import { albumListAtom, albumListUpdatingAtom, useUpdateAlbumList } from '@app/state/music'
+import { albumListAtom, albumListUpdatingAtom } from '@app/state/music'
-import { useActiveListRefresh } from '@app/state/server'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import { useNavigation } from '@react-navigation/native'
@@ -87,12 +88,6 @@ const AlbumsList = () => {
   )
 }
 
-const AlbumsTab = () => (
-  <React.Suspense fallback={<Text>Loading...</Text>}>
-    <AlbumsList />
-  </React.Suspense>
-)
-
 const styles = StyleSheet.create({
   listContent: {
     minHeight: '100%',
@@ -123,4 +118,4 @@ const styles = StyleSheet.create({
   },
 })
 
-export default React.memo(AlbumsTab)
+export default React.memo(AlbumsList)

app/screens/LibraryArtists.tsx

@@ -1,8 +1,9 @@
 import GradientFlatList from '@app/components/GradientFlatList'
 import ListItem from '@app/components/ListItem'
+import { useUpdateArtists } from '@app/hooks/music'
+import { useActiveListRefresh } from '@app/hooks/server'
 import { Artist } from '@app/models/music'
-import { artistsAtom, artistsUpdatingAtom, useUpdateArtists } from '@app/state/music'
+import { artistsAtom, artistsUpdatingAtom } from '@app/state/music'
-import { useActiveListRefresh } from '@app/state/server'
 import { useAtomValue } from 'jotai/utils'
 import React from 'react'
 import { StyleSheet } from 'react-native'

app/screens/LibraryPlaylists.tsx

@@ -1,8 +1,9 @@
 import GradientFlatList from '@app/components/GradientFlatList'
 import ListItem from '@app/components/ListItem'
+import { useUpdatePlaylists } from '@app/hooks/music'
+import { useActiveListRefresh } from '@app/hooks/server'
 import { PlaylistListItem } from '@app/models/music'
-import { playlistsAtom, playlistsUpdatingAtom, useUpdatePlaylists } from '@app/state/music'
+import { playlistsAtom, playlistsUpdatingAtom } from '@app/state/music'
-import { useActiveListRefresh } from '@app/state/server'
 import { useAtomValue } from 'jotai/utils'
 import React from 'react'
 import { StyleSheet } from 'react-native'

app/screens/NowPlayingView.tsx

@@ -303,7 +303,7 @@ type RootStackParamList = {
 }
 type NowPlayingProps = NativeStackScreenProps<RootStackParamList, 'now-playing'>
 
-const NowPlayingLayout: React.FC<NowPlayingProps> = ({ navigation }) => {
+const NowPlayingView: React.FC<NowPlayingProps> = ({ navigation }) => {
   const track = useAtomValue(currentTrackAtom)
 
   const back = useCallback(() => {
@@ -354,4 +354,4 @@ const styles = StyleSheet.create({
   },
 })
 
-export default NowPlayingLayout
+export default NowPlayingView

app/screens/PlaylistView.tsx

@@ -1,139 +0,0 @@
-import CoverArt from '@app/components/CoverArt'
-import GradientBackground from '@app/components/GradientBackground'
-import ImageGradientScrollView from '@app/components/ImageGradientScrollView'
-import ListPlayerControls from '@app/components/ListPlayerControls'
-import NothingHere from '@app/components/NothingHere'
-import ListItem from '@app/components/ListItem'
-import { playlistAtomFamily, useCoverArtUri } from '@app/state/music'
-import { useSetQueue } from '@app/state/trackplayer'
-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 { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
-
-const PlaylistDetails: React.FC<{
-  id: string
-}> = ({ id }) => {
-  const playlist = useAtomValue(playlistAtomFamily(id))
-  const setQueue = useSetQueue()
-  const coverArtUri = useCoverArtUri()
-
-  if (!playlist) {
-    return <></>
-  }
-
-  const Songs = () => (
-    <>
-      <ListPlayerControls
-        songs={playlist.songs}
-        typeName="Playlist"
-        queueName={playlist.name}
-        style={styles.controls}
-      />
-      <View style={styles.songs}>
-        {playlist.songs.map((s, i) => (
-          <ListItem
-            key={i}
-            item={s}
-            subtitle={s.artist}
-            showArt={true}
-            onPress={() => setQueue(playlist.songs, playlist.name, i)}
-          />
-        ))}
-      </View>
-    </>
-  )
-
-  return (
-    <ImageGradientScrollView
-      imageUri={coverArtUri(playlist.coverArt)}
-      imageKey={`${playlist.id}${playlist.name}`}
-      style={styles.container}>
-      <View style={styles.content}>
-        <CoverArt coverArt={playlist.coverArt} style={styles.cover} imageSize="original" />
-        <Text style={styles.title}>{playlist.name}</Text>
-        {playlist.comment ? <Text style={styles.subtitle}>{playlist.comment}</Text> : <></>}
-        {playlist.songs.length > 0 ? <Songs /> : <NothingHere height={350} width={250} />}
-      </View>
-    </ImageGradientScrollView>
-  )
-}
-
-const PlaylistViewFallback = () => (
-  <GradientBackground style={styles.fallback}>
-    <ActivityIndicator size="large" color={colors.accent} />
-  </GradientBackground>
-)
-
-const PlaylistView: React.FC<{
-  id: string
-  title: string
-}> = ({ id, title }) => {
-  const navigation = useNavigation()
-
-  useEffect(() => {
-    navigation.setOptions({ title })
-  })
-
-  return (
-    <React.Suspense fallback={<PlaylistViewFallback />}>
-      <PlaylistDetails id={id} />
-    </React.Suspense>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  content: {
-    alignItems: 'center',
-    paddingTop: 10,
-    paddingHorizontal: 10,
-  },
-  title: {
-    fontSize: 24,
-    fontFamily: font.bold,
-    color: colors.text.primary,
-    marginTop: 12,
-    textAlign: 'center',
-  },
-  subtitle: {
-    fontFamily: font.regular,
-    color: colors.text.secondary,
-    fontSize: 14,
-    marginTop: 4,
-    textAlign: 'center',
-  },
-  cover: {
-    height: 160,
-    width: 160,
-  },
-  songsContainer: {
-    width: '100%',
-    marginTop: 18,
-    alignItems: 'center',
-  },
-  controls: {
-    marginTop: 20,
-  },
-  songs: {
-    marginTop: 26,
-    marginBottom: 30,
-    width: '100%',
-  },
-  fallback: {
-    alignItems: 'center',
-    paddingTop: 100,
-  },
-  nothingContainer: {
-    height: 400,
-    backgroundColor: 'green',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-})
-
-export default React.memo(PlaylistView)

app/screens/Search.tsx

@@ -2,8 +2,9 @@ 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 { useUpdateSearchResults } from '@app/hooks/music'
 import { ListableItem, SearchResults, Song } from '@app/models/music'
-import { searchResultsAtom, searchResultsUpdatingAtom, useUpdateSearchResults } from '@app/state/music'
+import { searchResultsAtom, searchResultsUpdatingAtom } from '@app/state/music'
 import { useSetQueue } from '@app/state/trackplayer'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'

app/screens/ServerView.tsx

@@ -2,11 +2,11 @@ import Button from '@app/components/Button'
 import GradientScrollView from '@app/components/GradientScrollView'
 import SettingsItem from '@app/components/SettingsItem'
 import { Server } from '@app/models/settings'
-import { activeServerAtom, serversAtom } from '@app/state/settings'
+import { selectSettings } from '@app/state/settings'
+import { useStore } from '@app/state/store'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import { useNavigation } from '@react-navigation/native'
-import { useAtom } from 'jotai'
 import md5 from 'md5'
 import React, { useCallback, useState } from 'react'
 import { StyleSheet, Text, TextInput, View } from 'react-native'
@@ -23,8 +23,10 @@ const ServerView: React.FC<{
   id?: string
 }> = ({ id }) => {
   const navigation = useNavigation()
-  const [activeServer, setActiveServer] = useAtom(activeServerAtom)
+  const activeServer = useStore(selectSettings.activeServer)
-  const [servers, setServers] = useAtom(serversAtom)
+  const setActiveServer = useStore(selectSettings.setActiveServer)
+  const servers = useStore(selectSettings.servers)
+  const setServers = useStore(selectSettings.setServers)
   const server = id ? servers.find(s => s.id === id) : undefined
 
   const [address, setAddress] = useState(server?.address || '')

app/screens/Settings.tsx

@@ -3,12 +3,12 @@ import GradientScrollView from '@app/components/GradientScrollView'
 import Header from '@app/components/Header'
 import PressableOpacity from '@app/components/PressableOpacity'
 import SettingsItem from '@app/components/SettingsItem'
+import { useSwitchActiveServer } from '@app/hooks/server'
 import { Server } from '@app/models/settings'
-import { useSetActiveServer } from '@app/state/server'
+import { selectSettings } from '@app/state/settings'
-import { activeServerAtom, appSettingsAtom } from '@app/state/settings'
+import { useStore } from '@app/state/store'
 import colors from '@app/styles/colors'
 import { useNavigation } from '@react-navigation/core'
-import { useAtomValue } from 'jotai/utils'
 import React, { useCallback } from 'react'
 import { StatusBar, StyleSheet, View } from 'react-native'
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
@@ -16,13 +16,13 @@ import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
 const ServerItem = React.memo<{
   server: Server
 }>(({ server }) => {
-  const activeServer = useAtomValue(activeServerAtom)
+  const activeServer = useStore(selectSettings.activeServer)
-  const setActiveServer = useSetActiveServer()
+  const switchActiveServer = useSwitchActiveServer()
   const navigation = useNavigation()
 
   const setActive = useCallback(() => {
-    setActiveServer(server.id)
+    switchActiveServer(server.id)
-  }, [server.id, setActiveServer])
+  }, [server.id, switchActiveServer])
 
   return (
     <SettingsItem
@@ -41,21 +41,26 @@ const ServerItem = React.memo<{
 })
 
 const SettingsContent = React.memo(() => {
-  const settings = useAtomValue(appSettingsAtom)
+  const servers = useStore(selectSettings.servers)
   const navigation = useNavigation()
 
   return (
     <View style={styles.content}>
       <Header>Servers</Header>
-      {settings.servers.map(s => (
+      {servers.map(s => (
         <ServerItem key={s.id} server={s} />
       ))}
-      <Button title="Add Server" onPress={() => navigation.navigate('server')} buttonStyle="hollow" />
+      <Button
-      <Header>Network</Header>
+        style={styles.button}
+        title="Add Server"
+        onPress={() => navigation.navigate('server')}
+        buttonStyle="hollow"
+      />
+      <Header style={styles.header}>Network</Header>
       <SettingsItem title="Max bitrate (Wi-Fi)" subtitle="Unlimited" />
       <SettingsItem title="Max bitrate (mobile)" subtitle="192kbps" />
-      <Header>Reset</Header>
+      <Header style={styles.header}>Reset</Header>
-      <Button title="Reset everything to default" onPress={() => {}} buttonStyle="hollow" />
+      <Button style={styles.button} title="Reset everything to default" onPress={() => {}} buttonStyle="hollow" />
     </View>
   )
 })
@@ -63,9 +68,7 @@ const SettingsContent = React.memo(() => {
 const Settings = () => {
   return (
     <GradientScrollView style={styles.scroll} contentContainerStyle={styles.scrollContentContainer}>
-      <React.Suspense fallback={() => <></>}>
       <SettingsContent />
-      </React.Suspense>
     </GradientScrollView>
   )
 }
@@ -86,6 +89,12 @@ const styles = StyleSheet.create({
   serverActive: {
     paddingLeft: 12,
   },
+  header: {
+    marginTop: 26,
+  },
+  button: {
+    marginVertical: 10,
+  },
 })
 
 export default Settings

app/screens/SongListView.tsx

@@ -0,0 +1,167 @@
+import CoverArt from '@app/components/CoverArt'
+import GradientBackground from '@app/components/GradientBackground'
+import ImageGradientScrollView from '@app/components/ImageGradientScrollView'
+import ListItem from '@app/components/ListItem'
+import ListPlayerControls from '@app/components/ListPlayerControls'
+import NothingHere from '@app/components/NothingHere'
+import { useAlbumWithSongs, useCoverArtUri, usePlaylistWithSongs } from '@app/hooks/music'
+import { AlbumWithSongs, PlaylistWithSongs, Song } from '@app/models/music'
+import { useSetQueue } from '@app/state/trackplayer'
+import colors from '@app/styles/colors'
+import font from '@app/styles/font'
+import { useNavigation } from '@react-navigation/native'
+import React, { useEffect } from 'react'
+import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
+
+type SongListType = 'album' | 'playlist'
+
+const SongListDetailsFallback = React.memo(() => (
+  <GradientBackground style={styles.fallback}>
+    <ActivityIndicator size="large" color={colors.accent} />
+  </GradientBackground>
+))
+
+const Songs = React.memo<{
+  songs: Song[]
+  name: string
+  type: SongListType
+}>(({ songs, name, type }) => {
+  const setQueue = useSetQueue()
+
+  const _songs = [...songs]
+  let typeName = ''
+
+  if (type === 'album') {
+    typeName = 'Album'
+    _songs.sort((a, b) => {
+      if (b.track && a.track) {
+        return a.track - b.track
+      } else {
+        return a.title.localeCompare(b.title)
+      }
+    })
+  } else {
+    typeName = 'Playlist'
+  }
+
+  return (
+    <>
+      <ListPlayerControls style={styles.controls} songs={songs} typeName={typeName} queueName={name} />
+      <View style={styles.songs}>
+        {_songs.map((s, i) => (
+          <ListItem
+            key={i}
+            item={s}
+            subtitle={s.artist}
+            onPress={() => setQueue(songs, name, i)}
+            showArt={type === 'playlist'}
+          />
+        ))}
+      </View>
+    </>
+  )
+})
+
+const SongListDetails = React.memo<{
+  type: SongListType
+  songList?: AlbumWithSongs | PlaylistWithSongs
+  subtitle?: string
+}>(({ songList, subtitle, type }) => {
+  const coverArtUri = useCoverArtUri()
+
+  if (!songList) {
+    return <SongListDetailsFallback />
+  }
+
+  return (
+    <ImageGradientScrollView imageUri={coverArtUri(songList.coverArt)} style={styles.container}>
+      <View style={styles.content}>
+        <CoverArt coverArt={songList.coverArt} style={styles.cover} imageSize="original" />
+        <Text style={styles.title}>{songList.name}</Text>
+        {subtitle ? <Text style={styles.subtitle}>{subtitle}</Text> : <></>}
+        {songList.songs.length > 0 ? (
+          <Songs songs={songList.songs} name={songList.name} type={type} />
+        ) : (
+          <NothingHere height={300} width={250} />
+        )}
+      </View>
+    </ImageGradientScrollView>
+  )
+})
+
+const PlaylistView = React.memo<{
+  id: string
+}>(({ id }) => {
+  const playlist = usePlaylistWithSongs(id)
+  return <SongListDetails songList={playlist} subtitle={playlist?.comment} type="playlist" />
+})
+
+const AlbumView = React.memo<{
+  id: string
+}>(({ id }) => {
+  const album = useAlbumWithSongs(id)
+  return (
+    <SongListDetails
+      songList={album}
+      subtitle={(album?.artist || '') + (album?.year ? ' • ' + album?.year : '')}
+      type="album"
+    />
+  )
+})
+
+const SongListView = React.memo<{
+  id: string
+  title: string
+  type: SongListType
+}>(({ id, title, type }) => {
+  const navigation = useNavigation()
+
+  useEffect(() => {
+    navigation.setOptions({ title })
+  })
+
+  return type === 'album' ? <AlbumView id={id} /> : <PlaylistView id={id} />
+})
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    alignItems: 'center',
+    paddingTop: 10,
+    paddingHorizontal: 20,
+  },
+  controls: {
+    marginTop: 20,
+  },
+  title: {
+    fontSize: 24,
+    fontFamily: font.bold,
+    color: colors.text.primary,
+    marginTop: 20,
+    textAlign: 'center',
+  },
+  subtitle: {
+    fontFamily: font.regular,
+    color: colors.text.secondary,
+    fontSize: 14,
+    marginTop: 4,
+    textAlign: 'center',
+  },
+  cover: {
+    height: 220,
+    width: 220,
+  },
+  songs: {
+    marginTop: 26,
+    marginBottom: 30,
+    width: '100%',
+  },
+  fallback: {
+    alignItems: 'center',
+    paddingTop: 100,
+  },
+})
+
+export default SongListView

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 {
+import produce from 'immer'
-  AlbumID3Element,
+import { atom } from 'jotai'
-  ArtistID3Element,
+import { GetState, SetState } from 'zustand'
-  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'
 
-export const artistsAtom = atom<Artist[]>([])
+export type MusicSlice = {
-export const artistsUpdatingAtom = atom(false)
+  cacheSize: number
-
+  artistInfo: { [id: string]: ArtistInfo | undefined }
-export const useUpdateArtists = () => {
+  artistInfoCache: string[]
-  const server = useAtomValue(activeServerAtom)
+  albums: { [id: string]: AlbumWithSongs | undefined }
-  const [updating, setUpdating] = useAtom(artistsUpdatingAtom)
+  albumsCache: string[]
-  const setArtists = useUpdateAtom(artistsAtom)
+  playlists: { [id: string]: PlaylistWithSongs | undefined }
-
+  playlistsCache: string[]
-  if (!server) {
+  fetchArtistInfo: (server: Server, id: string) => Promise<ArtistInfo | undefined>
-    return () => Promise.resolve()
+  fetchAlbum: (server: Server, id: string) => Promise<AlbumWithSongs | undefined>
-  }
+  fetchPlaylist: (server: Server, id: string) => Promise<PlaylistWithSongs | undefined>
-
+}
-  return async () => {
-    if (updating) {
-      return
-    }
-    setUpdating(true)
 
+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()
+      const [artistResponse, artistInfoResponse] = await Promise.all([
-      setArtists(response.data.artists.map(mapArtistID3toArtist))
+        client.getArtist({ id }),
-    } finally {
+        client.getArtistInfo2({ id }),
-      setUpdating(false)
+      ])
+      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/settings.ts

@@ -1,46 +1,47 @@
-import { atom } from 'jotai'
 import { AppSettings, Server } from '@app/models/settings'
-import atomWithAsyncStorage from '@app/storage/atomWithAsyncStorage'
+import { Store } from '@app/state/store'
-import equal from 'fast-deep-equal'
+import produce from 'immer'
+import { GetState, SetState } from 'zustand'
 
-export const appSettingsAtom = atomWithAsyncStorage<AppSettings>('@appSettings', {
+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>(
+export const selectSettings = {
-  get => {
+  activeServer: (state: Store) => state.settings.servers.find(s => s.id === state.settings.activeServer),
-    const appSettings = get(appSettingsAtom)
+  setActiveServer: (state: Store) => state.setActiveServer,
-    return appSettings.servers.find(x => x.id === appSettings.activeServer)
+  servers: (state: Store) => state.settings.servers,
-  },
+  setServers: (state: Store) => state.setServers,
-  (get, set, update) => {
+  homeLists: (state: Store) => state.settings.home.lists,
-    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)

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

package.json

@@ -17,6 +17,7 @@
     "@react-navigation/material-top-tabs": "^5.3.15",
     "@react-navigation/native": "^5.9.4",
     "fast-deep-equal": "^3.1.3",
+    "immer": "^9.0.5",
     "jotai": "^1.1.0",
     "lodash.debounce": "^4.0.8",
     "md5": "^2.3.0",

yarn.lock

@@ -3399,6 +3399,11 @@ image-size@^0.6.0:
   resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.6.3.tgz#e7e5c65bb534bd7cdcedd6cb5166272a85f75fb2"
   integrity sha512-47xSUiQioGaB96nqtp5/q55m0aBQSQdyIloMOc/x+QVTDZLNmXE892IIDrJ0hM1A5vcNUDD5tDffkSP5lCaIIA==
 
+immer@^9.0.5:
+  version "9.0.5"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.5.tgz#a7154f34fe7064f15f00554cc94c66cc0bf453ec"
+  integrity sha512-2WuIehr2y4lmYz9gaQzetPR2ECniCifk4ORaQbU3g5EalLt+0IVTosEPJ5BoYl/75ky2mivzdRzV8wWgQGOSYQ==
+
 import-fresh@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546"