Unify loading button (#2962)

* Unify loading button * Retract text prop changes (in other pr)
sillsdev · Mar 20, 2024 · 8f2f3b3 · 8f2f3b3
1 parent 301639a
commit 8f2f3b3
Show file tree

Hide file tree

Showing 10 changed files with 28 additions and 43 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -95,14 +95,14 @@ export default function CharacterInventory(): ReactElement {
               loading={saveInProgress}
               buttonProps={{
                 id: buttonIdSave,
-                color: "primary",
                 onClick: () => save(),
                 style: { margin: theme.spacing(1) },
               }}
             >
               {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
@@ -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"),