impl clear image cache

app/screens/Settings.tsx

@@ -6,6 +6,7 @@ import SettingsItem from '@app/components/SettingsItem'
 import SettingsSwitch from '@app/components/SettingsSwitch'
 import { useSwitchActiveServer } from '@app/hooks/server'
 import { Server } from '@app/models/settings'
+import { selectCache } from '@app/state/cache'
 import { selectSettings } from '@app/state/settings'
 import { useStore } from '@app/state/store'
 import colors from '@app/styles/colors'
@@ -142,8 +143,26 @@ const SettingsContent = React.memo(() => {
   const maxBitrateMobile = useStore(selectSettings.maxBitrateMobile)
   const setMaxBitrateMobile = useStore(selectSettings.setMaxBitrateMobile)
 
+  const clearImageCache = useStore(selectCache.clearImageCache)
+  const [clearing, setClearing] = useState(false)
+
   const navigation = useNavigation()
 
+  const clear = useCallback(() => {
+    setClearing(true)
+
+    const waitForClear = async () => {
+      try {
+        await clearImageCache()
+      } catch (err) {
+        console.log(err)
+      } finally {
+        setClearing(false)
+      }
+    }
+    waitForClear()
+  }, [clearImageCache])
+
   return (
     <View style={styles.content}>
       <Header>Servers</Header>
@@ -173,8 +192,20 @@ const SettingsContent = React.memo(() => {
         setValue={setScrobble}
       />
       <Header style={styles.header}>Reset</Header>
-      <Button style={styles.button} title="Clear image cache" onPress={() => {}} buttonStyle="hollow" />
-      <Button style={styles.button} title="Reset everything to default" onPress={() => {}} buttonStyle="hollow" />
+      <Button
+        disabled={clearing}
+        style={styles.button}
+        title="Clear image cache"
+        onPress={clear}
+        buttonStyle="hollow"
+      />
+      {/* <Button
+        disabled={clearing}
+        style={styles.button}
+        title="Reset everything to default"
+        onPress={() => {}}
+        buttonStyle="hollow"
+      /> */}
     </View>
   )
 })

app/state/cache.ts

@@ -39,20 +39,13 @@ export type CacheSlice = {
   prepareCache: (serverId: string) => void
   pendingRemoval: Record<string, boolean>
   removeCache: (serverId: string) => Promise<void>
+  clearImageCache: () => Promise<void>
 }
 
 export const selectCache = {
   cacheItem: (store: CacheSlice) => store.cacheItem,
   fetchCoverArtFilePath: (store: CacheSlice) => store.fetchCoverArtFilePath,
-
-  songCacheDir: (store: Store) => {
-    const activeServerId = store.settings.activeServer
-    if (!activeServerId) {
-      return
-    }
-
-    return store.cacheDirs[activeServerId].song
-  },
+  clearImageCache: (store: CacheSlice) => store.clearImageCache,
 }
 
 export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): CacheSlice => ({
@@ -242,4 +235,31 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
       }),
     )
   },
+
+  clearImageCache: async () => {
+    const cacheRequests = get().cacheRequests
+    for (const serverId in cacheRequests) {
+      const coverArtRequests = cacheRequests[serverId].coverArt
+      const artstArtRequests = cacheRequests[serverId].artistArt
+      const requests = [...Object.values(coverArtRequests), ...Object.values(artstArtRequests)]
+      const pendingRequests = [
+        ...(requests.filter(r => r.promise !== undefined).map(r => r.promise) as Promise<void>[]),
+      ]
+
+      await Promise.all(pendingRequests)
+
+      await rmdir(get().cacheDirs[serverId].coverArt)
+      await mkdir(get().cacheDirs[serverId].coverArt)
+
+      await rmdir(get().cacheDirs[serverId].artistArt)
+      await mkdir(get().cacheDirs[serverId].artistArt)
+
+      set(
+        produce<CacheSlice>(state => {
+          state.cacheFiles[serverId].coverArt = {}
+          state.cacheFiles[serverId].artistArt = {}
+        }),
+      )
+    }
+  },
 })