From 6ad6617d888aed759c140016e09635df281d5575 Mon Sep 17 00:00:00 2001 From: jeffvli Date: Tue, 3 Jan 2023 00:50:09 -0800 Subject: [PATCH] Add delete playlist to context menu --- .../albums/components/album-detail-header.tsx | 2 - .../context-menu/context-menu-items.tsx | 2 +- .../context-menu/context-menu-provider.tsx | 60 ++++++++++++++++++- src/renderer/features/context-menu/events.ts | 3 +- src/renderer/features/playlists/index.ts | 3 + .../mutations/create-playlist-mutation.ts | 2 +- .../mutations/delete-playlist-mutation.ts | 4 ++ 7 files changed, 68 insertions(+), 8 deletions(-) diff --git a/src/renderer/features/albums/components/album-detail-header.tsx b/src/renderer/features/albums/components/album-detail-header.tsx index c768a155..19778141 100644 --- a/src/renderer/features/albums/components/album-detail-header.tsx +++ b/src/renderer/features/albums/components/album-detail-header.tsx @@ -38,8 +38,6 @@ export const AlbumDetailHeader = forwardRef( }, ]; - console.log('detailQuery?.data?.duration :>> ', detailQuery?.data?.duration); - return ( { } }; + const deletePlaylistMutation = useDeletePlaylist(); + + const handleDeletePlaylist = () => { + for (const item of ctx.data) { + deletePlaylistMutation?.mutate( + { query: { id: item.id } }, + { + onError: (err) => { + toast.error({ + message: err.message, + title: 'Error deleting playlist', + }); + }, + onSuccess: () => { + toast.success({ + message: `${item.name} was successfully deleted`, + title: 'Playlist deleted', + }); + }, + }, + ); + } + closeAllModals(); + }; + + const openDeletePlaylistModal = () => { + openModal({ + children: ( + + + Are you sure you want to delete the following playlist(s)? +
    + {ctx.data.map((item) => ( +
  • + + —{item.name} + +
  • + ))} +
+
+
+ ), + title: 'Delete playlist(s)', + }); + }; + const contextMenuItems = { addToFavorites: { id: 'addToFavorites', label: 'Add to favorites', onClick: () => {} }, addToPlaylist: { id: 'addToPlaylist', label: 'Add to playlist', onClick: () => {} }, - deletePlaylist: { id: 'deletePlaylist', label: 'Delete playlist', onClick: () => {} }, + createPlaylist: { id: 'createPlaylist', label: 'Create playlist', onClick: () => {} }, + deletePlaylist: { + id: 'deletePlaylist', + label: 'Delete playlist', + onClick: openDeletePlaylistModal, + }, play: { id: 'play', label: 'Play', diff --git a/src/renderer/features/context-menu/events.ts b/src/renderer/features/context-menu/events.ts index 01929a78..6f08562a 100644 --- a/src/renderer/features/context-menu/events.ts +++ b/src/renderer/features/context-menu/events.ts @@ -22,7 +22,8 @@ export type ContextMenuItem = | 'addToFavorites' | 'removeFromFavorites' | 'setRating' - | 'deletePlaylist'; + | 'deletePlaylist' + | 'createPlaylist'; export type SetContextMenuItems = { disabled?: boolean; diff --git a/src/renderer/features/playlists/index.ts b/src/renderer/features/playlists/index.ts index aaac84c1..cbe0667d 100644 --- a/src/renderer/features/playlists/index.ts +++ b/src/renderer/features/playlists/index.ts @@ -1,2 +1,5 @@ export * from './queries/playlist-list-query'; export * from './components/create-playlist-form'; +export * from './mutations/delete-playlist-mutation'; +export * from './mutations/create-playlist-mutation'; +export * from './mutations/update-playlist-mutation'; diff --git a/src/renderer/features/playlists/mutations/create-playlist-mutation.ts b/src/renderer/features/playlists/mutations/create-playlist-mutation.ts index 6d02a11b..06a96481 100644 --- a/src/renderer/features/playlists/mutations/create-playlist-mutation.ts +++ b/src/renderer/features/playlists/mutations/create-playlist-mutation.ts @@ -18,7 +18,7 @@ export const useCreatePlaylist = (options?: MutationOptions) => { >({ mutationFn: (args) => api.controller.createPlaylist({ ...args, server }), onSuccess: () => { - queryClient.invalidateQueries(queryKeys.playlists.list(server?.id || '')); + queryClient.invalidateQueries(queryKeys.playlists.list(server?.id || ''), { exact: false }); }, ...options, }); diff --git a/src/renderer/features/playlists/mutations/delete-playlist-mutation.ts b/src/renderer/features/playlists/mutations/delete-playlist-mutation.ts index 02a89343..9aca7ca9 100644 --- a/src/renderer/features/playlists/mutations/delete-playlist-mutation.ts +++ b/src/renderer/features/playlists/mutations/delete-playlist-mutation.ts @@ -17,6 +17,10 @@ export const useDeletePlaylist = (options?: MutationOptions) => { null >({ mutationFn: (args) => api.controller.deletePlaylist({ ...args, server }), + onMutate: () => { + queryClient.cancelQueries(queryKeys.playlists.list(server?.id || '')); + return null; + }, onSuccess: () => { queryClient.invalidateQueries(queryKeys.playlists.list(server?.id || '')); },