From 6697844239221843f340f543c393c8f0f09b94f5 Mon Sep 17 00:00:00 2001
From: grimhilt <grimhilt@users.noreply.github.com>
Date: Mon, 31 Jul 2023 01:48:22 +0200
Subject: [PATCH] remove file from a playlist

---
 src/pages/playlist/content.jsx | 35 +++++++++++++++++++++++++---------
 src/services/api.js            |  6 ++++--
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/pages/playlist/content.jsx b/src/pages/playlist/content.jsx
index 6fe4f1f..7a0731f 100644
--- a/src/pages/playlist/content.jsx
+++ b/src/pages/playlist/content.jsx
@@ -51,13 +51,31 @@ const Content = ({ form, playlistId }) => {
                 above_position = formFiles[to + 1].position;
             }
         }
-        let newPosition = (below_position + above_position) / 2
-        form.values.files[from].position = newPosition;
+        let newPosition = (below_position + above_position) / 2;
 
         // sending modification to server
-        API.playlistChangeOrder(playlistId, {file_id: formFiles[from].id, position: newPosition})
+        API.playlistChangeOrder(playlistId, { file_id: formFiles[from].id, position: newPosition })
             .then((res) => {
                 if (res.status !== 200) {
+                    form.values.files[from].position = newPosition;
+                    return true;
+                } else {
+                    setNotification(true, `Error when changing order (${res.status})`);
+                    return false;
+                }
+            })
+            .catch((err) => {
+                setNotification(true, err.message);
+                return false;
+            });
+    };
+
+    const handleDelete = (index) => {
+        API.playlistRemoveFile(playlistId, { file_id: form.values.files[index].id })
+            .then((res) => {
+                if (res.status == 200) {
+                    form.removeListItem('files', index);
+                } else {
                     setNotification(true, `Error when changing order (${res.status})`);
                 }
             })
@@ -66,10 +84,6 @@ const Content = ({ form, playlistId }) => {
             });
     };
 
-    const handleDelete = (index) => {
-        form.removeListItem('files', index);
-    };
-
     const fields = form.values.files.map((_, index) => (
         <Draggable key={index} index={index} draggableId={index.toString()}>
             {(provided) => (
@@ -101,8 +115,11 @@ const Content = ({ form, playlistId }) => {
         <Box mx="auto">
             <DragDropContext
                 onDragEnd={({ destination, source }) => {
-                    changePositionValue(source.index, destination.index);
-                    form.reorderListItem('files', { from: source.index, to: destination.index });
+                    changePositionValue(source.index, destination.index).then((success) => {
+                        if (success) {
+                            form.reorderListItem('files', { from: source.index, to: destination.index });
+                        }
+                    });
                 }}
             >
                 <StrictModeDroppable droppableId="dnd-list" direction="vertical">
diff --git a/src/services/api.js b/src/services/api.js
index f46abfc..ff319b6 100644
--- a/src/services/api.js
+++ b/src/services/api.js
@@ -27,8 +27,10 @@ const API = {
     },
     playlistChangeOrder(playlistId, data) {
         return caller().post(`/playlist/${playlistId}/order`, data);
-
-    }
+    },
+    playlistRemoveFile(playlistId, data) {
+        return caller().post(`/playlist/${playlistId}/remove_file`, data);
+    },
 };
 
 export default API;