Add delete playlist to context menu
This commit is contained in:
parent
52163534db
commit
6ad6617d88
7 changed files with 68 additions and 8 deletions
|
@ -38,8 +38,6 @@ export const AlbumDetailHeader = forwardRef(
|
|||
},
|
||||
];
|
||||
|
||||
console.log('detailQuery?.data?.duration :>> ', detailQuery?.data?.duration);
|
||||
|
||||
return (
|
||||
<Stack ref={cq.ref}>
|
||||
<LibraryHeader
|
||||
|
|
|
@ -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' },
|
||||
];
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -22,7 +22,8 @@ export type ContextMenuItem =
|
|||
| 'addToFavorites'
|
||||
| 'removeFromFavorites'
|
||||
| 'setRating'
|
||||
| 'deletePlaylist';
|
||||
| 'deletePlaylist'
|
||||
| 'createPlaylist';
|
||||
|
||||
export type SetContextMenuItems = {
|
||||
disabled?: boolean;
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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,
|
||||
});
|
||||
|
|
|
@ -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 || ''));
|
||||
},
|
||||
|
|
Reference in a new issue