From e87ee7bf72c00395a7c8cbd30ddefc7556503d5f Mon Sep 17 00:00:00 2001
From: MerlinScheurer <merlin.scheurer@Yahoo.de>
Date: Fri, 27 Dec 2024 17:27:59 +0100
Subject: [PATCH] Refac split channel subscribing input by line break and send
 ids in bulk

---
 .../api/actions/updateChannelSubscription.ts  | 71 +++++++++++--------
 frontend/src/pages/Channels.tsx               | 21 +++++-
 2 files changed, 61 insertions(+), 31 deletions(-)

diff --git a/frontend/src/api/actions/updateChannelSubscription.ts b/frontend/src/api/actions/updateChannelSubscription.ts
index 5fc87c30..587b5ac4 100644
--- a/frontend/src/api/actions/updateChannelSubscription.ts
+++ b/frontend/src/api/actions/updateChannelSubscription.ts
@@ -1,29 +1,42 @@
-import defaultHeaders from '../../configuration/defaultHeaders';
-import getApiUrl from '../../configuration/getApiUrl';
-import getFetchCredentials from '../../configuration/getFetchCredentials';
-import getCookie from '../../functions/getCookie';
-
-const updateChannelSubscription = async (channelId: string, status: boolean) => {
-  const apiUrl = getApiUrl();
-  const csrfCookie = getCookie('csrftoken');
-
-  const response = await fetch(`${apiUrl}/api/channel/`, {
-    method: 'POST',
-    headers: {
-      ...defaultHeaders,
-      'X-CSRFToken': csrfCookie || '',
-    },
-    credentials: getFetchCredentials(),
-
-    body: JSON.stringify({
-      data: [{ channel_id: channelId, channel_subscribed: status }],
-    }),
-  });
-
-  const channelSubscription = await response.json();
-  console.log('updateChannelSubscription', channelSubscription);
-
-  return channelSubscription;
-};
-
-export default updateChannelSubscription;
+import defaultHeaders from '../../configuration/defaultHeaders';
+import getApiUrl from '../../configuration/getApiUrl';
+import getFetchCredentials from '../../configuration/getFetchCredentials';
+import getCookie from '../../functions/getCookie';
+
+const updateChannelSubscription = async (channelIds: string, status: boolean) => {
+  const apiUrl = getApiUrl();
+  const csrfCookie = getCookie('csrftoken');
+
+  const channels = [];
+  const containsMultiple = channelIds.includes('\n');
+
+  if (containsMultiple) {
+    const youtubeChannelIds = channelIds.split('\n');
+
+    youtubeChannelIds.forEach(channelId => {
+      channels.push({ channel_id: channelId, channel_subscribed: status });
+    });
+  } else {
+    channels.push({ channel_id: channelIds, channel_subscribed: status });
+  }
+
+  const response = await fetch(`${apiUrl}/api/channel/`, {
+    method: 'POST',
+    headers: {
+      ...defaultHeaders,
+      'X-CSRFToken': csrfCookie || '',
+    },
+    credentials: getFetchCredentials(),
+
+    body: JSON.stringify({
+      data: [...channels],
+    }),
+  });
+
+  const channelSubscription = await response.json();
+  console.log('updateChannelSubscription', channelSubscription);
+
+  return channelSubscription;
+};
+
+export default updateChannelSubscription;
diff --git a/frontend/src/pages/Channels.tsx b/frontend/src/pages/Channels.tsx
index c2be6b52..0eb93d66 100644
--- a/frontend/src/pages/Channels.tsx
+++ b/frontend/src/pages/Channels.tsx
@@ -12,6 +12,7 @@ import ChannelList from '../components/ChannelList';
 import ScrollToTopOnNavigate from '../components/ScrollToTop';
 import Notifications from '../components/Notifications';
 import Button from '../components/Button';
+import updateChannelSubscription from '../api/actions/updateChannelSubscription';
 
 type ChannelOverwritesType = {
   download_format?: string;
@@ -62,6 +63,7 @@ const Channels = () => {
   const [view, setView] = useState<ViewLayoutType>(userMeConfig.view_style_channel || 'grid');
   const [showAddForm, setShowAddForm] = useState(false);
   const [refresh, setRefresh] = useState(false);
+  const [channelsToSubscribeTo, setChannelsToSubscribeTo] = useState('');
 
   const channels = channelListResponse?.data;
   const pagination = channelListResponse?.paginate;
@@ -123,10 +125,25 @@ const Channels = () => {
                 <div className="show-form">
                   <div>
                     <label>Subscribe to channels:</label>
-                    <textarea rows={3} placeholder="Input channel ID, URL or Video of a channel" />
+                    <textarea
+                      value={channelsToSubscribeTo}
+                      onChange={e => {
+                        setChannelsToSubscribeTo(e.currentTarget.value);
+                      }}
+                      rows={3}
+                      placeholder="Input channel ID, URL or Video of a channel"
+                    />
                   </div>
 
-                  <Button label="Subscribe" type="submit" />
+                  <Button
+                    label="Subscribe"
+                    type="submit"
+                    onClick={async () => {
+                      await updateChannelSubscription(channelsToSubscribeTo, true);
+
+                      setRefresh(true);
+                    }}
+                  />
                 </div>
               )}
             </div>