Merge remote-tracking branch 'origin/main' into 144-create-song-page-2

src/api/albums.rs

@@ -0,0 +1,65 @@
+use leptos::*;
+
+use cfg_if::cfg_if;
+
+cfg_if! {
+    if #[cfg(feature = "ssr")] {
+        use crate::database::get_db_conn;
+        use diesel::prelude::*;
+        use chrono::NaiveDate;
+    }
+}
+
+/// Add an album to the database
+/// 
+/// # Arguments
+/// 
+/// * `album_title` - The name of the artist to add
+/// * `release_data` - The release date of the album (Optional)
+/// * `image_path` - The path to the album's image file (Optional)
+/// 
+/// # Returns
+///  * `Result<(), Box<dyn Error>>` - A empty result if successful, or an error
+/// 
+#[server(endpoint = "albums/add-album")]
+pub async fn add_album(album_title: String, release_date: Option<String>, image_path: Option<String>) -> Result<(), ServerFnError> {
+    use crate::schema::albums::{self};
+    use crate::models::Album;
+    use leptos::server_fn::error::NoCustomError;
+    
+    let parsed_release_date = match release_date {
+        Some(date) => {
+            match NaiveDate::parse_from_str(&date.trim(), "%Y-%m-%d") {
+                Ok(parsed_date) => Some(parsed_date),
+                Err(_e) => return Err(ServerFnError::<NoCustomError>::ServerError("Invalid release date".to_string()))
+            }
+        },
+        None => None
+    };
+
+    let image_path_arg = match image_path {
+        Some(image_path) => {
+            if image_path.is_empty() {
+                None
+            } else {
+                Some(image_path)
+            }
+        },
+        None => None
+    };
+    
+    let new_album = Album {
+        id: None,
+        title: album_title,
+        release_date: parsed_release_date,
+        image_path: image_path_arg
+    };
+
+    let db = &mut get_db_conn();
+    diesel::insert_into(albums::table)
+        .values(&new_album)
+        .execute(db)
+        .map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error adding album: {}", e)))?;
+
+    Ok(())
+}

src/api/artists.rs

@@ -0,0 +1,216 @@
+use leptos::*;
+
+use cfg_if::cfg_if;
+
+use crate::albumdata::AlbumData;
+use crate::models::Artist;
+use crate::songdata::SongData;
+
+cfg_if! {
+    if #[cfg(feature = "ssr")] {
+        use crate::database::get_db_conn;
+        use diesel::prelude::*;
+        use std::collections::HashMap;
+        use server_fn::error::NoCustomError;
+        use crate::models::Album;
+    }
+}
+
+/// Add an artist to the database
+/// 
+/// # Arguments
+/// 
+/// * `artist_name` - The name of the artist to add
+/// 
+/// # Returns
+///  * `Result<(), Box<dyn Error>>` - A empty result if successful, or an error
+/// 
+#[server(endpoint = "artists/add-artist")]
+pub async fn add_artist(artist_name: String) -> Result<(), ServerFnError> {
+    use crate::schema::artists::dsl::*;
+    use crate::models::Artist;
+    use leptos::server_fn::error::NoCustomError;
+
+    let new_artist = Artist {
+        id: None,
+        name: artist_name,
+    };
+
+    let db = &mut get_db_conn();
+    diesel::insert_into(artists)
+        .values(&new_artist)
+        .execute(db)
+        .map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error adding artist: {}", e)))?;
+    
+    Ok(())
+}
+
+#[server(endpoint = "artists/get")]
+pub async fn get_artist_by_id(artist_id: i32) -> Result<Option<Artist>, ServerFnError> {
+    use crate::schema::artists::dsl::*;
+    use crate::models::Artist;
+    use leptos::server_fn::error::NoCustomError;
+
+    let db = &mut get_db_conn();
+    let artist = artists
+        .filter(id.eq(artist_id))
+        .first::<Artist>(db)
+        .optional()
+        .map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting artist: {}", e)))?;
+
+    Ok(artist)
+}
+
+#[server(endpoint = "artists/top_songs")]
+pub async fn top_songs_by_artist(artist_id: i32, limit: Option<i64>, for_user_id: i32) -> Result<Vec<(SongData, i64)>, ServerFnError> {
+    use crate::models::Song;
+    use leptos::server_fn::error::NoCustomError;
+
+    use crate::schema::*;
+
+    let db = &mut get_db_conn();
+    let song_play_counts: Vec<(i32, i64)> = 
+        if let Some(limit) = limit {
+            song_history::table
+                .group_by(song_history::song_id)
+                .select((song_history::song_id, diesel::dsl::count(song_history::id)))
+                .left_join(song_artists::table.on(song_artists::song_id.eq(song_history::song_id)))
+                .filter(song_artists::artist_id.eq(artist_id))
+                .order_by(diesel::dsl::count(song_history::id).desc())
+                .left_join(songs::table.on(songs::id.eq(song_history::song_id)))
+                .limit(limit)
+                .load(db)?
+        } else {
+            song_history::table
+                .group_by(song_history::song_id)
+                .select((song_history::song_id, diesel::dsl::count(song_history::id)))
+                .left_join(song_artists::table.on(song_artists::song_id.eq(song_history::song_id)))
+                .filter(song_artists::artist_id.eq(artist_id))
+                .order_by(diesel::dsl::count(song_history::id).desc())
+                .left_join(songs::table.on(songs::id.eq(song_history::song_id)))
+                .load(db)?
+        };
+
+    let song_play_counts: HashMap<i32, i64> = song_play_counts.into_iter().collect();
+    let top_song_ids: Vec<i32> = song_play_counts.iter().map(|(song_id, _)| *song_id).collect();
+
+    let top_songs: Vec<(Song, Option<Album>, Option<Artist>, Option<(i32, i32)>, Option<(i32, i32)>)>
+    = songs::table
+        .filter(songs::id.eq_any(top_song_ids))
+		.left_join(albums::table.on(songs::album_id.eq(albums::id.nullable())))
+		.left_join(song_artists::table.inner_join(artists::table).on(songs::id.eq(song_artists::song_id)))
+		.left_join(song_likes::table.on(songs::id.eq(song_likes::song_id).and(song_likes::user_id.eq(for_user_id))))
+		.left_join(song_dislikes::table.on(
+			songs::id.eq(song_dislikes::song_id).and(song_dislikes::user_id.eq(for_user_id))))
+		.select((
+			songs::all_columns,
+			albums::all_columns.nullable(),
+			artists::all_columns.nullable(),
+			song_likes::all_columns.nullable(),
+			song_dislikes::all_columns.nullable(),
+		))
+		.load(db)?;
+
+    let mut top_songs_map: HashMap<i32, (SongData, i64)> = HashMap::with_capacity(top_songs.len());
+
+	for (song, album, artist, like, dislike) in top_songs {
+		let song_id = song.id
+			.ok_or(ServerFnError::ServerError::<NoCustomError>("Song id not found in database".to_string()))?;
+
+		if let Some((stored_songdata, _)) = top_songs_map.get_mut(&song_id) {
+			// If the song is already in the map, update the artists
+			if let Some(artist) = artist {
+				stored_songdata.artists.push(artist);
+			}
+		} else {
+			let like_dislike = match (like, dislike) {
+				(Some(_), Some(_)) => Some((true, true)),
+				(Some(_), None) => Some((true, false)),
+				(None, Some(_)) => Some((false, true)),
+				_ => None,
+			};
+
+			let image_path = song.image_path.unwrap_or(
+				album.as_ref().map(|album| album.image_path.clone()).flatten()
+					.unwrap_or("/assets/images/placeholders/MusicPlaceholder.svg".to_string()));
+
+			let songdata = SongData {
+				id: song_id,
+				title: song.title,
+				artists: artist.map(|artist| vec![artist]).unwrap_or_default(),
+				album: album,
+				track: song.track,
+				duration: song.duration,
+				release_date: song.release_date,
+				song_path: song.storage_path,
+				image_path: image_path,
+				like_dislike: like_dislike,
+				added_date: song.added_date.unwrap(),
+			};
+
+			let plays = song_play_counts.get(&song_id)
+				.ok_or(ServerFnError::ServerError::<NoCustomError>("Song id not found in history counts".to_string()))?;
+
+			top_songs_map.insert(song_id, (songdata, *plays));
+		}
+	}
+
+    let mut top_songs: Vec<(SongData, i64)> = top_songs_map.into_iter().map(|(_, v)| v).collect();
+    top_songs.sort_by(|(_, plays1), (_, plays2)| plays2.cmp(plays1));
+    Ok(top_songs)
+}
+
+#[server(endpoint = "artists/albums")]
+pub async fn albums_by_artist(artist_id: i32, limit: Option<i64>) -> Result<Vec<AlbumData>, ServerFnError> {
+    use crate::schema::*;
+
+    let db = &mut get_db_conn();
+    let album_ids: Vec<i32> = 
+        if let Some(limit) = limit {
+            albums::table
+                .left_join(album_artists::table)
+                .filter(album_artists::artist_id.eq(artist_id))
+                .order_by(albums::release_date.desc())
+                .limit(limit)
+                .select(albums::id)
+                .load(db)?
+        } else {
+            albums::table
+                .left_join(album_artists::table)
+                .filter(album_artists::artist_id.eq(artist_id))
+                .order_by(albums::release_date.desc())
+                .select(albums::id)
+                .load(db)?
+        };
+
+    let mut albums_map: HashMap<i32, AlbumData> = HashMap::with_capacity(album_ids.len());
+
+    let album_artists: Vec<(Album, Artist)> = albums::table
+        .filter(albums::id.eq_any(album_ids))
+        .inner_join(album_artists::table.inner_join(artists::table).on(albums::id.eq(album_artists::album_id)))
+        .select((albums::all_columns, artists::all_columns))
+        .load(db)?;
+
+    for (album, artist) in album_artists {
+        let album_id = album.id
+            .ok_or(ServerFnError::ServerError::<NoCustomError>("Album id not found in database".to_string()))?;
+
+        if let Some(stored_album) = albums_map.get_mut(&album_id) {
+            stored_album.artists.push(artist);
+        } else {
+            let albumdata = AlbumData {
+                id: album_id,
+                title: album.title,
+                artists: vec![artist],
+                release_date: album.release_date,
+                image_path: album.image_path.unwrap_or("/assets/images/placeholders/MusicPlaceholder.svg".to_string()),
+            };
+
+            albums_map.insert(album_id, albumdata);
+        }
+    }
+
+    let mut albums: Vec<AlbumData> = albums_map.into_iter().map(|(_, v)| v).collect();
+    albums.sort_by(|a1, a2| a2.release_date.cmp(&a1.release_date));
+    Ok(albums)
+}

src/api/mod.rs

@@ -1,3 +1,5 @@
+pub mod artists;
+pub mod albums;
 pub mod history;
 pub mod profile;
 pub mod songs;

src/api/profile.rs

@@ -141,6 +141,7 @@ pub async fn recent_songs(for_user_id: i32, limit: Option<i64>) -> Result<Vec<(N
 				song_path: song.storage_path,
 				image_path: image_path,
 				like_dislike: like_dislike,
+				added_date: song.added_date.unwrap(),
 			};
 
 			history_songs.insert(song_id, (history.date, songdata));
@@ -239,6 +240,7 @@ pub async fn top_songs(for_user_id: i32, start_date: NaiveDateTime, end_date: Na
 				song_path: song.storage_path,
 				image_path: image_path,
 				like_dislike: like_dislike,
+				added_date: song.added_date.unwrap(),
 			};
 
 			let plays = history_counts.get(&song_id)

src/app.rs

@@ -8,6 +8,7 @@ use crate::pages::login::*;
 use crate::pages::signup::*;
 use crate::pages::profile::*;
 use crate::pages::albumpage::*;
+use crate::pages::artist::*;
 use crate::error_template::{AppError, ErrorTemplate};
 use crate::util::state::GlobalState;
 
@@ -19,6 +20,8 @@ pub fn App() -> impl IntoView {
     provide_context(GlobalState::new());
 
     let upload_open = create_rw_signal(false);
+    let add_artist_open = create_rw_signal(false);
+    let add_album_open = create_rw_signal(false);
 
     view! {
         // injects a stylesheet into the document <head>
@@ -39,13 +42,14 @@ pub fn App() -> impl IntoView {
         }>
             <main>
                 <Routes>
-                    <Route path="" view=move || view! { <HomePage upload_open=upload_open/> }>
+                    <Route path="" view=move || view! { <HomePage upload_open=upload_open add_artist_open=add_artist_open add_album_open=add_album_open/> }>
                         <Route path="" view=Dashboard />
                         <Route path="dashboard" view=Dashboard />
                         <Route path="search" view=Search />
                         <Route path="user/:id" view=Profile />
                         <Route path="user" view=Profile />
                         <Route path="album/:id" view=AlbumPage />
+                        <Route path="artist/:id" view=ArtistPage />
                     </Route>
                     <Route path="/login" view=Login />
                     <Route path="/signup" view=Signup />
@@ -60,14 +64,18 @@ use crate::components::dashboard::*;
 use crate::components::search::*;
 use crate::components::personal::Personal;
 use crate::components::upload::*;
+use crate::components::add_artist::AddArtist;
+use crate::components::add_album::AddAlbum;
 
 /// Renders the home page of your application.
 #[component]
-fn HomePage(upload_open: RwSignal<bool>) -> impl IntoView {
+fn HomePage(upload_open: RwSignal<bool>, add_artist_open: RwSignal<bool>, add_album_open: RwSignal<bool>) -> impl IntoView {
     view! {
         <div class="home-container">
             <Upload open=upload_open/>
-            <Sidebar upload_open=upload_open/>
+            <AddArtist open=add_artist_open/>
+            <AddAlbum open=add_album_open/>
+            <Sidebar upload_open=upload_open add_artist_open=add_artist_open add_album_open=add_album_open/>
             // This <Outlet /> will render the child route components
             <Outlet />
             <Personal />

src/components.rs

@@ -5,7 +5,10 @@ pub mod personal;
 pub mod dashboard_tile;
 pub mod dashboard_row;
 pub mod upload;
+pub mod upload_dropdown;
+pub mod add_artist;
+pub mod add_album;
 pub mod song_list;
 pub mod loading;
 pub mod error;
-pub mod album_info;
+pub mod album_info;

src/components/add_album.rs

@@ -0,0 +1,92 @@
+use leptos::*;
+use leptos::leptos_dom::log;
+use leptos_icons::*;
+use crate::api::albums::add_album;
+
+#[component]
+pub fn AddAlbumBtn(add_album_open: RwSignal<bool>) -> impl IntoView {
+    let open_dialog = move |_| {
+        add_album_open.set(true);
+    };
+    view! {
+        <button class="add-album-btn add-btns" on:click=open_dialog>
+            Add Album
+        </button>
+    }
+}
+#[component]
+pub fn AddAlbum(open: RwSignal<bool>) -> impl IntoView {
+    let album_title = create_rw_signal("".to_string());
+    let release_date = create_rw_signal("".to_string());
+    let image_path = create_rw_signal("".to_string());
+
+    let close_dialog = move |ev: leptos::ev::MouseEvent| {
+		ev.prevent_default();
+		open.set(false);
+	};
+
+    let on_add_album = move |ev: leptos::ev::SubmitEvent| {
+        ev.prevent_default();
+        let album_title_clone = album_title.get();
+        let release_date_clone = Some(release_date.get());
+        let image_path_clone = Some(image_path.get());
+
+        spawn_local(async move {
+            let add_album_result = add_album(album_title_clone, release_date_clone, image_path_clone).await;
+            if let Err(err) = add_album_result {
+                log!("Error adding album: {:?}", err);
+            } else if let Ok(album) = add_album_result {
+                log!("Added album: {:?}", album);
+                album_title.set("".to_string());
+                release_date.set("".to_string());
+                image_path.set("".to_string());
+            }
+        })
+    };
+
+    view! {
+        <Show when=open fallback=move|| view!{}>
+            <div class="add-album-container">
+                <div class="upload-header">
+                    <h1>Add Album</h1>
+                </div>
+                <div class="close-button" on:click=close_dialog><Icon icon=icondata::IoClose /></div>
+                <form class="create-album-form" action="POST" on:submit=on_add_album>
+                    <div class="input-bx">
+                        <input type="text" required class="text-input" 
+                            prop:value=album_title
+                            on:input=move |ev: leptos::ev::Event| {
+                                album_title.set(event_target_value(&ev));
+                            }        
+                            required 
+                         />
+                        <span>Album Title</span>
+                    </div>
+                    <div class="release-date">
+						<div class="left">
+							<span>Release</span>
+							<span>Date</span>
+						</div>
+						<input class="info" type="date"
+                            prop:value=release_date
+                            on:input=move |ev: leptos::ev::Event| {
+                                release_date.set(event_target_value(&ev));
+                            }
+                        />
+					</div>
+                    <div class="input-bx">
+                        <input type="text" class="text-input" 
+                            prop:value=image_path
+                            on:input=move |ev: leptos::ev::Event| {
+                                image_path.set(event_target_value(&ev));
+                            }        
+                         />
+                        <span>Image Path</span>
+                    </div>
+                    <button type="submit" class="upload-button">Add</button>
+                </form>
+            </div>
+        </Show>
+    }
+
+}

src/components/add_artist.rs

@@ -0,0 +1,62 @@
+use leptos::*;
+use leptos::leptos_dom::log;
+use leptos_icons::*;
+use crate::api::artists::add_artist;
+
+#[component]
+pub fn AddArtistBtn(add_artist_open: RwSignal<bool>) -> impl IntoView {
+    let open_dialog = move |_| {
+        add_artist_open.set(true);
+    };
+    view! {
+        <button class="add-artist-btn add-btns" on:click=open_dialog>
+            Add Artist
+        </button>
+    }
+}
+#[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!{}>
+            <div class="add-artist-container">
+                <div class="upload-header">
+                    <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" on:submit=on_add_artist>
+                    <div class="input-bx">
+                        <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>
+                </form>
+            </div>
+        </Show>
+    }
+}

src/components/sidebar.rs

@@ -1,13 +1,15 @@
 use leptos::leptos_dom::*;
 use leptos::*;
 use leptos_icons::*;
-use crate::components::upload::*;
+use crate::components::upload_dropdown::*;
 
 #[component]
-pub fn Sidebar(upload_open: RwSignal<bool>) -> impl IntoView {
+pub fn Sidebar(upload_open: RwSignal<bool>, add_artist_open: RwSignal<bool>, add_album_open: RwSignal<bool>) -> impl IntoView {
     use leptos_router::use_location;
     let location = use_location();
 
+    let dropdown_open = create_rw_signal(false);
+
     let on_dashboard = Signal::derive(
         move || location.pathname.get().starts_with("/dashboard") || location.pathname.get() == "/",
     );
@@ -19,8 +21,26 @@ pub fn Sidebar(upload_open: RwSignal<bool>) -> impl IntoView {
     view! {
         <div class="sidebar-container">
             <div class="sidebar-top-container">
+                <Show
+                    when=move || {upload_open.get() || add_artist_open.get() || add_album_open.get()}
+                    fallback=move || view! {}
+                >
+                    <div class="upload-overlay" on:click=move |_| {
+                        upload_open.set(false);
+                        add_artist_open.set(false);
+                        add_album_open.set(false);
+                    }></div>
+                </Show>
                 <h2 class="header">LibreTunes</h2>
-                <UploadBtn dialog_open=upload_open />
+                <div class="upload-dropdown-container">
+                    <UploadDropdownBtn dropdown_open=dropdown_open/>
+                    <Show
+                        when= move || dropdown_open()
+                        fallback=move || view! {}
+                    >
+                        <UploadDropdown dropdown_open=dropdown_open upload_open=upload_open add_artist_open=add_artist_open add_album_open=add_album_open/>
+                    </Show>
+                </div>
                 <a class="buttons" href="/dashboard" style={move || if on_dashboard() {"color: #e1e3e1"} else {""}} >
                     <Icon icon=icondata::OcHomeFillLg />
                     <h1>Dashboard</h1>

src/components/upload.rs

@@ -16,11 +16,8 @@ pub fn UploadBtn(dialog_open: RwSignal<bool>) -> impl IntoView {
 	};
 
 	view! {
-		<button class="upload-btn" on:click=open_dialog>
-			<div class="add-sign">
-				<Icon icon=icondata::IoAddSharp />
-			</div>
-			Upload
+		<button class="upload-btn add-btns" on:click=open_dialog>
+			Upload Song
 		</button>
 	}
 }

src/components/upload_dropdown.rs

@@ -0,0 +1,30 @@
+use leptos::*;
+use leptos_icons::*;
+use crate::components::upload::*;
+use crate::components::add_artist::*;
+use crate::components::add_album::*;
+
+#[component]
+pub fn UploadDropdownBtn(dropdown_open: RwSignal<bool>) -> impl IntoView {
+    let open_dropdown = move |_| {
+        dropdown_open.set(!dropdown_open.get());
+    };
+    view! {
+        <button class={move || if dropdown_open() {"upload-dropdown-btn upload-dropdown-btn-active"} else {"upload-dropdown-btn"}} on:click=open_dropdown>
+			<div class="add-sign">
+				<Icon icon=icondata::IoAddSharp />
+			</div>
+		</button>
+    }
+}
+
+#[component]
+pub fn UploadDropdown(dropdown_open: RwSignal<bool>, upload_open: RwSignal<bool>, add_artist_open: RwSignal<bool>, add_album_open: RwSignal<bool>) -> impl IntoView {
+    view! {
+        <div class="upload-dropdown" on:click=move |_| dropdown_open.set(false)>
+            <UploadBtn dialog_open=upload_open />
+            <AddArtistBtn add_artist_open=add_artist_open/>
+            <AddAlbumBtn add_album_open=add_album_open/>
+        </div>
+    }
+}

src/models.rs

@@ -652,6 +652,7 @@ impl Album {
 						song_path: song.storage_path,
 						image_path: image_path,
 						like_dislike: like_dislike,
+						added_date: song.added_date.unwrap(),
 					};
 		
 					album_songs.insert(song.id.unwrap(), songdata);
@@ -689,6 +690,9 @@ pub struct Song {
 	pub storage_path: String,
 	/// The path to the song's image file
 	pub image_path: Option<String>,
+	/// The date the song was added to the database
+	#[cfg_attr(feature = "ssr", diesel(deserialize_as = NaiveDate))]
+	pub added_date: Option<NaiveDate>,
 }
 
 impl Song {

src/pages.rs

@@ -2,3 +2,4 @@ pub mod login;
 pub mod signup;
 pub mod profile;
 pub mod albumpage;
+pub mod artist;

src/pages/artist.rs

@@ -0,0 +1,184 @@
+use leptos::*;
+use leptos_router::use_params_map;
+use leptos_icons::*;
+use server_fn::error::NoCustomError;
+
+use crate::models::Artist;
+
+use crate::components::loading::*;
+use crate::components::error::*;
+use crate::components::song_list::*;
+
+use crate::api::artists::*;
+
+#[component]
+pub fn ArtistPage() -> impl IntoView {
+    let params = use_params_map();
+
+    view! {
+        <div class="artist-container home-component">
+            {move || params.with(|params| {
+                match params.get("id").map(|id| id.parse::<i32>()) {
+                    Some(Ok(id)) => {
+                        view! { <ArtistIdProfile id /> }.into_view()
+                    },
+                    Some(Err(e)) => {
+                        view! {
+                            <Error<String>
+                                title="Invalid Artist ID"
+                                error=e.to_string()
+                            />
+                        }.into_view()
+                    },
+                    None => {
+                        view! {
+                            <Error<String>
+                                title="No Artist ID"
+                                message="You must specify an artist ID to view their page."
+                            />
+                        }.into_view()
+                    }
+                }
+            })}
+        </div>
+    }
+}
+
+#[component]
+fn ArtistIdProfile(#[prop(into)] id: MaybeSignal<i32>) -> impl IntoView {
+    let artist_info = create_resource(move || id.get(), move |id| {
+        get_artist_by_id(id)
+    });
+
+    let show_details = create_rw_signal(false);
+
+    view! {
+        <Transition
+            fallback=move || view! { <LoadingPage /> }
+        >
+            {move || artist_info.get().map(|artist| {
+                match artist {
+                    Ok(Some(artist)) => {
+                        show_details.set(true);
+                        view! { <ArtistProfile artist /> }.into_view()
+                    },
+                    Ok(None) => view! {
+                        <Error<String>
+                            title="Artist Not Found"
+                            message=format!("Artist with ID {} not found", id.get())
+                        />
+                    }.into_view(),
+                    Err(error) => view! {
+                        <ServerError<NoCustomError>
+                            title="Error Getting Artist"
+                            error
+                        />
+                    }.into_view(),
+                }
+            })}
+        </Transition>
+        <div hidden={move || !show_details.get()}>
+            <TopSongsByArtist artist_id=id />
+            <AlbumsByArtist artist_id=id />
+        </div>
+    }
+}
+
+#[component]
+fn ArtistProfile(artist: Artist) -> impl IntoView {
+    let artist_id = artist.id.unwrap();
+    let profile_image_path = format!("/assets/images/artist/{}.webp", artist_id);
+
+    leptos::logging::log!("Artist name: {}", artist.name);
+
+    view! {
+        <div class="artist-header">
+            <object class="artist-image" data={profile_image_path.clone()} type="image/webp">
+                <Icon class="artist-image" icon=icondata::CgProfile width="100" height="100"/>
+            </object>
+            <h1>{artist.name}</h1>
+        </div>
+    }
+}
+
+#[component]
+fn TopSongsByArtist(#[prop(into)] artist_id: MaybeSignal<i32>) -> impl IntoView {
+    let top_songs = create_resource(move || artist_id.get(), |artist_id| async move {
+        let top_songs = top_songs_by_artist(artist_id, Some(10), 1).await;
+
+        top_songs.map(|top_songs| {
+            top_songs.into_iter().map(|(song, plays)| {
+                let plays = if plays == 1 {
+                    "1 play".to_string()
+                } else {
+                    format!("{} plays", plays)
+                };
+
+                (song, plays)
+            }).collect::<Vec<_>>()
+        })
+    });
+
+    view! {
+        <h2>"Top Songs"</h2>
+        <Transition
+            fallback=move || view! { <Loading /> }
+        >
+            <ErrorBoundary
+                fallback=|errors| view! {
+                    {move || errors.get()
+                        .into_iter()
+                        .map(|(_, e)| view! { <p>{e.to_string()}</p>})
+                        .collect_view()
+                    }
+                }
+            >
+                {move || top_songs.get().map(|top_songs| {
+                    top_songs.map(|top_songs| {
+                        view! { <SongListExtra songs=top_songs /> }
+                    })
+                })}
+            </ErrorBoundary>
+        </Transition>
+    }
+}
+
+#[component]
+fn AlbumsByArtist(#[prop(into)] artist_id: MaybeSignal<i32>) -> impl IntoView {
+    use crate::components::dashboard_row::*;
+    use crate::components::dashboard_tile::*;
+
+    let albums = create_resource(move || artist_id.get(), |artist_id| async move {
+        let albums = albums_by_artist(artist_id, None).await;
+
+        albums.map(|albums| {
+            albums.into_iter().map(|album| {
+                album
+            }).collect::<Vec<_>>()
+        })
+    });
+
+    view! {
+        <Transition
+            fallback=move || view! { <Loading /> }
+        >
+            <ErrorBoundary
+                fallback=|errors| view! {
+                    {move || errors.get()
+                        .into_iter()
+                        .map(|(_, e)| view! { <p>{e.to_string()}</p>})
+                        .collect_view()
+                    }
+                }
+            >
+                {move || albums.get().map(|albums| {
+                    albums.map(|albums| {
+                        DashboardRow::new("Albums".to_string(), albums.into_iter().map(|album| {
+                            Box::new(album) as Box<dyn DashboardTile>
+                        }).collect())
+                    })
+                })}
+            </ErrorBoundary>
+        </Transition>
+    }
+}

src/schema.rs

@@ -96,6 +96,7 @@ diesel::table! {
         release_date -> Nullable<Date>,
         storage_path -> Varchar,
         image_path -> Nullable<Varchar>,
+        added_date -> Date,
     }
 }
 

src/songdata.rs

@@ -31,6 +31,8 @@ pub struct SongData {
 	pub image_path: String,
 	/// Whether the song is liked by the user
 	pub like_dislike: Option<(bool, bool)>,
+	/// The date the song was added to the database
+	pub added_date: NaiveDate,
 }
 
 
@@ -59,6 +61,8 @@ impl TryInto<Song> for SongData {
 			} else {
 				Some(self.image_path)
 			},
+
+			added_date: Some(self.added_date),
 		})
 	}
 }

src/upload.rs

@@ -253,6 +253,7 @@ pub async fn upload(data: MultipartData) -> Result<(), ServerFnError> {
 		release_date,
 		storage_path: file_name,
 		image_path: None,
+		added_date: None, // Defaults to current date
 	};
 
 	// Save the song to the database