Finish artist page

src/pages/artist.rs

@@ -3,8 +3,13 @@ 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 {
@@ -15,7 +20,7 @@ pub fn ArtistPage() -> impl IntoView {
             {move || params.with(|params| {
                 match params.get("id").map(|id| id.parse::<i32>()) {
                     Some(Ok(id)) => {
-                        view! { <ArtistProfile id /> }.into_view()
+                        view! { <ArtistIdProfile id /> }.into_view()
                     },
                     Some(Err(e)) => {
                         view! {
@@ -40,18 +45,23 @@ pub fn ArtistPage() -> impl IntoView {
 }
 
 #[component]
-fn ArtistProfile(#[prop(into)] id: MaybeSignal<i32>) -> impl IntoView {
+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)) => view! { <ArtistDetails artist /> }.into_view(),
+                    Ok(Some(artist)) => {
+                        show_details.set(true);
+                        view! { <ArtistProfile artist /> }.into_view()
+                    },
                     Ok(None) => view! {
                         <Error<String>
                             title="Artist Not Found"
@@ -67,14 +77,20 @@ fn ArtistProfile(#[prop(into)] id: MaybeSignal<i32>) -> impl IntoView {
                 }
             })}
         </Transition>
+        <div hidden={move || !show_details.get()}>
+            <TopSongsByArtist artist_id=id />
+            <AlbumsByArtist artist_id=id />
+        </div>
     }
 }
 
 #[component]
-fn ArtistDetails(artist: Artist) -> impl IntoView {
+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">
@@ -82,16 +98,25 @@ fn ArtistDetails(artist: Artist) -> impl IntoView {
             </object>
             <h1>{artist.name}</h1>
         </div>
-        <div class="artist-details">
-            <p>{artist.bio.unwrap_or_else(|| "No bio available.".to_string())}</p>
-        </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 {
-        top_songs_by_artist(artist_id, Some(10)).await
+        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! {
@@ -119,13 +144,21 @@ fn TopSongsByArtist(#[prop(into)] artist_id: MaybeSignal<i32>) -> impl IntoView
 }
 
 #[component]
-fn RelatedArtists(#[prop(into)] artist_id: MaybeSignal<i32>) -> impl IntoView {
+fn AlbumsByArtist(#[prop(into)] artist_id: MaybeSignal<i32>) -> impl IntoView {
-    let related_artists = create_resource(move || artist_id.get(), |artist_id| async move {
+    use crate::components::dashboard_row::*;
-        get_related_artists(artist_id).await
+    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! {
-        <h2>"Related Artists"</h2>
         <Transition
             fallback=move || view! { <Loading /> }
         >
@@ -138,41 +171,14 @@ fn RelatedArtists(#[prop(into)] artist_id: MaybeSignal<i32>) -> impl IntoView {
                     }
                 }
             >
-                {move || related_artists.get().map(|related_artists| {
+                {move || albums.get().map(|albums| {
-                    related_artists.map(|artists| {
+                    albums.map(|albums| {
-                        let tiles = artists.into_iter().map(|artist| {
+                        DashboardRow::new("Albums".to_string(), albums.into_iter().map(|album| {
-                            Box::new(artist) as Box<dyn DashboardTile>
+                            Box::new(album) as Box<dyn DashboardTile>
-                        }).collect::<Vec<_>>();
+                        }).collect())
-
-                        DashboardRow::new("Related Artists", tiles)
                     })
                 })}
             </ErrorBoundary>
         </Transition>
     }
 }
-
-pub async fn get_artist_by_id(artist_id: i32) -> Result<Option<Artist>, NoCustomError> {
-    // todo
-    Ok(Some(Artist {
-        id: Some(artist_id),
-        name: "Example Artist".to_string(),
-        bio: Some("A great artist!".to_string()),
-    }))
-}
-
-pub async fn get_related_artists(artist_id: i32) -> Result<Vec<Artist>, NoCustomError> {
-    // todo
-    Ok(vec![
-        Artist {
-            id: Some(artist_id + 1),
-            name: "Related Artist 1".to_string(),
-            bio: None,
-        },
-        Artist {
-            id: Some(artist_id + 2),
-            name: "Related Artist 2".to_string(),
-            bio: None,
-        },
-    ])
-}