Add delete playlist to context menu

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 (
       <Stack ref={cq.ref}>
         <LibraryHeader

src/renderer/features/context-menu/context-menu-items.tsx

@@ -34,5 +34,5 @@ export const PLAYLIST_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
   { id: 'play' },
   { id: 'playLast' },
   { divider: true, id: 'playNext' },
-  { disabled: true, id: 'deletePlaylist' },
+  { id: 'deletePlaylist' },
 ];

src/renderer/features/context-menu/context-menu-provider.tsx

@@ -1,13 +1,15 @@
-import { Divider, Stack } from '@mantine/core';
+import { Divider, Group, Stack } from '@mantine/core';
 import { useClickOutside, useResizeObserver, useSetState, useViewportSize } from '@mantine/hooks';
+import { closeAllModals, openModal } from '@mantine/modals';
 import { createContext, Fragment, useState } from 'react';
-import { ContextMenu, ContextMenuButton } from '/@/renderer/components';
+import { ConfirmModal, ContextMenu, ContextMenuButton, Text, toast } from '/@/renderer/components';
 import {
   OpenContextMenuProps,
   SetContextMenuItems,
   useContextMenuEvents,
 } from '/@/renderer/features/context-menu/events';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
+import { useDeletePlaylist } from '/@/renderer/features/playlists';
 import { LibraryItem, Play } from '/@/renderer/types';
 
 type ContextMenuContextProps = {
@@ -104,10 +106,62 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
     }
   };
 
+  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: (
+        <ConfirmModal onConfirm={handleDeletePlaylist}>
+          <Stack>
+            <Text>Are you sure you want to delete the following playlist(s)?</Text>
+            <ul>
+              {ctx.data.map((item) => (
+                <li key={item.id}>
+                  <Group>
+                    —<Text $secondary>{item.name}</Text>
+                  </Group>
+                </li>
+              ))}
+            </ul>
+          </Stack>
+        </ConfirmModal>
+      ),
+      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',

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;

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';

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,
   });

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 || ''));
     },