From f10897b605522d67f5ad7ef662690fb1556a80ce Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Wed, 16 Oct 2024 11:12:46 +0200
Subject: [PATCH] 2314: sort playlists based on weight (or else drag and drop
 does not make any sense)

---
 CHANGELOG.md                                           |  1 +
 .../playlist-drag-and-drop/playlist-drag-and-drop.jsx  | 10 ++++++----
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8dc00746..6196e44b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ All notable changes to this project will be documented in this file.
   - Change bootstrap column class from `col-md-8` -> `col-md-12` 
   - update api.generated.ts to match [related pr](https://github.com/os2display/display-api-service/pull/213)
   - Add @rtk-incubator/rtk-query-codegen-openapi to package.json in `src/redux/api`
+  - Sort playlists based on weight in drag/drop component
 
 ## [2.1.0] - 2024-10-23
 
diff --git a/src/components/playlist-drag-and-drop/playlist-drag-and-drop.jsx b/src/components/playlist-drag-and-drop/playlist-drag-and-drop.jsx
index 706b074a..755a50c6 100644
--- a/src/components/playlist-drag-and-drop/playlist-drag-and-drop.jsx
+++ b/src/components/playlist-drag-and-drop/playlist-drag-and-drop.jsx
@@ -77,12 +77,14 @@ function PlaylistDragAndDrop({
     if (selectedPlaylistsByRegion) {
       setTotalItems(selectedPlaylistsByRegion["hydra:totalItems"]);
       const newPlaylists = selectedPlaylistsByRegion["hydra:member"].map(
-        ({ playlist }) => {
-          return playlist;
-        }
+        ({ playlist, weight }) => ({ ...playlist, weight })
       );
 
-      setSelectedData([...selectedData, ...newPlaylists]);
+      const selected = [...selectedData, ...newPlaylists].sort(
+        (a, b) => a.weight - b.weight
+      );
+
+      setSelectedData(selected);
       callbackToinitializePlaylists(selectedPlaylistsByRegion);
     }
   }, [selectedPlaylistsByRegion]);