Major early updates
This commit is contained in:
Connor Johnstone
214
frontend/src/pages/search.rs
Normal file
214
frontend/src/pages/search.rs
Normal file
@@ -0,0 +1,214 @@
|
||||
use web_sys::HtmlInputElement;
|
||||
use web_sys::HtmlSelectElement;
|
||||
use yew::prelude::*;
|
||||
|
||||
use crate::api;
|
||||
use crate::types::*;
|
||||
|
||||
enum SearchResults {
|
||||
None,
|
||||
Artists(Vec<ArtistResult>),
|
||||
Albums(Vec<AlbumResult>),
|
||||
Tracks(Vec<TrackResult>),
|
||||
}
|
||||
|
||||
#[function_component(SearchPage)]
|
||||
pub fn search_page() -> Html {
|
||||
let query = use_state(|| String::new());
|
||||
let search_type = use_state(|| "artist".to_string());
|
||||
let results = use_state(|| SearchResults::None);
|
||||
let error = use_state(|| None::<String>);
|
||||
let message = use_state(|| None::<String>);
|
||||
|
||||
let on_search = {
|
||||
let query = query.clone();
|
||||
let search_type = search_type.clone();
|
||||
let results = results.clone();
|
||||
let error = error.clone();
|
||||
Callback::from(move |e: SubmitEvent| {
|
||||
e.prevent_default();
|
||||
let q = (*query).clone();
|
||||
let st = (*search_type).clone();
|
||||
let results = results.clone();
|
||||
let error = error.clone();
|
||||
wasm_bindgen_futures::spawn_local(async move {
|
||||
error.set(None);
|
||||
match st.as_str() {
|
||||
"artist" => match api::search_artist(&q, 10).await {
|
||||
Ok(r) => results.set(SearchResults::Artists(r)),
|
||||
Err(e) => error.set(Some(e.0)),
|
||||
},
|
||||
"album" => match api::search_album(&q, None, 10).await {
|
||||
Ok(r) => results.set(SearchResults::Albums(r)),
|
||||
Err(e) => error.set(Some(e.0)),
|
||||
},
|
||||
"track" => match api::search_track(&q, None, 10).await {
|
||||
Ok(r) => results.set(SearchResults::Tracks(r)),
|
||||
Err(e) => error.set(Some(e.0)),
|
||||
},
|
||||
_ => {}
|
||||
}
|
||||
});
|
||||
})
|
||||
};
|
||||
|
||||
let on_add_artist = {
|
||||
let message = message.clone();
|
||||
let error = error.clone();
|
||||
move |name: String, mbid: String| {
|
||||
let message = message.clone();
|
||||
let error = error.clone();
|
||||
wasm_bindgen_futures::spawn_local(async move {
|
||||
match api::add_artist(&name, Some(&mbid)).await {
|
||||
Ok(s) => message.set(Some(format!(
|
||||
"Added {} tracks ({} already owned)",
|
||||
s.tracks_added, s.tracks_already_owned
|
||||
))),
|
||||
Err(e) => error.set(Some(e.0)),
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
let on_add_album = {
|
||||
let message = message.clone();
|
||||
let error = error.clone();
|
||||
move |artist: String, title: String, mbid: String| {
|
||||
let message = message.clone();
|
||||
let error = error.clone();
|
||||
wasm_bindgen_futures::spawn_local(async move {
|
||||
match api::add_album(&artist, &title, Some(&mbid)).await {
|
||||
Ok(s) => message.set(Some(format!(
|
||||
"Added {} tracks ({} already owned)",
|
||||
s.tracks_added, s.tracks_already_owned
|
||||
))),
|
||||
Err(e) => error.set(Some(e.0)),
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
html! {
|
||||
<div>
|
||||
<div class="page-header">
|
||||
<h2>{ "Search" }</h2>
|
||||
<p>{ "Find music on MusicBrainz and add to your library" }</p>
|
||||
</div>
|
||||
|
||||
<form onsubmit={on_search}>
|
||||
<div class="search-bar">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search..."
|
||||
value={(*query).clone()}
|
||||
oninput={let q = query.clone(); Callback::from(move |e: InputEvent| {
|
||||
let input: HtmlInputElement = e.target_unchecked_into();
|
||||
q.set(input.value());
|
||||
})}
|
||||
/>
|
||||
<select onchange={let st = search_type.clone(); Callback::from(move |e: Event| {
|
||||
let select: HtmlSelectElement = e.target_unchecked_into();
|
||||
st.set(select.value());
|
||||
})}>
|
||||
<option value="artist" selected=true>{ "Artist" }</option>
|
||||
<option value="album">{ "Album" }</option>
|
||||
<option value="track">{ "Track" }</option>
|
||||
</select>
|
||||
<button type="submit" class="btn btn-primary">{ "Search" }</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
if let Some(ref msg) = *message {
|
||||
<div class="card" style="border-color: var(--success);">
|
||||
<p>{ msg }</p>
|
||||
</div>
|
||||
}
|
||||
if let Some(ref err) = *error {
|
||||
<div class="card error">{ err }</div>
|
||||
}
|
||||
|
||||
{ match &*results {
|
||||
SearchResults::None => html! {},
|
||||
SearchResults::Artists(items) => html! {
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>{ "Name" }</th><th>{ "Country" }</th><th>{ "Type" }</th><th>{ "Score" }</th><th></th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{ for items.iter().map(|a| {
|
||||
let name = a.name.clone();
|
||||
let mbid = a.id.clone();
|
||||
let on_add = on_add_artist.clone();
|
||||
html! {
|
||||
<tr>
|
||||
<td>
|
||||
{ &a.name }
|
||||
if let Some(ref d) = a.disambiguation {
|
||||
<span class="text-muted text-sm">{ format!(" ({d})") }</span>
|
||||
}
|
||||
</td>
|
||||
<td>{ a.country.as_deref().unwrap_or("") }</td>
|
||||
<td>{ a.artist_type.as_deref().unwrap_or("") }</td>
|
||||
<td>{ a.score }</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-success"
|
||||
onclick={Callback::from(move |_| on_add(name.clone(), mbid.clone()))}>
|
||||
{ "Add" }
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
},
|
||||
SearchResults::Albums(items) => html! {
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>{ "Title" }</th><th>{ "Artist" }</th><th>{ "Year" }</th><th>{ "Score" }</th><th></th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{ for items.iter().map(|a| {
|
||||
let artist = a.artist.clone();
|
||||
let title = a.title.clone();
|
||||
let mbid = a.id.clone();
|
||||
let on_add = on_add_album.clone();
|
||||
html! {
|
||||
<tr>
|
||||
<td>{ &a.title }</td>
|
||||
<td>{ &a.artist }</td>
|
||||
<td>{ a.year.as_deref().unwrap_or("") }</td>
|
||||
<td>{ a.score }</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-success"
|
||||
onclick={Callback::from(move |_| on_add(artist.clone(), title.clone(), mbid.clone()))}>
|
||||
{ "Add" }
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
},
|
||||
SearchResults::Tracks(items) => html! {
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>{ "Title" }</th><th>{ "Artist" }</th><th>{ "Album" }</th><th>{ "Score" }</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{ for items.iter().map(|t| html! {
|
||||
<tr>
|
||||
<td>{ &t.title }</td>
|
||||
<td>{ &t.artist }</td>
|
||||
<td>{ t.album.as_deref().unwrap_or("") }</td>
|
||||
<td>{ t.score }</td>
|
||||
</tr>
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
},
|
||||
}}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user