Merge pull request #140 from mebtte/beta

improve playlist restoring

Author: mebtte

apps/pwa/src/global_states/server.ts

@@ -11,8 +11,8 @@ export function getSelectedServer(ss: ServerState) {
     : undefined;
 }
 
-export function getSelectedUser(server: Server) {
-  return server.selectedUserId
+export function getSelectedUser(server: Server | undefined) {
+  return server?.selectedUserId
     ? server.users.find((u) => u.id === server.selectedUserId)
     : undefined;
 }

apps/pwa/src/pages/player/use_playlist/use_playlist_restore.tsx

@@ -9,6 +9,7 @@ import { MdCheck, MdClose } from 'react-icons/md';
 import upperCaseFirstLetter from '@/style/upper_case_first_letter';
 import eventemitter, { EventType } from '../eventemitter';
 import { t } from '@/i18n';
+import useUnmount from '@/utils/use_unmount';
 
 const Restore = styled.div`
   > .text {
@@ -33,11 +34,23 @@ const Restore = styled.div`
 function usePlaylistRestore(playlist: PlaylistMusic[]) {
   useEffect(
     () =>
-      playlist && playlist.length > 0
-        ? void storage.setItem(Key.PLAYLIST, playlist)
+      playlist.length
+        ? void storage
+            .setItem(Key.PLAYLIST, playlist)
+            .catch((error) =>
+              logger.error(error, 'Failed to save playlist to storage'),
+            )
         : undefined,
     [playlist],
   );
+  useUnmount(
+    () =>
+      void storage
+        .removeItem(Key.PLAYLIST)
+        .catch((error) =>
+          logger.error(error, 'Failed to remove playlist from storage'),
+        ),
+  );
 
   useEffect(() => {
     let noticeId: string | undefined;
@@ -99,6 +112,7 @@ function usePlaylistRestore(playlist: PlaylistMusic[]) {
       unlistenActionPlayMusic();
       unlistenActionAddMusicListToPlaylist();
       unlistenActionInsertMusicToPlayqueue();
+      closeNotice();
     };
   }, []);
 }

apps/pwa/src/utils/use_event.ts

@@ -7,7 +7,7 @@ function useEvent<Callback extends (...args: unknown[]) => unknown>(
   callbackRef.current = callback;
 
   const memoCallback: Callback = useCallback(
-    // @ts-expect-error
+    // @ts-expect-error: known types
     (...args) => callbackRef.current!(...args),
     [],
   );

apps/pwa/src/utils/use_unmount.ts

@@ -0,0 +1,9 @@
+import { useEffect, useRef } from 'react';
+
+function useUnmount<Callback extends () => void>(callback: Callback) {
+  const callbackRef = useRef<Callback>(callback);
+  callbackRef.current = callback;
+  useEffect(() => callbackRef.current, []);
+}
+
+export default useUnmount;