lan-party-backend/web/src/pages/users.rs

108 lines
4.4 KiB
Rust

use crate::{
clone, clone_cb,
components::{Button, Page, Table, TextInput},
util::{api_request, AutoCopy},
};
use lan_party_core::{user::User, PartyError};
use wasm_bindgen_futures::spawn_local;
use yew::prelude::*;
use yew_hooks::*;
#[function_component(UsersPage)]
pub fn users_page() -> Html {
let headers = vec!["Username".into(), "Score".into(), "".into()];
let score_edit: UseStateHandle<Option<usize>> = use_state(|| Option::None);
let current_score = use_state(|| String::new());
let users: UseAsyncHandle<Vec<User>, _> = use_async(async move {
api_request::<_, Vec<User>>("GET", "/user", Option::<()>::None)
.await
.map(|inner| inner.unwrap())
.map_err(|_| "failed to load users")
});
clone!(users; use_effect_with_deps(move |_| {
if users.data.is_none() {
users.run();
}
|| ()
}, ()));
let onchange = clone_cb!(current_score; move |value| current_score.set(value));
let oncheck = clone_cb!(score_edit, current_score, users; move |_| {
clone!(score_edit, users, current_score; {
spawn_local(async move {
if let (Some(score_edit), Some(users_inner)) = (*score_edit, &users.data) {
if let Ok(score) = current_score.parse() {
let user: &User = &users_inner[score_edit];
api_request::<_, ()>("POST", &format!("/user/{}/score", user.name), Some(score)).await.unwrap();
let mut cloned = users_inner.clone();
cloned[score_edit].score = score;
users.update(cloned);
}
}
score_edit.set(None);
});
});
});
let onedit = clone_cb!(current_score, score_edit, users; i => move |_| {
if let Some(users) = &users.data {
let user: &User = &users[i];
current_score.set(user.score.to_string());
score_edit.set(Some(i));
}
});
let ondelete = clone_cb!(users; i => move |_| {
clone!(users; {
spawn_local(async move {
if let Some(users_inner) = &users.data {
let user: &User = &users_inner[i];
api_request::<_, ()>("DELETE", &format!("/user/{}", user.name), Option::<()>::None).await.unwrap();
let cloned = users_inner.iter().cloned().filter(|u| u.name != user.name).collect();
users.update(cloned);
}
});
});
});
html! {
<Page>
<Table headers={headers.clone()} loading=false rows={vec![]}>
{ if let Some(users) = &users.data {
{users.iter().enumerate().map(move |(i, user)| html! {
<tr>
<td class="whitespace-nowrap px-3 py-4 text-sm text-slate-400">{&user.name}</td>
<td class="whitespace-nowrap px-3 text-sm text-slate-400">
{if Some(i) == *score_edit.clone() { html! {
<>
<span class="inline-block">
<TextInput
onchange={onchange.clone()}
value={(*current_score).clone()}
/>
</span>
<Button icon={"mdi-check"} onclick={oncheck.clone()} />
</>
}} else { html! {
<>
<span class="my-3 w-20">
{user.score}
</span>
<Button icon={"mdi-pencil"} onclick={onedit.clone()(i)} />
</>
}}}
</td>
<td class="whitespace-nowrap py-4 text-sm text-slate-400">
<Button icon={"mdi-delete"} onclick={ondelete.clone()(i)} />
</td>
</tr>
}).collect::<Html>()}
} else { html! { "Loading..." }}}
</Table>
</Page>
}
}