add support for full playlist re-order (#1327)

src/renderer/features/playlists/components/save-and-replace-context-modal.tsx

@@ -0,0 +1,91 @@
+import { closeAllModals, ContextModalProps } from '@mantine/modals';
+import { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useReplacePlaylist } from '/@/renderer/features/playlists/mutations/replace-playlist-mutation';
+import { useCurrentServerId } from '/@/renderer/store';
+import { ConfirmModal } from '/@/shared/components/modal/modal';
+import { Text } from '/@/shared/components/text/text';
+import { toast } from '/@/shared/components/toast/toast';
+import { Song } from '/@/shared/types/domain-types';
+
+export const SaveAndReplaceContextModal = ({
+    innerProps,
+}: ContextModalProps<{ listData: unknown[]; playlistId: string }>) => {
+    const { t } = useTranslation();
+    const { listData, playlistId } = innerProps;
+    const serverId = useCurrentServerId();
+
+    const replacePlaylistMutation = useReplacePlaylist({});
+
+    // Get current songs from list data
+    const currentSongIds = useMemo(() => {
+        if (!listData || !Array.isArray(listData)) {
+            return [];
+        }
+
+        return listData
+            .filter((item): item is Song => {
+                return (
+                    typeof item === 'object' &&
+                    item !== null &&
+                    'id' in item &&
+                    typeof (item as any).id === 'string'
+                );
+            })
+            .map((song) => song.id);
+    }, [listData]);
+
+    const handleConfirm = useCallback(() => {
+        if (!serverId || !playlistId) {
+            console.error('serverId or playlistId is not defined');
+            return;
+        }
+
+        if (currentSongIds.length === 0) {
+            console.error('currentSongIds is empty');
+            toast.error({
+                message: t('error.genericError', { postProcess: 'sentenceCase' }),
+                title: t('error.genericError', { postProcess: 'sentenceCase' }),
+            });
+            return;
+        }
+
+        replacePlaylistMutation.mutate(
+            {
+                apiClientProps: { serverId },
+                body: {
+                    songId: currentSongIds,
+                },
+                query: {
+                    id: playlistId,
+                },
+            },
+            {
+                onError: (err) => {
+                    console.error(err);
+                    toast.error({
+                        message: err.message,
+                        title: t('error.genericError', {
+                            postProcess: 'sentenceCase',
+                        }),
+                    });
+                },
+                onSuccess: () => {
+                    closeAllModals();
+                    toast.success({
+                        message: t('form.editPlaylist.success', {
+                            postProcess: 'sentenceCase',
+                        }),
+                    });
+                },
+            },
+        );
+    }, [t, currentSongIds, serverId, playlistId, replacePlaylistMutation]);
+
+    return (
+        <ConfirmModal loading={replacePlaylistMutation.isPending} onConfirm={handleConfirm}>
+            <Text>{t('form.editPlaylist.editNote', { postProcess: 'sentenceCase' })}</Text>
+        </ConfirmModal>
+    );
+};