From 3912d62623449742ef14ba1147b1351022cb1798 Mon Sep 17 00:00:00 2001
From: Valentin Tolmer <valentin.tolmer@gmail.com>
Date: Tue, 12 Oct 2021 05:18:20 +0200
Subject: [PATCH] app: Disable buttons while the task is running

---
 app/src/components/add_group_member.rs       | 13 +++++++-----
 app/src/components/add_user_to_group.rs      | 13 +++++++-----
 app/src/components/create_group.rs           | 21 ++++++++++----------
 app/src/components/create_user.rs            | 12 ++++++-----
 app/src/components/delete_group.rs           | 14 +++++++------
 app/src/components/delete_user.rs            | 14 +++++++------
 app/src/components/remove_user_from_group.rs |  9 ++++++---
 app/src/components/user_details_form.rs      | 11 ++++++----
 8 files changed, 62 insertions(+), 45 deletions(-)

diff --git a/app/src/components/add_group_member.rs b/app/src/components/add_group_member.rs
index 1d17e40..db8a2c0 100644
--- a/app/src/components/add_group_member.rs
+++ b/app/src/components/add_group_member.rs
@@ -40,7 +40,7 @@ pub struct AddGroupMemberComponent {
     /// The currently selected user.
     selected_user: Option<User>,
     // Used to keep the request alive long enough.
-    _task: Option<FetchTask>,
+    task: Option<FetchTask>,
 }
 
 pub enum Msg {
@@ -60,7 +60,7 @@ pub struct Props {
 
 impl AddGroupMemberComponent {
     fn get_user_list(&mut self) {
-        self._task = HostService::graphql_query::<ListUserNames>(
+        self.task = HostService::graphql_query::<ListUserNames>(
             list_user_names::Variables { filters: None },
             self.link.callback(Msg::UserListResponse),
             "Error trying to fetch user list",
@@ -77,7 +77,7 @@ impl AddGroupMemberComponent {
             None => return Ok(false),
             Some(user) => user.id,
         };
-        self._task = HostService::graphql_query::<AddUserToGroup>(
+        self.task = HostService::graphql_query::<AddUserToGroup>(
             add_user_to_group::Variables {
                 user: user_id,
                 group: self.props.group_id,
@@ -97,10 +97,12 @@ impl AddGroupMemberComponent {
         match msg {
             Msg::UserListResponse(response) => {
                 self.user_list = Some(response?.users);
+                self.task = None;
             }
             Msg::SubmitAddMember => return self.submit_add_member(),
             Msg::AddMemberResponse(response) => {
                 response?;
+                self.task = None;
                 let user = self
                     .selected_user
                     .as_ref()
@@ -140,7 +142,7 @@ impl Component for AddGroupMemberComponent {
             props,
             user_list: None,
             selected_user: None,
-            _task: None,
+            task: None,
         };
         res.get_user_list();
         res
@@ -151,6 +153,7 @@ impl Component for AddGroupMemberComponent {
             Err(e) => {
                 ConsoleService::error(&e.to_string());
                 self.props.on_error.emit(e);
+                self.task = None;
                 true
             }
             Ok(b) => b,
@@ -185,7 +188,7 @@ impl Component for AddGroupMemberComponent {
               <div class="col-sm-1">
                 <button
                   class="btn btn-success"
-                  disabled=self.selected_user.is_none()
+                  disabled=self.selected_user.is_none() || self.task.is_some()
                   onclick=self.link.callback(|_| Msg::SubmitAddMember)>
                   {"Add"}
                 </button>
diff --git a/app/src/components/add_user_to_group.rs b/app/src/components/add_user_to_group.rs
index ff77cf3..24ef85c 100644
--- a/app/src/components/add_user_to_group.rs
+++ b/app/src/components/add_user_to_group.rs
@@ -52,7 +52,7 @@ pub struct AddUserToGroupComponent {
     /// The currently selected group.
     selected_group: Option<Group>,
     // Used to keep the request alive long enough.
-    _task: Option<FetchTask>,
+    task: Option<FetchTask>,
 }
 
 pub enum Msg {
@@ -72,7 +72,7 @@ pub struct Props {
 
 impl AddUserToGroupComponent {
     fn get_group_list(&mut self) {
-        self._task = HostService::graphql_query::<GetGroupList>(
+        self.task = HostService::graphql_query::<GetGroupList>(
             get_group_list::Variables,
             self.link.callback(Msg::GroupListResponse),
             "Error trying to fetch group list",
@@ -89,7 +89,7 @@ impl AddUserToGroupComponent {
             None => return Ok(false),
             Some(group) => group.id,
         };
-        self._task = HostService::graphql_query::<AddUserToGroup>(
+        self.task = HostService::graphql_query::<AddUserToGroup>(
             add_user_to_group::Variables {
                 user: self.props.username.clone(),
                 group: group_id,
@@ -109,10 +109,12 @@ impl AddUserToGroupComponent {
         match msg {
             Msg::GroupListResponse(response) => {
                 self.group_list = Some(response?.groups.into_iter().map(Into::into).collect());
+                self.task = None;
             }
             Msg::SubmitAddGroup => return self.submit_add_group(),
             Msg::AddGroupResponse(response) => {
                 response?;
+                self.task = None;
                 // Adding the user to the group succeeded, we're not in the process of adding a
                 // group anymore.
                 let group = self
@@ -154,7 +156,7 @@ impl Component for AddUserToGroupComponent {
             props,
             group_list: None,
             selected_group: None,
-            _task: None,
+            task: None,
         };
         res.get_group_list();
         res
@@ -164,6 +166,7 @@ impl Component for AddUserToGroupComponent {
             Err(e) => {
                 ConsoleService::error(&e.to_string());
                 self.props.on_error.emit(e);
+                self.task = None;
                 true
             }
             Ok(b) => b,
@@ -198,7 +201,7 @@ impl Component for AddUserToGroupComponent {
               <div class="col-sm-1">
                 <button
                   class="btn btn-success"
-                  disabled=self.selected_group.is_none()
+                  disabled=self.selected_group.is_none() || self.task.is_some()
                   onclick=self.link.callback(|_| Msg::SubmitAddGroup)>
                   {"Add"}
                 </button>
diff --git a/app/src/components/create_group.rs b/app/src/components/create_group.rs
index cbcf561..1e898ac 100644
--- a/app/src/components/create_group.rs
+++ b/app/src/components/create_group.rs
@@ -25,7 +25,7 @@ pub struct CreateGroupForm {
     form: yew_form::Form<CreateGroupModel>,
     error: Option<anyhow::Error>,
     // Used to keep the request alive long enough.
-    _task: Option<FetchTask>,
+    task: Option<FetchTask>,
 }
 
 #[derive(Model, Validate, PartialEq, Clone, Default)]
@@ -52,21 +52,18 @@ impl CreateGroupForm {
                 let req = create_group::Variables {
                     name: model.groupname,
                 };
-                self._task = Some(HostService::graphql_query::<CreateGroup>(
+                self.task = Some(HostService::graphql_query::<CreateGroup>(
                     req,
                     self.link.callback(Msg::CreateGroupResponse),
                     "Error trying to create group",
                 )?);
                 Ok(true)
             }
-            Msg::CreateGroupResponse(r) => {
-                match r {
-                    Err(e) => return Err(e),
-                    Ok(r) => ConsoleService::log(&format!(
-                        "Created group '{}'",
-                        &r.create_group.display_name
-                    )),
-                };
+            Msg::CreateGroupResponse(response) => {
+                ConsoleService::log(&format!(
+                    "Created group '{}'",
+                    &response?.create_group.display_name
+                ));
                 self.route_dispatcher
                     .send(RouteRequest::ChangeRoute(Route::from(AppRoute::ListGroups)));
                 Ok(true)
@@ -85,7 +82,7 @@ impl Component for CreateGroupForm {
             route_dispatcher: RouteAgentDispatcher::new(),
             form: yew_form::Form::<CreateGroupModel>::new(CreateGroupModel::default()),
             error: None,
-            _task: None,
+            task: None,
         }
     }
 
@@ -95,6 +92,7 @@ impl Component for CreateGroupForm {
             Err(e) => {
                 ConsoleService::error(&e.to_string());
                 self.error = Some(e);
+                self.task = None;
                 true
             }
             Ok(b) => b,
@@ -134,6 +132,7 @@ impl Component for CreateGroupForm {
                 <button
                   class="btn btn-primary col-sm-1 col-form-label"
                   type="button"
+                  disabled=self.task.is_some()
                   onclick=self.link.callback(|e: MouseEvent| {e.prevent_default(); Msg::SubmitForm})>
                   {"Submit"}
                 </button>
diff --git a/app/src/components/create_user.rs b/app/src/components/create_user.rs
index 0540f5f..4db5fb1 100644
--- a/app/src/components/create_user.rs
+++ b/app/src/components/create_user.rs
@@ -26,7 +26,7 @@ pub struct CreateUserForm {
     form: yew_form::Form<CreateUserModel>,
     error: Option<anyhow::Error>,
     // Used to keep the request alive long enough.
-    _task: Option<FetchTask>,
+    task: Option<FetchTask>,
 }
 
 #[derive(Model, Validate, PartialEq, Clone, Default)]
@@ -89,7 +89,7 @@ impl CreateUserForm {
                         lastName: to_option(model.last_name),
                     },
                 };
-                self._task = Some(HostService::graphql_query::<CreateUser>(
+                self.task = Some(HostService::graphql_query::<CreateUser>(
                     req,
                     self.link.callback(Msg::CreateUserResponse),
                     "Error trying to create user",
@@ -118,7 +118,7 @@ impl CreateUserForm {
                         username: user_id,
                         registration_start_request: message,
                     };
-                    self._task = Some(
+                    self.task = Some(
                         HostService::register_start(
                             req,
                             self.link
@@ -143,7 +143,7 @@ impl CreateUserForm {
                     server_data: response.server_data,
                     registration_upload: registration_upload.message,
                 };
-                self._task = Some(
+                self.task = Some(
                     HostService::register_finish(
                         req,
                         self.link.callback(Msg::RegistrationFinishResponse),
@@ -175,7 +175,7 @@ impl Component for CreateUserForm {
             route_dispatcher: RouteAgentDispatcher::new(),
             form: yew_form::Form::<CreateUserModel>::new(CreateUserModel::default()),
             error: None,
-            _task: None,
+            task: None,
         }
     }
 
@@ -185,6 +185,7 @@ impl Component for CreateUserForm {
             Err(e) => {
                 ConsoleService::error(&e.to_string());
                 self.error = Some(e);
+                self.task = None;
                 true
             }
             Ok(b) => b,
@@ -340,6 +341,7 @@ impl Component for CreateUserForm {
               <div class="form-group row">
                 <button
                   class="btn btn-primary col-sm-1 col-form-label"
+                  disabled=self.task.is_some()
                   type="submit"
                   onclick=self.link.callback(|e: MouseEvent| {e.prevent_default(); Msg::SubmitForm})>
                   {"Submit"}
diff --git a/app/src/components/delete_group.rs b/app/src/components/delete_group.rs
index fb914cf..fb7e3ff 100644
--- a/app/src/components/delete_group.rs
+++ b/app/src/components/delete_group.rs
@@ -22,7 +22,7 @@ pub struct DeleteGroup {
     props: DeleteGroupProps,
     node_ref: NodeRef,
     modal: Option<Modal>,
-    _task: Option<FetchTask>,
+    task: Option<FetchTask>,
 }
 
 #[derive(yew::Properties, Clone, PartialEq, Debug)]
@@ -49,7 +49,7 @@ impl Component for DeleteGroup {
             props,
             node_ref: NodeRef::default(),
             modal: None,
-            _task: None,
+            task: None,
         }
     }
 
@@ -70,7 +70,7 @@ impl Component for DeleteGroup {
             }
             Msg::ConfirmDeleteGroup => {
                 self.update(Msg::DismissModal);
-                self._task = HostService::graphql_query::<DeleteGroupQuery>(
+                self.task = HostService::graphql_query::<DeleteGroupQuery>(
                     delete_group_query::Variables {
                         group_id: self.props.group.id,
                     },
@@ -84,6 +84,7 @@ impl Component for DeleteGroup {
                 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 {
@@ -103,6 +104,7 @@ impl Component for DeleteGroup {
           <>
           <button
             class="btn btn-danger"
+            disabled=self.task.is_some()
             onclick=self.link.callback(|_| Msg::ClickedDeleteGroup)>
             <i class="bi-x-circle-fill" aria-label="Delete group" />
           </button>
@@ -117,15 +119,15 @@ impl DeleteGroup {
         html! {
           <div
             class="modal fade"
-            id="exampleModal".to_string() + &self.props.group.id.to_string()
+            id="deleteGroupModal".to_string() + &self.props.group.id.to_string()
             tabindex="-1"
-            aria-labelledby="exampleModalLabel"
+            aria-labelledby="deleteGroupModalLabel"
             aria-hidden="true"
             ref=self.node_ref.clone()>
             <div class="modal-dialog">
               <div class="modal-content">
                 <div class="modal-header">
-                  <h5 class="modal-title" id="exampleModalLabel">{"Delete group?"}</h5>
+                  <h5 class="modal-title" id="deleteGroupModalLabel">{"Delete group?"}</h5>
                   <button
                     type="button"
                     class="btn-close"
diff --git a/app/src/components/delete_user.rs b/app/src/components/delete_user.rs
index 48b0436..ebe7165 100644
--- a/app/src/components/delete_user.rs
+++ b/app/src/components/delete_user.rs
@@ -19,7 +19,7 @@ pub struct DeleteUser {
     props: DeleteUserProps,
     node_ref: NodeRef,
     modal: Option<Modal>,
-    _task: Option<FetchTask>,
+    task: Option<FetchTask>,
 }
 
 #[derive(yew::Properties, Clone, PartialEq, Debug)]
@@ -46,7 +46,7 @@ impl Component for DeleteUser {
             props,
             node_ref: NodeRef::default(),
             modal: None,
-            _task: None,
+            task: None,
         }
     }
 
@@ -67,7 +67,7 @@ impl Component for DeleteUser {
             }
             Msg::ConfirmDeleteUser => {
                 self.update(Msg::DismissModal);
-                self._task = HostService::graphql_query::<DeleteUserQuery>(
+                self.task = HostService::graphql_query::<DeleteUserQuery>(
                     delete_user_query::Variables {
                         user: self.props.username.clone(),
                     },
@@ -81,6 +81,7 @@ impl Component for DeleteUser {
                 self.modal.as_ref().expect("modal not initialized").hide();
             }
             Msg::DeleteUserResponse(response) => {
+                self.task = None;
                 if let Err(e) = response {
                     self.props.on_error.emit(e);
                 } else {
@@ -100,6 +101,7 @@ impl Component for DeleteUser {
           <>
           <button
             class="btn btn-danger"
+            disabled=self.task.is_some()
             onclick=self.link.callback(|_| Msg::ClickedDeleteUser)>
             <i class="bi-x-circle-fill" aria-label="Delete user" />
           </button>
@@ -114,16 +116,16 @@ impl DeleteUser {
         html! {
           <div
             class="modal fade"
-            id="exampleModal".to_string() + &self.props.username
+            id="deleteUserModal".to_string() + &self.props.username
             tabindex="-1"
             //role="dialog"
-            aria-labelledby="exampleModalLabel"
+            aria-labelledby="deleteUserModalLabel"
             aria-hidden="true"
             ref=self.node_ref.clone()>
             <div class="modal-dialog" /*role="document"*/>
               <div class="modal-content">
                 <div class="modal-header">
-                  <h5 class="modal-title" id="exampleModalLabel">{"Delete user?"}</h5>
+                  <h5 class="modal-title" id="deleteUserModalLabel">{"Delete user?"}</h5>
                   <button
                     type="button"
                     class="btn-close"
diff --git a/app/src/components/remove_user_from_group.rs b/app/src/components/remove_user_from_group.rs
index d449cb2..0defa0c 100644
--- a/app/src/components/remove_user_from_group.rs
+++ b/app/src/components/remove_user_from_group.rs
@@ -20,7 +20,7 @@ pub struct RemoveUserFromGroupComponent {
     link: ComponentLink<Self>,
     props: Props,
     // Used to keep the request alive long enough.
-    _task: Option<FetchTask>,
+    task: Option<FetchTask>,
 }
 
 #[derive(yew::Properties, Clone, PartialEq)]
@@ -39,7 +39,7 @@ pub enum Msg {
 impl RemoveUserFromGroupComponent {
     fn submit_remove_group(&mut self) -> Result<bool> {
         let group = self.props.group_id;
-        self._task = HostService::graphql_query::<RemoveUserFromGroup>(
+        self.task = HostService::graphql_query::<RemoveUserFromGroup>(
             remove_user_from_group::Variables {
                 user: self.props.username.clone(),
                 group,
@@ -60,6 +60,7 @@ impl RemoveUserFromGroupComponent {
             Msg::SubmitRemoveGroup => return self.submit_remove_group(),
             Msg::RemoveGroupResponse(response) => {
                 response?;
+                self.task = None;
                 self.props
                     .on_user_removed_from_group
                     .emit((self.props.username.clone(), self.props.group_id));
@@ -77,13 +78,14 @@ impl Component for RemoveUserFromGroupComponent {
         Self {
             link,
             props,
-            _task: None,
+            task: None,
         }
     }
 
     fn update(&mut self, msg: Self::Message) -> ShouldRender {
         match self.handle_msg(msg) {
             Err(e) => {
+                self.task = None;
                 self.props.on_error.emit(e);
                 true
             }
@@ -99,6 +101,7 @@ impl Component for RemoveUserFromGroupComponent {
         html! {
           <button
             class="btn btn-danger"
+            disabled=self.task.is_some()
             onclick=self.link.callback(|_| Msg::SubmitRemoveGroup)>
             <i class="bi-x-circle-fill" aria-label="Remove user from group" />
           </button>
diff --git a/app/src/components/user_details_form.rs b/app/src/components/user_details_form.rs
index 1ccaa7d..8f70b2b 100644
--- a/app/src/components/user_details_form.rs
+++ b/app/src/components/user_details_form.rs
@@ -37,7 +37,7 @@ pub struct UserDetailsForm {
     form: yew_form::Form<UserModel>,
     /// True if we just successfully updated the user, to display a success message.
     just_updated: bool,
-    _task: Option<FetchTask>,
+    task: Option<FetchTask>,
 }
 
 pub enum Msg {
@@ -73,7 +73,7 @@ impl Component for UserDetailsForm {
             form: yew_form::Form::new(model),
             props,
             just_updated: false,
-            _task: None,
+            task: None,
         }
     }
 
@@ -83,6 +83,7 @@ impl Component for UserDetailsForm {
             Err(e) => {
                 ConsoleService::error(&e.to_string());
                 self.props.on_error.emit(e);
+                self.task = None;
                 true
             }
             Ok(b) => b,
@@ -192,8 +193,9 @@ impl Component for UserDetailsForm {
               <button
                 type="button"
                 class="btn btn-primary col-sm-1 col-form-label"
+                disabled=self.task.is_some()
                 onclick=self.link.callback(|e: MouseEvent| {e.prevent_default(); Msg::SubmitClicked})>
-                <b>{"Update"}</b>
+                {"Update"}
               </button>
             </div>
           </form>
@@ -246,7 +248,7 @@ impl UserDetailsForm {
             return Ok(false);
         }
         let req = update_user::Variables { user: user_input };
-        self._task = Some(HostService::graphql_query::<UpdateUser>(
+        self.task = Some(HostService::graphql_query::<UpdateUser>(
             req,
             self.link.callback(Msg::UserUpdated),
             "Error trying to update user",
@@ -255,6 +257,7 @@ impl UserDetailsForm {
     }
 
     fn user_update_finished(&mut self, r: Result<update_user::ResponseData>) -> Result<bool> {
+        self.task = None;
         match r {
             Err(e) => return Err(e),
             Ok(_) => {