From b300a74669f96ad0c344e0b34d3c7e6c19d1a3d7 Mon Sep 17 00:00:00 2001
From: n8detar <n8detar@gmail.com>
Date: Thu, 21 Apr 2022 08:56:48 -0700
Subject: [PATCH] Fix error handling when adding download to queue

---
 tubearchivist/www/src/lib/getDownloads.ts | 12 +++++++-----
 tubearchivist/www/src/pages/download.tsx  | 23 +++++++++++------------
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/tubearchivist/www/src/lib/getDownloads.ts b/tubearchivist/www/src/lib/getDownloads.ts
index 81cf749..a786dbd 100755
--- a/tubearchivist/www/src/lib/getDownloads.ts
+++ b/tubearchivist/www/src/lib/getDownloads.ts
@@ -12,7 +12,6 @@ export const getDownloads = async (token: string, filter: boolean): Promise<Down
       mode: "no-cors",
     },
   });
-  console.log(response.ok);
   if (response.ok) {
     return response.json();
   } else {
@@ -45,11 +44,14 @@ export const sendDownloads = async (token: string, input: string): Promise<Downl
     },
     method: "POST"
   });
-  if (!response.ok) {
-    // throw new Error("Error adding content to the download queue.");
-    // return response.json();
+  if (response.ok) {
+    return response.json();
+  } else if (response.status == 400) {
+    throw new Error("Failed to extract links. Please input IDs or URLs for videos, channels, or playlists.");
+  } else {
+    throw new Error("Failed to connect to the API.");
   }
-  return response.json();
+  
 };
 
 export const sendDeleteAllQueuedIgnored = async (token: string, filter: string): Promise<Download> => {
diff --git a/tubearchivist/www/src/pages/download.tsx b/tubearchivist/www/src/pages/download.tsx
index cedc31a..932a40c 100755
--- a/tubearchivist/www/src/pages/download.tsx
+++ b/tubearchivist/www/src/pages/download.tsx
@@ -21,9 +21,7 @@ const TA_BASE_URL = getTAUrl();
 type ViewStyle = "grid" | "list";
 type IgnoredStatus = boolean;
 type FormHidden = boolean;
-type ErrorMessage = boolean;
-
-
+type ErrorMessage = string;
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
     const queryClient = new QueryClient();
@@ -72,7 +70,7 @@ const Download: NextPage = () => {
 
     const [formHidden, setFormHidden] = useState<FormHidden>(true);
     const [viewStyle, setViewStyle] = useState<ViewStyle>(downloads?.config?.default_view?.downloads);
-    const [errorMessage, setErrorMessage] = useState<ErrorMessage>(false);
+    const [errorMessage, setErrorMessage] = useState<ErrorMessage>(null);
 
     const handleSetViewstyle = (selectedViewStyle: ViewStyle) => {
         setViewStyle(selectedViewStyle);
@@ -90,13 +88,14 @@ const Download: NextPage = () => {
     const handleSetErrorMessage = (selectedErrorMessage: ErrorMessage) => {
         setErrorMessage(selectedErrorMessage);
     };
-
     const addToDownloadQueue = event => {
         event.preventDefault();
-        sendDownloads(session.ta_token.token, event.target.vid_url.value).then((response) => !response.message ? handleSetErrorMessage(false) : handleSetErrorMessage(true));
-        errorMessage ? handleSetFormHidden(false) : handleSetFormHidden(true);
+        sendDownloads(session.ta_token.token, event.target.vid_url.value).then(() => {
+            handleSetErrorMessage(null);
+            handleSetFormHidden(true);
+        })
+        .catch(error => handleSetErrorMessage(error.message));
     }
-
     return (
         <>
             <CustomHead title="Downloads" />
@@ -109,14 +108,14 @@ const Download: NextPage = () => {
                     <div id="notifications">
                         {error &&
                             <div className="error notification">
-                                <h3>{downloads?.message}</h3>
-                                <p></p>
+                                <h3>API Connection Error</h3>
+                                <p>{error}</p>
                             </div>
                         }
                         {errorMessage &&
                             <div className="error notification">
-                                <h3>Failed to extract links.</h3>
-                                <p>Not a video, channel, playlist ID or URL</p>
+                                <h3>Failed to add downloads to the queue.</h3>
+                                <p>{errorMessage}</p>
                             </div>
                         }
                         {