From 8d4bcb2f4b2336240720a803f539a9abc9b2750a Mon Sep 17 00:00:00 2001
From: Simon <simobilleter@gmail.com>
Date: Wed, 8 Jan 2025 16:15:43 +0700
Subject: [PATCH] use synchronous playlist subscribe update, #862

---
 .../updateBulkPlaylistSubscriptions.ts        | 23 +++++++++++++++++++
 .../api/actions/updatePlaylistSubscription.ts | 19 +++------------
 frontend/src/components/PlaylistList.tsx      |  6 +----
 frontend/src/pages/Playlists.tsx              |  4 ++--
 4 files changed, 29 insertions(+), 23 deletions(-)
 create mode 100644 frontend/src/api/actions/updateBulkPlaylistSubscriptions.ts

diff --git a/frontend/src/api/actions/updateBulkPlaylistSubscriptions.ts b/frontend/src/api/actions/updateBulkPlaylistSubscriptions.ts
new file mode 100644
index 00000000..d189496f
--- /dev/null
+++ b/frontend/src/api/actions/updateBulkPlaylistSubscriptions.ts
@@ -0,0 +1,23 @@
+import APIClient from '../../functions/APIClient';
+
+const updateBulkPlaylistSubscriptions = async (playlistIds: string, status: boolean) => {
+  const playlists = [];
+  const containsMultiple = playlistIds.includes('\n');
+
+  if (containsMultiple) {
+    const youtubePlaylistIds = playlistIds.split('\n');
+
+    youtubePlaylistIds.forEach(playlistId => {
+      playlists.push({ playlist_id: playlistId, playlist_subscribed: status });
+    });
+  } else {
+    playlists.push({ playlist_id: playlistIds, playlist_subscribed: status });
+  }
+
+  return APIClient('/api/playlist/', {
+    method: 'POST',
+    body: { data: [...playlists] },
+  });
+};
+
+export default updateBulkPlaylistSubscriptions;
diff --git a/frontend/src/api/actions/updatePlaylistSubscription.ts b/frontend/src/api/actions/updatePlaylistSubscription.ts
index a920c673..3f2425f4 100644
--- a/frontend/src/api/actions/updatePlaylistSubscription.ts
+++ b/frontend/src/api/actions/updatePlaylistSubscription.ts
@@ -1,22 +1,9 @@
 import APIClient from '../../functions/APIClient';
 
-const updatePlaylistSubscription = async (playlistIds: string, status: boolean) => {
-  const playlists = [];
-  const containsMultiple = playlistIds.includes('\n');
-
-  if (containsMultiple) {
-    const youtubePlaylistIds = playlistIds.split('\n');
-
-    youtubePlaylistIds.forEach(playlistId => {
-      playlists.push({ playlist_id: playlistId, playlist_subscribed: status });
-    });
-  } else {
-    playlists.push({ playlist_id: playlistIds, playlist_subscribed: status });
-  }
-
-  return APIClient('/api/playlist/', {
+const updatePlaylistSubscription = async (playlistId: string, status: boolean) => {
+  return APIClient(`/api/playlist/${playlistId}/`, {
     method: 'POST',
-    body: { data: [...playlists] },
+    body: { playlist_subscribed: status },
   });
 };
 
diff --git a/frontend/src/components/PlaylistList.tsx b/frontend/src/components/PlaylistList.tsx
index a0cbd0bf..84c01525 100644
--- a/frontend/src/components/PlaylistList.tsx
+++ b/frontend/src/components/PlaylistList.tsx
@@ -56,7 +56,6 @@ const PlaylistList = ({ playlistList, setRefresh }: PlaylistListProps) => {
                       title={`Unsubscribe from ${playlist.playlist_name}`}
                       onClick={async () => {
                         await updatePlaylistSubscription(playlist.playlist_id, false);
-
                         setRefresh(true);
                       }}
                     />
@@ -69,10 +68,7 @@ const PlaylistList = ({ playlistList, setRefresh }: PlaylistListProps) => {
                       title={`Subscribe to ${playlist.playlist_name}`}
                       onClick={async () => {
                         await updatePlaylistSubscription(playlist.playlist_id, true);
-
-                        setTimeout(() => {
-                          setRefresh(true);
-                        }, 500);
+                        setRefresh(true);
                       }}
                     />
                   )}
diff --git a/frontend/src/pages/Playlists.tsx b/frontend/src/pages/Playlists.tsx
index 98c6c321..41ac0c21 100644
--- a/frontend/src/pages/Playlists.tsx
+++ b/frontend/src/pages/Playlists.tsx
@@ -11,7 +11,7 @@ import { ConfigType } from './Home';
 import Pagination, { PaginationType } from '../components/Pagination';
 import PlaylistList from '../components/PlaylistList';
 import { PlaylistType } from './Playlist';
-import updatePlaylistSubscription from '../api/actions/updatePlaylistSubscription';
+import updateBulkPlaylistSubscriptions from '../api/actions/updateBulkPlaylistSubscriptions';
 import createCustomPlaylist from '../api/actions/createCustomPlaylist';
 import ScrollToTopOnNavigate from '../components/ScrollToTop';
 import Button from '../components/Button';
@@ -102,7 +102,7 @@ const Playlists = () => {
                       label="Subscribe"
                       type="submit"
                       onClick={async () => {
-                        await updatePlaylistSubscription(playlistsToAddText, true);
+                        await updateBulkPlaylistSubscriptions(playlistsToAddText, true);
                         setRefresh(true);
                       }}
                     />