app: Migrate UserDetailsForm to CommonComponent

This commit is contained in:
Valentin Tolmer 2021-10-31 23:03:15 +09:00 committed by nitnelave
parent ec6e1b0c09
commit 87ebee672f

View File

@ -1,11 +1,11 @@
use crate::{components::user_details::User, infra::api::HostService}; use crate::{
components::user_details::User,
infra::common_component::{CommonComponent, CommonComponentParts},
};
use anyhow::{bail, Error, Result}; use anyhow::{bail, Error, Result};
use graphql_client::GraphQLQuery; use graphql_client::GraphQLQuery;
use validator_derive::Validate; use validator_derive::Validate;
use yew::{ use yew::prelude::*;
prelude::*,
services::{fetch::FetchTask, ConsoleService},
};
use yew_form_derive::Model; use yew_form_derive::Model;
/// The fields of the form, with the editable details and the constraints. /// The fields of the form, with the editable details and the constraints.
@ -32,12 +32,10 @@ pub struct UpdateUser;
/// A [yew::Component] to display the user details, with a form allowing to edit them. /// A [yew::Component] to display the user details, with a form allowing to edit them.
pub struct UserDetailsForm { pub struct UserDetailsForm {
link: ComponentLink<Self>, common: CommonComponentParts<Self>,
props: Props,
form: yew_form::Form<UserModel>, form: yew_form::Form<UserModel>,
/// True if we just successfully updated the user, to display a success message. /// True if we just successfully updated the user, to display a success message.
just_updated: bool, just_updated: bool,
task: Option<FetchTask>,
} }
pub enum Msg { pub enum Msg {
@ -57,6 +55,20 @@ pub struct Props {
pub on_error: Callback<Error>, pub on_error: Callback<Error>,
} }
impl CommonComponent<UserDetailsForm> for UserDetailsForm {
fn handle_msg(&mut self, msg: <Self as Component>::Message) -> Result<bool> {
match msg {
Msg::Update => Ok(true),
Msg::SubmitClicked => self.submit_user_update_form(),
Msg::UserUpdated(response) => self.user_update_finished(response),
}
}
fn mut_common(&mut self) -> &mut CommonComponentParts<Self> {
&mut self.common
}
}
impl Component for UserDetailsForm { impl Component for UserDetailsForm {
type Message = Msg; type Message = Msg;
type Properties = Props; type Properties = Props;
@ -69,25 +81,19 @@ impl Component for UserDetailsForm {
last_name: props.user.last_name.clone(), last_name: props.user.last_name.clone(),
}; };
Self { Self {
link, common: CommonComponentParts::<Self>::create(props, link),
form: yew_form::Form::new(model), form: yew_form::Form::new(model),
props,
just_updated: false, just_updated: false,
task: None,
} }
} }
fn update(&mut self, msg: Self::Message) -> ShouldRender { fn update(&mut self, msg: Self::Message) -> ShouldRender {
self.just_updated = false; self.just_updated = false;
match self.handle_msg(msg) { CommonComponentParts::<Self>::update_and_report_error(
Err(e) => { self,
ConsoleService::error(&e.to_string()); msg,
self.props.on_error.emit(e); self.common.props.on_error.clone(),
self.task = None; )
true
}
Ok(b) => b,
}
} }
fn change(&mut self, _: Self::Properties) -> ShouldRender { fn change(&mut self, _: Self::Properties) -> ShouldRender {
@ -105,7 +111,7 @@ impl Component for UserDetailsForm {
{"User ID: "} {"User ID: "}
</label> </label>
<div class="col-8"> <div class="col-8">
<span id="userId" class="form-constrol-static">{&self.props.user.id}</span> <span id="userId" class="form-constrol-static">{&self.common.props.user.id}</span>
</div> </div>
</div> </div>
<div class="form-group row mb-3"> <div class="form-group row mb-3">
@ -121,7 +127,7 @@ impl Component for UserDetailsForm {
form=&self.form form=&self.form
field_name="email" field_name="email"
autocomplete="email" autocomplete="email"
oninput=self.link.callback(|_| Msg::Update) /> oninput=self.common.callback(|_| Msg::Update) />
<div class="invalid-feedback"> <div class="invalid-feedback">
{&self.form.field_message("email")} {&self.form.field_message("email")}
</div> </div>
@ -140,7 +146,7 @@ impl Component for UserDetailsForm {
form=&self.form form=&self.form
field_name="display_name" field_name="display_name"
autocomplete="name" autocomplete="name"
oninput=self.link.callback(|_| Msg::Update) /> oninput=self.common.callback(|_| Msg::Update) />
<div class="invalid-feedback"> <div class="invalid-feedback">
{&self.form.field_message("display_name")} {&self.form.field_message("display_name")}
</div> </div>
@ -157,7 +163,7 @@ impl Component for UserDetailsForm {
form=&self.form form=&self.form
field_name="first_name" field_name="first_name"
autocomplete="given-name" autocomplete="given-name"
oninput=self.link.callback(|_| Msg::Update) /> oninput=self.common.callback(|_| Msg::Update) />
<div class="invalid-feedback"> <div class="invalid-feedback">
{&self.form.field_message("first_name")} {&self.form.field_message("first_name")}
</div> </div>
@ -174,7 +180,7 @@ impl Component for UserDetailsForm {
form=&self.form form=&self.form
field_name="last_name" field_name="last_name"
autocomplete="family-name" autocomplete="family-name"
oninput=self.link.callback(|_| Msg::Update) /> oninput=self.common.callback(|_| Msg::Update) />
<div class="invalid-feedback"> <div class="invalid-feedback">
{&self.form.field_message("last_name")} {&self.form.field_message("last_name")}
</div> </div>
@ -186,15 +192,15 @@ impl Component for UserDetailsForm {
{"Creation date: "} {"Creation date: "}
</label> </label>
<div class="col-8"> <div class="col-8">
<span id="creationDate" class="form-constrol-static">{&self.props.user.creation_date.date().naive_local()}</span> <span id="creationDate" class="form-constrol-static">{&self.common.props.user.creation_date.date().naive_local()}</span>
</div> </div>
</div> </div>
<div class="form-group row justify-content-center"> <div class="form-group row justify-content-center">
<button <button
type="submit" type="submit"
class="btn btn-primary col-auto col-form-label" class="btn btn-primary col-auto col-form-label"
disabled=self.task.is_some() disabled=self.common.is_task_running()
onclick=self.link.callback(|e: MouseEvent| {e.prevent_default(); Msg::SubmitClicked})> onclick=self.common.callback(|e: MouseEvent| {e.prevent_default(); Msg::SubmitClicked})>
{"Update"} {"Update"}
</button> </button>
</div> </div>
@ -208,21 +214,13 @@ impl Component for UserDetailsForm {
} }
impl UserDetailsForm { impl UserDetailsForm {
fn handle_msg(&mut self, msg: <Self as Component>::Message) -> Result<bool> {
match msg {
Msg::Update => Ok(true),
Msg::SubmitClicked => self.submit_user_update_form(),
Msg::UserUpdated(response) => self.user_update_finished(response),
}
}
fn submit_user_update_form(&mut self) -> Result<bool> { fn submit_user_update_form(&mut self) -> Result<bool> {
if !self.form.validate() { if !self.form.validate() {
bail!("Invalid inputs"); bail!("Invalid inputs");
} }
let base_user = &self.props.user; let base_user = &self.common.props.user;
let mut user_input = update_user::UpdateUserInput { let mut user_input = update_user::UpdateUserInput {
id: self.props.user.id.clone(), id: self.common.props.user.id.clone(),
email: None, email: None,
displayName: None, displayName: None,
firstName: None, firstName: None,
@ -248,28 +246,28 @@ impl UserDetailsForm {
return Ok(false); return Ok(false);
} }
let req = update_user::Variables { user: user_input }; let req = update_user::Variables { user: user_input };
self.task = Some(HostService::graphql_query::<UpdateUser>( self.common.call_graphql::<UpdateUser, _>(
req, req,
self.link.callback(Msg::UserUpdated), Msg::UserUpdated,
"Error trying to update user", "Error trying to update user",
)?); );
Ok(false) Ok(false)
} }
fn user_update_finished(&mut self, r: Result<update_user::ResponseData>) -> Result<bool> { fn user_update_finished(&mut self, r: Result<update_user::ResponseData>) -> Result<bool> {
self.task = None; self.common.cancel_task();
match r { match r {
Err(e) => return Err(e), Err(e) => return Err(e),
Ok(_) => { Ok(_) => {
let model = self.form.model(); let model = self.form.model();
self.props.user = User { self.common.props.user = User {
id: self.props.user.id.clone(), id: self.common.props.user.id.clone(),
email: model.email, email: model.email,
display_name: model.display_name, display_name: model.display_name,
first_name: model.first_name, first_name: model.first_name,
last_name: model.last_name, last_name: model.last_name,
creation_date: self.props.user.creation_date, creation_date: self.common.props.user.creation_date,
groups: self.props.user.groups.clone(), groups: self.common.props.user.groups.clone(),
}; };
self.just_updated = true; self.just_updated = true;
} }