Fix dialog bug.

This commit is contained in:
Paulo Gustavo Veiga 2020-12-27 18:18:57 -08:00
parent cbb53d244f
commit 73120ca91d
3 changed files with 594 additions and 520 deletions

View File

@ -1,4 +1,4 @@
import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from "@material-ui/core";
import { Button, DialogActions, DialogContent, DialogTitle } from "@material-ui/core";
import { Alert, AlertTitle } from "@material-ui/lab";
import React from "react";
import { FormattedMessage } from "react-intl";
@ -7,52 +7,44 @@ import { useSelector } from "react-redux";
import { Service } from "../../../services/Service";
import { activeInstance } from '../../../reducers/serviceSlice';
import { DialogProps, fetchMapById, handleOnMutationSuccess } from "./DialogCommon";
import Dialog from "./Dialog";
const DeleteDialog = (props: DialogProps) => {
const service: Service = useSelector(activeInstance);
const queryClient = useQueryClient();
const mutation = useMutation((id: number) => service.deleteMap(id),
{
onSuccess: () => handleOnMutationSuccess(props.onClose, queryClient)
}
);
const service: Service = useSelector(activeInstance);
const queryClient = useQueryClient();
const mutation = useMutation((id: number) => service.deleteMap(id),
{
onSuccess: () => handleOnMutationSuccess(props.onClose, queryClient)
}
);
const mapId = props.mapId;
const handleOnClose = (action: 'accept' | undefined): void => {
if (action == 'accept') {
mutation.mutate(mapId);
} else {
props.onClose();
}
};
const mapId = props.mapId;
const handleOnClose = (): void => {
props.onClose();
};
// Fetch map model to be rendered ...
const { map } = fetchMapById(mapId);
return (
<div>
<Dialog
open={props.open}
onClose={() => handleOnClose(undefined)} >
<DialogTitle><FormattedMessage id="action.delete-title" defaultMessage="Delete" /></DialogTitle>
<DialogContent>
<Alert severity="warning">
<AlertTitle>Delete '{map?.name}'</AlertTitle>
<FormattedMessage id="action.delete-description" defaultMessage="Deleted mindmap can not be recovered. Do you want to continue ?." />
</Alert>
</DialogContent>
<DialogActions>
<Button onClick={() => handleOnClose('accept')} variant="outlined" color="primary">
<FormattedMessage id="action.delete-button" defaultMessage="Delete" />
</Button>
<Button onClick={() => handleOnClose(undefined)} variant="outlined" color="secondary" autoFocus>
<FormattedMessage id="action.cancel-button" defaultMessage="Cancel" />
</Button>
</DialogActions>
</Dialog>
</div>
);
const handleOnSubmit = (): void => {
mutation.mutate(mapId);
}
// Fetch map model to be rendered ...
const { map } = fetchMapById(mapId);
return (
<div>
<Dialog
open={props.open} onClose={handleOnClose} onSubmit={handleOnSubmit}
title={{ id: "action.delete-title", defaultMessage: "Delete" }}
submitButton={{ id: "action.delete-title", defaultMessage: "Delete" }} >
export default DeleteDialog;
<Alert severity="warning">
<AlertTitle>Delete '{map?.name}'</AlertTitle>
<FormattedMessage id="action.delete-description" defaultMessage="Deleted mindmap can not be recovered. Do you want to continue ?." />
</Alert>
</Dialog>
</div>
);
}
export default DeleteDialog;

View File

@ -12,7 +12,7 @@ export type DialogProps = {
error?: ErrorInfo;
title: MessageDescriptor;
description:MessageDescriptor;
description?: MessageDescriptor;
submitButton: MessageDescriptor;
}
@ -22,6 +22,8 @@ const Dialog = (props: DialogProps) => {
const isOpen = props.open;
const handleOnSubmit = props.onSubmit;
const description = props.description ? (<DialogContentText>{intl.formatMessage(props.description)}</DialogContentText>) : null;
return (
<div>
<DialogUI
@ -33,15 +35,14 @@ const Dialog = (props: DialogProps) => {
</DialogTitle>
<DialogContent>
<DialogContentText>{intl.formatMessage(props.description)}</DialogContentText>
{description}
<GlobalError error={props.error} />
{props.children}
</DialogContent>
<DialogActions>
<Button color="primary" variant="outlined" type="submit">
<FormattedMessage id="action.rename-button" defaultMessage="Rename" />
{intl.formatMessage(props.title)}
</Button>
<Button color="secondary" variant="outlined" autoFocus onClick={handleOnClose}>

1017
yarn.lock

File diff suppressed because it is too large Load Diff