From 076452c61232ee357b1f92d7b03672d0c6c0ec36 Mon Sep 17 00:00:00 2001
From: Simon <simobilleter@gmail.com>
Date: Wed, 23 Aug 2023 23:28:09 +0700
Subject: [PATCH] move subscribe buttons to API calls

---
 .../home/templates/home/channel.html          |  4 +-
 .../home/templates/home/channel_id.html       |  4 +-
 .../templates/home/channel_id_playlist.html   |  4 +-
 .../home/templates/home/playlist.html         |  4 +-
 .../home/templates/home/playlist_id.html      |  4 +-
 tubearchivist/static/script.js                | 41 +++++++++++--------
 6 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/tubearchivist/home/templates/home/channel.html b/tubearchivist/home/templates/home/channel.html
index c2f1e0bc..7a7debf9 100644
--- a/tubearchivist/home/templates/home/channel.html
+++ b/tubearchivist/home/templates/home/channel.html
@@ -66,9 +66,9 @@
                             <div>
                                 <p>Last refreshed: {{ channel.source.channel_last_refresh }}</p>
                                 {% if channel.source.channel_subscribed %}
-                                    <button class="unsubscribe" type="button" id="{{ channel.source.channel_id }}" onclick="unsubscribe(this.id)" title="Unsubscribe from {{ channel.source.channel_name }}">Unsubscribe</button>
+                                    <button class="unsubscribe" type="button" data-type="channel" data-subscribe="" data-id="{{ channel.source.channel_id }}" onclick="subscribeStatus(this)" title="Unsubscribe from {{ channel.source.channel_name }}">Unsubscribe</button>
                                 {% else %}
-                                    <button type="button" id="{{ channel.source.channel_id }}" onclick="subscribe(this.id)" title="Subscribe to {{ channel.source.channel_name }}">Subscribe</button>
+                                    <button type="button" data-type="channel" data-subscribe="true" data-id="{{ channel.source.channel_id }}" onclick="subscribeStatus(this)" title="Subscribe to {{ channel.source.channel_name }}">Subscribe</button>
                                 {% endif %}
                             </div>
                         </div>
diff --git a/tubearchivist/home/templates/home/channel_id.html b/tubearchivist/home/templates/home/channel_id.html
index 89487723..7c09888d 100644
--- a/tubearchivist/home/templates/home/channel_id.html
+++ b/tubearchivist/home/templates/home/channel_id.html
@@ -38,9 +38,9 @@
                     <p>Subscribers: {{ channel_info.channel_subs|intcomma }}</p>
                 {% endif %}
                 {% if channel_info.channel_subscribed %}
-                    <button class="unsubscribe" type="button" id="{{ channel_info.channel_id }}" onclick="unsubscribe(this.id)" title="Unsubscribe from {{ channel_info.channel_name }}">Unsubscribe</button>
+                    <button class="unsubscribe" type="button" data-type="channel" data-subscribe="" data-id="{{ channel_info.channel_id }}" onclick="subscribeStatus(this)" title="Unsubscribe from {{ channel_info.channel_name }}">Unsubscribe</button>
                 {% else %}
-                    <button type="button" id="{{ channel_info.channel_id }}" onclick="subscribe(this.id)" title="Subscribe to {{ channel_info.channel_name }}">Subscribe</button>
+                    <button type="button" data-type="channel" data-subscribe="true" data-id="{{ channel_info.channel_id }}" onclick="subscribeStatus(this)" title="Subscribe to {{ channel_info.channel_name }}">Subscribe</button>
                 {% endif %}
             </div>
         </div>
diff --git a/tubearchivist/home/templates/home/channel_id_playlist.html b/tubearchivist/home/templates/home/channel_id_playlist.html
index 971e41ed..c40a1214 100644
--- a/tubearchivist/home/templates/home/channel_id_playlist.html
+++ b/tubearchivist/home/templates/home/channel_id_playlist.html
@@ -54,9 +54,9 @@
                     <a href="{% url 'playlist_id' playlist.source.playlist_id %}"><h2>{{ playlist.source.playlist_name }}</h2></a>
                     <p>Last refreshed: {{ playlist.source.playlist_last_refresh }}</p>
                     {% if playlist.source.playlist_subscribed %}
-                        <button class="unsubscribe" type="button" id="{{ playlist.source.playlist_id }}" onclick="unsubscribe(this.id)" title="Unsubscribe from {{ playlist.source.playlist_name }}">Unsubscribe</button>
+                        <button class="unsubscribe" type="button" data-type="playlist" data-subscribe="" data-id="{{ playlist.source.playlist_id }}" onclick="subscribeStatus(this)" title="Unsubscribe from {{ playlist.source.playlist_name }}">Unsubscribe</button>
                     {% else %}
-                        <button type="button" id="{{ playlist.source.playlist_id }}" onclick="subscribe(this.id)" title="Subscribe to {{ playlist.source.playlist_name }}">Subscribe</button>
+                        <button type="button" data-type="playlist" data-subscribe="true" data-id="{{ playlist.source.playlist_id }}" onclick="subscribeStatus(this)" title="Subscribe to {{ playlist.source.playlist_name }}">Subscribe</button>
                     {% endif %}
                 </div>
             </div>
diff --git a/tubearchivist/home/templates/home/playlist.html b/tubearchivist/home/templates/home/playlist.html
index 2d786bf7..c82af747 100644
--- a/tubearchivist/home/templates/home/playlist.html
+++ b/tubearchivist/home/templates/home/playlist.html
@@ -49,9 +49,9 @@
                     <a href="{% url 'playlist_id' playlist.source.playlist_id %}"><h2>{{ playlist.source.playlist_name }}</h2></a>
                     <p>Last refreshed: {{ playlist.source.playlist_last_refresh }}</p>
                     {% if playlist.source.playlist_subscribed %}
-                        <button class="unsubscribe" type="button" id="{{ playlist.source.playlist_id }}" onclick="unsubscribe(this.id)" title="Unsubscribe from {{ playlist.source.playlist_name }}">Unsubscribe</button>
+                        <button class="unsubscribe" type="button" data-type="playlist" data-subscribe="" data-id="{{ playlist.source.playlist_id }}" onclick="subscribeStatus(this)" title="Unsubscribe from {{ playlist.source.playlist_name }}">Unsubscribe</button>
                     {% else %}
-                        <button type="button" id="{{ playlist.source.playlist_id }}" onclick="subscribe(this.id)" title="Subscribe to {{ playlist.source.playlist_name }}">Subscribe</button>
+                        <button type="button" data-type="playlist" data-subscribe="true" data-id="{{ playlist.source.playlist_id }}" onclick="subscribeStatus(this)" title="Subscribe to {{ playlist.source.playlist_name }}">Subscribe</button>
                     {% endif %}
                 </div>
             </div>
diff --git a/tubearchivist/home/templates/home/playlist_id.html b/tubearchivist/home/templates/home/playlist_id.html
index 92a450dd..b814fec4 100644
--- a/tubearchivist/home/templates/home/playlist_id.html
+++ b/tubearchivist/home/templates/home/playlist_id.html
@@ -27,9 +27,9 @@
                 <p>Last refreshed: {{ playlist_info.playlist_last_refresh }}</p>
                 <p>Playlist:
                     {% if playlist_info.playlist_subscribed %}
-                        <button class="unsubscribe" type="button" id="{{ playlist_info.playlist_id }}" onclick="unsubscribe(this.id)" title="Unsubscribe from {{ playlist_info.playlist_name }}">Unsubscribe</button>
+                        <button class="unsubscribe" type="button" data-type="playlist" data-subscribe="" data-id="{{ playlist_info.playlist_id }}" onclick="subscribeStatus(this)" title="Unsubscribe from {{ playlist_info.playlist_name }}">Unsubscribe</button>
                     {% else %}
-                        <button type="button" id="{{ playlist_info.playlist_id }}" onclick="subscribe(this.id)" title="Subscribe to {{ playlist_info.playlist_name }}">Subscribe</button>
+                        <button type="button" data-type="playlist" data-subscribe="true" data-id="{{ playlist_info.playlist_id }}" onclick="subscribeStatus(this)" title="Subscribe to {{ playlist_info.playlist_name }}">Subscribe</button>
                     {% endif %}
                 </p>
                 {% if playlist_info.playlist_active %}
diff --git a/tubearchivist/static/script.js b/tubearchivist/static/script.js
index 528b1a72..ec165695 100644
--- a/tubearchivist/static/script.js
+++ b/tubearchivist/static/script.js
@@ -71,20 +71,27 @@ function isWatchedButton(button) {
   }, 1000);
 }
 
-function unsubscribe(id_unsub) {
-  let payload = JSON.stringify({ unsubscribe: id_unsub });
-  sendPost(payload);
+function subscribeStatus(subscribeButton) {
+  let id = subscribeButton.getAttribute('data-id');
+  let type = subscribeButton.getAttribute('data-type');
+  let subscribe = Boolean(subscribeButton.getAttribute('data-subscribe'));
+  let apiEndpoint;
+  let data;
+  if (type === 'channel') {
+    apiEndpoint = '/api/channel/';
+    data = { data: [{ channel_id: id, channel_subscribed: subscribe }] };
+  } else if (type === 'playlist') {
+    apiEndpoint = '/api/playlist/';
+    data = { data: [{ playlist_id: id, playlist_subscribed: subscribe }] };
+  }
+  apiRequest(apiEndpoint, 'POST', data);
   let message = document.createElement('span');
-  message.innerText = 'You are unsubscribed.';
-  document.getElementById(id_unsub).replaceWith(message);
-}
-
-function subscribe(id_sub) {
-  let payload = JSON.stringify({ subscribe: id_sub });
-  sendPost(payload);
-  let message = document.createElement('span');
-  message.innerText = 'You are subscribed.';
-  document.getElementById(id_sub).replaceWith(message);
+  if (subscribe) {
+    message.innerText = 'You are subscribed.';
+  } else {
+    message.innerText = 'You are unsubscribed.';
+  }
+  subscribeButton.replaceWith(message);
 }
 
 function changeView(image) {
@@ -1057,9 +1064,9 @@ function createChannel(channel, viewStyle) {
   const channelLastRefresh = channel.channel_last_refresh;
   let button;
   if (channel.channel_subscribed) {
-    button = `<button class="unsubscribe" type="button" id="${channelId}" onclick="unsubscribe(this.id)" title="Unsubscribe from ${channelName}">Unsubscribe</button>`;
+    button = `<button class="unsubscribe" type="button" data-id="${channelId}" data-subscribe="" data-type="channel" onclick="subscribeStatus(this)" title="Unsubscribe from ${channelName}">Unsubscribe</button>`;
   } else {
-    button = `<button type="button" id="${channelId}" onclick="subscribe(this.id)" title="Subscribe to ${channelName}">Subscribe</button>`;
+    button = `<button type="button" data-id="${channelId}" data-subscribe="true" data-type="channel" onclick="subscribeStatus(this)" title="Subscribe to ${channelName}">Subscribe</button>`;
   }
   // build markup
   const markup = `
@@ -1103,9 +1110,9 @@ function createPlaylist(playlist, viewStyle) {
   const playlistLastRefresh = playlist.playlist_last_refresh;
   let button;
   if (playlist.playlist_subscribed) {
-    button = `<button class="unsubscribe" type="button" id="${playlistId}" onclick="unsubscribe(this.id)" title="Unsubscribe from ${playlistName}">Unsubscribe</button>`;
+    button = `<button class="unsubscribe" type="button" data-id="${playlistId}" data-subscribe="" data-type="playlist" onclick="subscribeStatus(this)" title="Unsubscribe from ${playlistName}">Unsubscribe</button>`;
   } else {
-    button = `<button type="button" id="${playlistId}" onclick="subscribe(this.id)" title="Subscribe to ${playlistName}">Subscribe</button>`;
+    button = `<button type="button" data-id="${playlistId}" data-subscribe="true" data-type="playlist" onclick="subscribeStatus(this)" title="Subscribe to ${playlistName}">Subscribe</button>`;
   }
   const markup = `
     <div class="playlist-thumbnail">