Add confirmmation modal for leaving admin team

src/shared/components/home/admin-settings.tsx

@@ -3,7 +3,7 @@ import { capitalizeFirstLetter, resourcesSettled } from "@utils/helpers";
 import { scrollMixin } from "../mixins/scroll-mixin";
 import { RouteDataResponse } from "@utils/types";
 import classNames from "classnames";
-import { Component, linkEvent } from "inferno";
+import { Component } from "inferno";
 import {
   BannedPersonsResponse,
   CreateCustomEmoji,
@@ -42,6 +42,7 @@ import { MediaUploads } from "../common/media-uploads";
 import { Paginator } from "../common/paginator";
 import { snapToTop } from "@utils/browser";
 import { isBrowser } from "@utils/browser";
+import ConfirmationModal from "../common/confirmation-modal";
 
 type AdminSettingsData = RouteDataResponse<{
   bannedRes: BannedPersonsResponse;
@@ -55,6 +56,7 @@ interface AdminSettingsState {
   instancesRes: RequestState<GetFederatedInstancesResponse>;
   bannedRes: RequestState<BannedPersonsResponse>;
   leaveAdminTeamRes: RequestState<GetSiteResponse>;
+  showConfirmLeaveAdmin: boolean;
   uploadsRes: RequestState<ListMediaResponse>;
   uploadsPage: number;
   loading: boolean;
@@ -82,6 +84,7 @@ export class AdminSettings extends Component<
     bannedRes: EMPTY_REQUEST,
     instancesRes: EMPTY_REQUEST,
     leaveAdminTeamRes: EMPTY_REQUEST,
+    showConfirmLeaveAdmin: false,
     uploadsRes: EMPTY_REQUEST,
     uploadsPage: 1,
     loading: false,
@@ -105,6 +108,9 @@ export class AdminSettings extends Component<
     this.handleDeleteEmoji = this.handleDeleteEmoji.bind(this);
     this.handleCreateEmoji = this.handleCreateEmoji.bind(this);
     this.handleUploadsPageChange = this.handleUploadsPageChange.bind(this);
+    this.handleToggleShowLeaveAdminConfirmation =
+      this.handleToggleShowLeaveAdminConfirmation.bind(this);
+    this.handleLeaveAdminTeam = this.handleLeaveAdminTeam.bind(this);
 
     // Only fetch the data if coming from another route
     if (FirstLoadService.isFirstLoad) {
@@ -340,6 +346,13 @@ export class AdminSettings extends Component<
           ))}
         </ul>
         {this.leaveAdmin()}
+        <ConfirmationModal
+          message="Are you sure you want to leave the admin team?"
+          loadingMessage="Leaving admin team"
+          onNo={this.handleToggleShowLeaveAdminConfirmation}
+          onYes={this.handleLeaveAdminTeam}
+          show={this.state.showConfirmLeaveAdmin}
+        />
       </>
     );
   }
@@ -347,7 +360,7 @@ export class AdminSettings extends Component<
   leaveAdmin() {
     return (
       <button
-        onClick={linkEvent(this, this.handleLeaveAdminTeam)}
+        onClick={this.handleToggleShowLeaveAdminConfirmation}
         className="btn btn-danger mb-2"
       >
         {this.state.leaveAdminTeamRes.state === "loading" ? (
@@ -432,14 +445,21 @@ export class AdminSettings extends Component<
     return editRes;
   }
 
-  async handleLeaveAdminTeam(i: AdminSettings) {
-    i.setState({ leaveAdminTeamRes: LOADING_REQUEST });
+  handleToggleShowLeaveAdminConfirmation() {
+    this.setState(prev => ({
+      showConfirmLeaveAdmin: !prev.showConfirmLeaveAdmin,
+    }));
+  }
+
+  async handleLeaveAdminTeam() {
+    this.setState({ leaveAdminTeamRes: LOADING_REQUEST });
     this.setState({
       leaveAdminTeamRes: await HttpService.client.leaveAdmin(),
     });
 
     if (this.state.leaveAdminTeamRes.state === "success") {
       toast(I18NextService.i18n.t("left_admin_team"));
+      this.setState({ showConfirmLeaveAdmin: false });
       this.context.router.history.replace("/");
     }
   }