app: Migrate DeleteGroup to CommonComponent

This commit is contained in:
Valentin Tolmer 2021-10-31 22:27:55 +09:00 committed by nitnelave
parent 587d724c2c
commit 5523d38838

View File

@ -1,12 +1,13 @@
use crate::{ use crate::{
components::group_table::Group, components::group_table::Group,
infra::{api::HostService, modal::Modal}, infra::{
common_component::{CommonComponent, CommonComponentParts},
modal::Modal,
},
}; };
use anyhow::{Error, Result}; use anyhow::{Error, Result};
use graphql_client::GraphQLQuery; use graphql_client::GraphQLQuery;
use yew::prelude::*; use yew::prelude::*;
use yew::services::fetch::FetchTask;
use yewtil::NeqAssign;
#[derive(GraphQLQuery)] #[derive(GraphQLQuery)]
#[graphql( #[graphql(
@ -18,11 +19,9 @@ use yewtil::NeqAssign;
pub struct DeleteGroupQuery; pub struct DeleteGroupQuery;
pub struct DeleteGroup { pub struct DeleteGroup {
link: ComponentLink<Self>, common: CommonComponentParts<Self>,
props: DeleteGroupProps,
node_ref: NodeRef, node_ref: NodeRef,
modal: Option<Modal>, modal: Option<Modal>,
task: Option<FetchTask>,
} }
#[derive(yew::Properties, Clone, PartialEq, Debug)] #[derive(yew::Properties, Clone, PartialEq, Debug)]
@ -39,17 +38,51 @@ pub enum Msg {
DeleteGroupResponse(Result<delete_group_query::ResponseData>), DeleteGroupResponse(Result<delete_group_query::ResponseData>),
} }
impl CommonComponent<DeleteGroup> for DeleteGroup {
fn handle_msg(&mut self, msg: <Self as Component>::Message) -> Result<bool> {
match msg {
Msg::ClickedDeleteGroup => {
self.modal.as_ref().expect("modal not initialized").show();
}
Msg::ConfirmDeleteGroup => {
self.update(Msg::DismissModal);
self.common.call_graphql::<DeleteGroupQuery, _>(
delete_group_query::Variables {
group_id: self.common.props.group.id,
},
Msg::DeleteGroupResponse,
"Error trying to delete group",
);
}
Msg::DismissModal => {
self.modal.as_ref().expect("modal not initialized").hide();
}
Msg::DeleteGroupResponse(response) => {
self.common.cancel_task();
response?;
self.common
.props
.on_group_deleted
.emit(self.common.props.group.id);
}
}
Ok(true)
}
fn mut_common(&mut self) -> &mut CommonComponentParts<Self> {
&mut self.common
}
}
impl Component for DeleteGroup { impl Component for DeleteGroup {
type Message = Msg; type Message = Msg;
type Properties = DeleteGroupProps; type Properties = DeleteGroupProps;
fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self { fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
Self { Self {
link, common: CommonComponentParts::<Self>::create(props, link),
props,
node_ref: NodeRef::default(), node_ref: NodeRef::default(),
modal: None, modal: None,
task: None,
} }
} }
@ -64,39 +97,15 @@ impl Component for DeleteGroup {
} }
fn update(&mut self, msg: Self::Message) -> ShouldRender { fn update(&mut self, msg: Self::Message) -> ShouldRender {
match msg { CommonComponentParts::<Self>::update_and_report_error(
Msg::ClickedDeleteGroup => { self,
self.modal.as_ref().expect("modal not initialized").show(); msg,
} self.common.props.on_error.clone(),
Msg::ConfirmDeleteGroup => {
self.update(Msg::DismissModal);
self.task = HostService::graphql_query::<DeleteGroupQuery>(
delete_group_query::Variables {
group_id: self.props.group.id,
},
self.link.callback(Msg::DeleteGroupResponse),
"Error trying to delete group",
) )
.map_err(|e| self.props.on_error.emit(e))
.ok();
}
Msg::DismissModal => {
self.modal.as_ref().expect("modal not initialized").hide();
}
Msg::DeleteGroupResponse(response) => {
self.task = None;
if let Err(e) = response {
self.props.on_error.emit(e);
} else {
self.props.on_group_deleted.emit(self.props.group.id);
}
}
}
true
} }
fn change(&mut self, props: Self::Properties) -> ShouldRender { fn change(&mut self, props: Self::Properties) -> ShouldRender {
self.props.neq_assign(props) self.common.change(props)
} }
fn view(&self) -> Html { fn view(&self) -> Html {
@ -104,8 +113,8 @@ impl Component for DeleteGroup {
<> <>
<button <button
class="btn btn-danger" class="btn btn-danger"
disabled=self.task.is_some() disabled=self.common.is_task_running()
onclick=self.link.callback(|_| Msg::ClickedDeleteGroup)> onclick=self.common.callback(|_| Msg::ClickedDeleteGroup)>
<i class="bi-x-circle-fill" aria-label="Delete group" /> <i class="bi-x-circle-fill" aria-label="Delete group" />
</button> </button>
{self.show_modal()} {self.show_modal()}
@ -119,7 +128,7 @@ impl DeleteGroup {
html! { html! {
<div <div
class="modal fade" class="modal fade"
id="deleteGroupModal".to_string() + &self.props.group.id.to_string() id="deleteGroupModal".to_string() + &self.common.props.group.id.to_string()
tabindex="-1" tabindex="-1"
aria-labelledby="deleteGroupModalLabel" aria-labelledby="deleteGroupModalLabel"
aria-hidden="true" aria-hidden="true"
@ -132,24 +141,24 @@ impl DeleteGroup {
type="button" type="button"
class="btn-close" class="btn-close"
aria-label="Close" aria-label="Close"
onclick=self.link.callback(|_| Msg::DismissModal) /> onclick=self.common.callback(|_| Msg::DismissModal) />
</div> </div>
<div class="modal-body"> <div class="modal-body">
<span> <span>
{"Are you sure you want to delete group "} {"Are you sure you want to delete group "}
<b>{&self.props.group.display_name}</b>{"?"} <b>{&self.common.props.group.display_name}</b>{"?"}
</span> </span>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button <button
type="button" type="button"
class="btn btn-secondary" class="btn btn-secondary"
onclick=self.link.callback(|_| Msg::DismissModal)> onclick=self.common.callback(|_| Msg::DismissModal)>
{"Cancel"} {"Cancel"}
</button> </button>
<button <button
type="button" type="button"
onclick=self.link.callback(|_| Msg::ConfirmDeleteGroup) onclick=self.common.callback(|_| Msg::ConfirmDeleteGroup)
class="btn btn-danger">{"Yes, I'm sure"}</button> class="btn btn-danger">{"Yes, I'm sure"}</button>
</div> </div>
</div> </div>