achievements/crates/frontend/src/components/create_milestone.rs
2023-06-22 21:30:00 +02:00

128 lines
4.0 KiB
Rust

use super::error::error_provider::get_error_context;
use crate::services::rest::RestService;
use crate::services::rest::RestServiceError;
use common::CreateMilestone;
use wasm_bindgen::JsCast;
use wasm_bindgen_futures::spawn_local;
use web_sys::HtmlInputElement;
use yew::html;
use yew::Callback;
use yew::Component;
use yew::Html;
use yew::NodeRef;
use yew_router::scope_ext::RouterScopeExt;
#[derive(Debug)]
pub enum Msg {
Submit,
SubmitResult(Result<(), RestServiceError>),
UpdateInput(String),
}
#[derive(Default)]
pub struct CreateMilestoneComponent {
input_value: String,
input_ref: NodeRef,
/// Submitted and awaiting response
awaiting_response: bool,
}
impl Component for CreateMilestoneComponent {
type Message = Msg;
type Properties = ();
fn create(_ctx: &yew::Context<Self>) -> Self {
Self::default()
}
fn rendered(&mut self, _ctx: &yew::Context<Self>, first_render: bool) {
if first_render {
if let Some(input_element) = self.input_ref.get() {
let input_element = input_element
.dyn_into::<HtmlInputElement>()
.expect("Failed to cast input element");
input_element.focus().expect("Failed to focus input");
}
}
}
fn update(&mut self, ctx: &yew::Context<Self>, msg: Self::Message) -> bool {
match msg {
Msg::Submit => {
log::info!("Creating milestone");
let Ok(goal) = self.input_value.parse::<f64>() else { return false; };
let goal = goal as usize;
let payload = CreateMilestone { goal };
let link = ctx.link().clone();
spawn_local(async move {
let res = RestService::create_milestone(payload).await;
link.send_message(Msg::SubmitResult(res));
});
self.awaiting_response = true;
true
}
Msg::SubmitResult(result) => {
match result {
Ok(_response) => {
let nav = ctx.link().navigator().unwrap();
nav.push(&crate::Route::Admin)
}
Err(err) => {
if let Some(err_ctx) = get_error_context(ctx) {
err_ctx.dispatch(err.to_string());
}
}
};
self.awaiting_response = false;
true
}
Msg::UpdateInput(value) => {
self.input_value = value;
true
}
}
}
fn view(&self, ctx: &yew::Context<Self>) -> Html {
let link = ctx.link().clone();
let nav = ctx.link().navigator().unwrap();
let onclick_go_back = Callback::from(move |_: web_sys::MouseEvent| {
nav.push(&crate::Route::Admin);
});
let onsubmit = link.callback(|e: web_sys::SubmitEvent| {
e.prevent_default();
Msg::Submit
});
let oninput = link.callback(|e: web_sys::InputEvent| {
let Some(input) = e
.target()
.and_then(|t| t.dyn_into::<web_sys::HtmlInputElement>().ok()) else { unreachable!() };
Msg::UpdateInput(input.value())
});
html! {
<>
<div class="row">
<button onclick={onclick_go_back} class="button">{"Back"}</button>
</div>
<form {onsubmit} >
<hr />
<div class="row">
<div class="twelve columns">
<label for="milestoneInput">{"New milestone"}</label>
<input ref={self.input_ref.clone()} {oninput} value={self.input_value.to_string()} class="u-full-width" type="number" id="milestoneInput" />
</div>
</div>
<input class="button-primary" type="submit" value="Submit" disabled={self.awaiting_response} />
</form>
</>
}
}
}