Major early updates

frontend/src/pages/artist.rs

@@ -0,0 +1,75 @@
+use yew::prelude::*;
+use yew_router::prelude::*;
+
+use crate::api;
+use crate::pages::Route;
+use crate::types::ArtistDetail;
+
+#[derive(Properties, PartialEq)]
+pub struct Props {
+    pub id: i32,
+}
+
+#[function_component(ArtistPage)]
+pub fn artist_page(props: &Props) -> Html {
+    let detail = use_state(|| None::<ArtistDetail>);
+    let error = use_state(|| None::<String>);
+    let id = props.id;
+
+    {
+        let detail = detail.clone();
+        let error = error.clone();
+        use_effect_with(id, move |id| {
+            let id = *id;
+            wasm_bindgen_futures::spawn_local(async move {
+                match api::get_artist(id).await {
+                    Ok(d) => detail.set(Some(d)),
+                    Err(e) => error.set(Some(e.0)),
+                }
+            });
+        });
+    }
+
+    if let Some(ref err) = *error {
+        return html! { <div class="error">{ format!("Error: {err}") }</div> };
+    }
+
+    let Some(ref d) = *detail else {
+        return html! { <p class="loading">{ "Loading..." }</p> };
+    };
+
+    html! {
+        <div>
+            <div class="page-header">
+                <h2>{ &d.artist.name }</h2>
+                if let Some(ref mbid) = d.artist.musicbrainz_id {
+                    <p class="text-muted text-sm">{ format!("MBID: {mbid}") }</p>
+                }
+            </div>
+
+            <h3 class="mb-1">{ format!("Albums ({})", d.albums.len()) }</h3>
+            if d.albums.is_empty() {
+                <p class="text-muted">{ "No albums found." }</p>
+            } else {
+                <table>
+                    <thead>
+                        <tr><th>{ "Name" }</th><th>{ "Year" }</th><th>{ "Genre" }</th></tr>
+                    </thead>
+                    <tbody>
+                        { for d.albums.iter().map(|a| html! {
+                            <tr>
+                                <td>
+                                    <Link<Route> to={Route::Album { id: a.id }}>
+                                        { &a.name }
+                                    </Link<Route>>
+                                </td>
+                                <td>{ a.year.map(|y| y.to_string()).unwrap_or_default() }</td>
+                                <td>{ a.genre.as_deref().unwrap_or("") }</td>
+                            </tr>
+                        })}
+                    </tbody>
+                </table>
+            }
+        </div>
+    }
+}