From 0adf294cfc02067aa617399fe4bacf926c70dbf4 Mon Sep 17 00:00:00 2001
From: Ethan Girouard <mr.egirouard@gmail.com>
Date: Sat, 18 May 2024 16:36:37 -0400
Subject: [PATCH] Display error message when upload song fails

---
 src/components/upload.rs | 27 ++++++++++++++++++++++++++-
 style/upload.scss        | 15 +++++++++++++++
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/src/components/upload.rs b/src/components/upload.rs
index 8bf593b..02e7bf5 100644
--- a/src/components/upload.rs
+++ b/src/components/upload.rs
@@ -1,7 +1,9 @@
+use std::rc::Rc;
 use leptos::leptos_dom::*;
 use leptos::*;
 use leptos_icons::*;
 use leptos_router::Form;
+use web_sys::Response;
 use crate::search::search_artists;
 use crate::search::search_albums;
 use crate::models::Artist;
@@ -32,6 +34,8 @@ pub fn Upload(open: RwSignal<bool>) -> impl IntoView {
 	let (albums, set_albums) = create_signal("".to_string());
 	let (filtered_albums, set_filtered_albums) = create_signal(vec![]);
 
+	let (error_msg, set_error_msg) = create_signal::<Option<String>>(Some("Error uploading song".to_string()));
+
 	let close_dialog = move |ev: leptos::ev::MouseEvent| {
 		ev.prevent_default();
 		open.set(false);
@@ -81,6 +85,17 @@ pub fn Upload(open: RwSignal<bool>) -> impl IntoView {
 			}
 		})
 	};
+
+	let handle_response = Rc::new(move |response: &Response| {
+		if response.ok() {
+			set_error_msg.update(|value| *value = None);
+			open.set(false);
+		} else {
+			// TODO: Extract error message from response
+			set_error_msg.update(|value| *value = Some("Error uploading song".to_string()));
+		}
+	});
+
 	view! {
 		<Show when=open fallback=move || view! {}>
 			<div class="upload-container" open=open>
@@ -88,7 +103,8 @@ pub fn Upload(open: RwSignal<bool>) -> impl IntoView {
 				<div class="upload-header">
 					<h1>Upload Song</h1>
 				</div>
-				<Form action="/api/upload" method="POST" enctype=String::from("multipart/form-data") class="upload-form">
+				<Form action="/api/upload" method="POST" enctype=String::from("multipart/form-data")
+					class="upload-form" on_response=handle_response.clone()>
 					<div class="input-bx">
 						<input type="text" name="title" required class="text-input" required/>
 						<span>Title</span>
@@ -147,6 +163,15 @@ pub fn Upload(open: RwSignal<bool>) -> impl IntoView {
 					</div>
 					<button type="submit" class="upload-button">Upload</button>
 				</Form>
+				<Show
+					when=move || {error_msg.get().is_some()}
+					fallback=move || view! {}
+				>
+					<div class="error-msg">
+						<Icon icon=icondata::IoAlertCircleSharp />
+						{error_msg.get().as_ref().unwrap()}
+					</div>
+				</Show>
 			</div>
 		</Show>
 	}
diff --git a/style/upload.scss b/style/upload.scss
index 8da99e2..720c427 100644
--- a/style/upload.scss
+++ b/style/upload.scss
@@ -170,4 +170,19 @@
             }
         }
     }
+
+    .error-msg {
+        padding-top: 10px;
+        color: red;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        svg {
+            width: 20px;
+            height: 20px;
+            margin-right: 5px;
+        }
+    }
 }
\ No newline at end of file