From 8f2f3b3cd5aca9cab0a31ce7b4c1c2b306a4497a Mon Sep 17 00:00:00 2001
From: "D. Ror" <imnasnainaec@gmail.com>
Date: Wed, 20 Mar 2024 10:28:11 -0400
Subject: [PATCH] Unify loading button (#2962)

* Unify loading button

* Retract text prop changes (in other pr)
---
 src/components/Buttons/LoadingButton.tsx      | 14 +++++-----
 src/components/Dialogs/ButtonConfirmation.tsx |  7 +----
 .../Dialogs/CancelConfirmDialog.tsx           | 27 ++++++++++++-------
 .../Dialogs/DeleteEditTextDialog.tsx          |  7 +----
 src/components/Login/Login.tsx                |  6 +----
 src/components/ProjectExport/ExportButton.tsx |  1 -
 .../ProjectSchedule/DateScheduleEdit.tsx      |  2 --
 .../ProjectSchedule/DateSelector.tsx          |  2 --
 .../CharacterInventory/CharInv/index.tsx      |  2 +-
 .../MergeDupsStep/SaveDeferButtons.tsx        |  3 ---
 10 files changed, 28 insertions(+), 43 deletions(-)

diff --git a/src/components/Buttons/LoadingButton.tsx b/src/components/Buttons/LoadingButton.tsx
index 1f00dd5ee7..c3e39d631a 100644
--- a/src/components/Buttons/LoadingButton.tsx
+++ b/src/components/Buttons/LoadingButton.tsx
@@ -1,24 +1,24 @@
 import { Button, CircularProgress } from "@mui/material";
-import { ButtonProps } from "@mui/material/Button";
-import React, { ReactElement } from "react";
+import { type ButtonProps } from "@mui/material/Button";
+import { type ReactElement, type ReactNode } from "react";
 
 import { themeColors } from "types/theme";
 
 interface LoadingProps {
   buttonProps?: ButtonProps & { "data-testid"?: string };
-  children?: React.ReactNode;
+  children?: ReactNode;
   disabled?: boolean;
   loading?: boolean;
 }
 
-/**
- * A button that shows a spinning wheel when loading=true
- */
+/** A button that shows a spinning wheel when `loading = true`.
+ * Default button props: `color: "primary", variant: "contained"`. */
 export default function LoadingButton(props: LoadingProps): ReactElement {
   return (
     <Button
-      variant="contained"
+      color="primary"
       disabled={props.disabled || props.loading}
+      variant="contained"
       {...props.buttonProps}
     >
       {props.children}
diff --git a/src/components/Dialogs/ButtonConfirmation.tsx b/src/components/Dialogs/ButtonConfirmation.tsx
index c348b05ef5..e9ea3a16b0 100644
--- a/src/components/Dialogs/ButtonConfirmation.tsx
+++ b/src/components/Dialogs/ButtonConfirmation.tsx
@@ -61,12 +61,7 @@ export default function ButtonConfirmation(
         </Button>
         <LoadingButton
           loading={loading}
-          buttonProps={{
-            onClick: onConfirm,
-            color: "primary",
-            variant: "contained",
-            id: props.buttonIdConfirm,
-          }}
+          buttonProps={{ id: props.buttonIdConfirm, onClick: onConfirm }}
         >
           {t("buttons.confirm")}
         </LoadingButton>
diff --git a/src/components/Dialogs/CancelConfirmDialog.tsx b/src/components/Dialogs/CancelConfirmDialog.tsx
index e6daa72b13..42936c2abc 100644
--- a/src/components/Dialogs/CancelConfirmDialog.tsx
+++ b/src/components/Dialogs/CancelConfirmDialog.tsx
@@ -6,14 +6,16 @@ import {
   DialogContentText,
   DialogTitle,
 } from "@mui/material";
-import { ReactElement } from "react";
+import { type ReactElement, useState } from "react";
 import { useTranslation } from "react-i18next";
 
+import LoadingButton from "components/Buttons/LoadingButton";
+
 interface CancelConfirmDialogProps {
   open: boolean;
   textId: string;
   handleCancel: () => void;
-  handleConfirm: () => void;
+  handleConfirm: () => Promise<void> | void;
   buttonIdCancel?: string;
   buttonIdConfirm?: string;
 }
@@ -24,8 +26,14 @@ interface CancelConfirmDialogProps {
 export default function CancelConfirmDialog(
   props: CancelConfirmDialogProps
 ): ReactElement {
+  const [loading, setLoading] = useState(false);
   const { t } = useTranslation();
 
+  const onConfirm = async (): Promise<void> => {
+    setLoading(true);
+    await props.handleConfirm();
+  };
+
   return (
     <Dialog
       open={props.open}
@@ -43,21 +51,20 @@ export default function CancelConfirmDialog(
       </DialogContent>
       <DialogActions>
         <Button
-          onClick={props.handleCancel}
-          variant="outlined"
           color="primary"
+          disabled={loading}
           id={props.buttonIdCancel}
+          onClick={props.handleCancel}
+          variant="outlined"
         >
           {t("buttons.cancel")}
         </Button>
-        <Button
-          onClick={props.handleConfirm}
-          variant="contained"
-          color="primary"
-          id={props.buttonIdConfirm}
+        <LoadingButton
+          buttonProps={{ id: props.buttonIdConfirm, onClick: onConfirm }}
+          loading={loading}
         >
           {t("buttons.confirm")}
-        </Button>
+        </LoadingButton>
       </DialogActions>
     </Dialog>
   );
diff --git a/src/components/Dialogs/DeleteEditTextDialog.tsx b/src/components/Dialogs/DeleteEditTextDialog.tsx
index ab27fe933c..d50307e9f1 100644
--- a/src/components/Dialogs/DeleteEditTextDialog.tsx
+++ b/src/components/Dialogs/DeleteEditTextDialog.tsx
@@ -127,12 +127,7 @@ export default function DeleteEditTextDialog(
         </Button>
         <LoadingButton
           loading={loading}
-          buttonProps={{
-            onClick: onSave,
-            color: "primary",
-            variant: "contained",
-            id: props.buttonIdSave,
-          }}
+          buttonProps={{ id: props.buttonIdSave, onClick: onSave }}
         >
           {t(props.buttonTextIdSave ?? "buttons.save")}
         </LoadingButton>
diff --git a/src/components/Login/Login.tsx b/src/components/Login/Login.tsx
index f498f08f84..fa00ca5907 100644
--- a/src/components/Login/Login.tsx
+++ b/src/components/Login/Login.tsx
@@ -185,11 +185,7 @@ export default function Login(): ReactElement {
 
                 <Grid item>
                   <LoadingButton
-                    buttonProps={{
-                      color: "primary",
-                      id: LoginId.ButtonLogIn,
-                      type: "submit",
-                    }}
+                    buttonProps={{ id: LoginId.ButtonLogIn, type: "submit" }}
                     disabled={!isVerified}
                     loading={status === LoginStatus.InProgress}
                   >
diff --git a/src/components/ProjectExport/ExportButton.tsx b/src/components/ProjectExport/ExportButton.tsx
index 4b17e033f0..5b304500e2 100644
--- a/src/components/ProjectExport/ExportButton.tsx
+++ b/src/components/ProjectExport/ExportButton.tsx
@@ -45,7 +45,6 @@ export default function ExportButton(props: ExportButtonProps): ReactElement {
       buttonProps={{
         ...props.buttonProps,
         onClick: exportProj,
-        color: "primary",
         id: `project-${props.projectId}-export`,
       }}
     >
diff --git a/src/components/ProjectSettings/ProjectSchedule/DateScheduleEdit.tsx b/src/components/ProjectSettings/ProjectSchedule/DateScheduleEdit.tsx
index 5094f5a671..1ea9e8cc65 100644
--- a/src/components/ProjectSettings/ProjectSchedule/DateScheduleEdit.tsx
+++ b/src/components/ProjectSettings/ProjectSchedule/DateScheduleEdit.tsx
@@ -84,8 +84,6 @@ export default function DateScheduleEdit(
             buttonProps={{
               id: "DateSelectorSubmitButton",
               onClick: handleSubmit,
-              variant: "contained",
-              color: "primary",
             }}
           >
             {t("buttons.confirm")}
diff --git a/src/components/ProjectSettings/ProjectSchedule/DateSelector.tsx b/src/components/ProjectSettings/ProjectSchedule/DateSelector.tsx
index 7bcd1ec0e6..212c4ad9cb 100644
--- a/src/components/ProjectSettings/ProjectSchedule/DateSelector.tsx
+++ b/src/components/ProjectSettings/ProjectSchedule/DateSelector.tsx
@@ -88,8 +88,6 @@ export default function DateSelector(props: DateSelectorProps): ReactElement {
             buttonProps={{
               id: "DateSelectorSubmitButton",
               onClick: () => handleSubmit(),
-              variant: "contained",
-              color: "primary",
             }}
           >
             {t("buttons.confirm")}
diff --git a/src/goals/CharacterInventory/CharInv/index.tsx b/src/goals/CharacterInventory/CharInv/index.tsx
index 34a853cc27..0dcce33f16 100644
--- a/src/goals/CharacterInventory/CharInv/index.tsx
+++ b/src/goals/CharacterInventory/CharInv/index.tsx
@@ -95,7 +95,6 @@ export default function CharacterInventory(): ReactElement {
               loading={saveInProgress}
               buttonProps={{
                 id: buttonIdSave,
-                color: "primary",
                 onClick: () => save(),
                 style: { margin: theme.spacing(1) },
               }}
@@ -103,6 +102,7 @@ export default function CharacterInventory(): ReactElement {
               {t("buttons.save")}
             </LoadingButton>
             <Button
+              color="secondary"
               id={buttonIdCancel}
               variant="contained"
               onClick={() => setCancelDialogOpen(true)}
diff --git a/src/goals/MergeDuplicates/MergeDupsStep/SaveDeferButtons.tsx b/src/goals/MergeDuplicates/MergeDupsStep/SaveDeferButtons.tsx
index d1a4655989..449eae3baf 100644
--- a/src/goals/MergeDuplicates/MergeDupsStep/SaveDeferButtons.tsx
+++ b/src/goals/MergeDuplicates/MergeDupsStep/SaveDeferButtons.tsx
@@ -44,8 +44,6 @@ export default function SaveDeferButtons(): ReactElement {
         <LoadingButton
           loading={isSaving}
           buttonProps={{
-            color: "primary",
-            variant: "contained",
             style: { marginRight: theme.spacing(3) },
             onClick: saveContinue,
             title: t("mergeDups.helpText.saveAndContinue"),
@@ -58,7 +56,6 @@ export default function SaveDeferButtons(): ReactElement {
           loading={isDeferring}
           buttonProps={{
             color: "secondary",
-            variant: "contained",
             style: { marginRight: theme.spacing(3) },
             onClick: defer,
             title: t("mergeDups.helpText.defer"),