Completed Adding Artist component, front and back

src/api/artists.rs

@@ -33,7 +33,7 @@ pub async fn add_artist(artist_name: String) -> Result<(), ServerFnError> {
     diesel::insert_into(artists)
         .values(&new_artist)
         .execute(db)
-        .map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error creating playlist: {}", e)))?;
+        .map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error adding artist: {}", e)))?;
     
     Ok(())
 }

src/components/add_artist.rs

@@ -16,11 +16,25 @@ pub fn AddArtistBtn(add_artist_open: RwSignal<bool>) -> impl IntoView {
 }
 #[component]
 pub fn AddArtist(open: RwSignal<bool>) -> impl IntoView {
+    let artist_name = create_rw_signal("".to_string());
+
     let close_dialog = move |ev: leptos::ev::MouseEvent| {
 		ev.prevent_default();
 		open.set(false);
 	};
-
+    let on_add_artist = move |ev: leptos::ev::SubmitEvent| {
+        ev.prevent_default();
+        let artist_name_clone = artist_name.get();
+        spawn_local(async move {
+            let add_artist_result = add_artist(artist_name_clone).await;
+            if let Err(err) = add_artist_result {
+                log!("Error adding artist: {:?}", err);
+            } else if let Ok(artist) = add_artist_result {
+                log!("Added artist: {:?}", artist);
+                artist_name.set("".to_string());
+            }
+        })
+    };
 
     view! {
         <Show when=open fallback=move|| view!{}>
@@ -29,9 +43,15 @@ pub fn AddArtist(open: RwSignal<bool>) -> impl IntoView {
                     <h1>Add Artist</h1>
                 </div>
                 <div class="close-button" on:click=close_dialog><Icon icon=icondata::IoClose /></div>
-                <form class="create-artist-form" action="POST">
+                <form class="create-artist-form" action="POST" on:submit=on_add_artist>
                     <div class="input-bx">
-                        <input type="text" name="title" required class="text-input" required/>
+                        <input type="text" name="title" required class="text-input" 
+                            prop:value=artist_name
+                            on:input=move |ev: leptos::ev::Event| {
+                                artist_name.set(event_target_value(&ev));
+                            }        
+                            required 
+                         />
                         <span>Artist Name</span>
                     </div>
                     <button type="submit" class="upload-button">Add</button>

src/components/upload_dropdown.rs

@@ -1,6 +1,5 @@
 use leptos::*;
 use leptos_icons::*;
-use leptos::leptos_dom::*;
 use crate::components::upload::*;
 use crate::components::add_artist::*;