Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unify loading button #2962

Merged
merged 6 commits into from
Mar 20, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions src/components/Buttons/LoadingButton.tsx
Original file line number Diff line number Diff line change
@@ -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}
Expand Down
7 changes: 1 addition & 6 deletions src/components/Dialogs/ButtonConfirmation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
27 changes: 17 additions & 10 deletions src/components/Dialogs/CancelConfirmDialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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}
Expand All @@ -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>
);
Expand Down
7 changes: 1 addition & 6 deletions src/components/Dialogs/DeleteEditTextDialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 1 addition & 5 deletions src/components/Login/Login.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
>
Expand Down
1 change: 0 additions & 1 deletion src/components/ProjectExport/ExportButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,6 @@ export default function ExportButton(props: ExportButtonProps): ReactElement {
buttonProps={{
...props.buttonProps,
onClick: exportProj,
color: "primary",
id: `project-${props.projectId}-export`,
}}
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -84,8 +84,6 @@ export default function DateScheduleEdit(
buttonProps={{
id: "DateSelectorSubmitButton",
onClick: handleSubmit,
variant: "contained",
color: "primary",
}}
>
{t("buttons.confirm")}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -88,8 +88,6 @@ export default function DateSelector(props: DateSelectorProps): ReactElement {
buttonProps={{
id: "DateSelectorSubmitButton",
onClick: () => handleSubmit(),
variant: "contained",
color: "primary",
}}
>
{t("buttons.confirm")}
Expand Down
2 changes: 1 addition & 1 deletion src/goals/CharacterInventory/CharInv/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)}
Expand Down
3 changes: 0 additions & 3 deletions src/goals/MergeDuplicates/MergeDupsStep/SaveDeferButtons.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"),
Expand All @@ -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"),
Expand Down
Loading