2020-12-26 19:32:41 -08:00
|
|
|
import React from "react";
|
2021-01-14 01:14:07 -08:00
|
|
|
import { FormattedMessage, useIntl } from "react-intl";
|
2020-12-26 19:32:41 -08:00
|
|
|
import { useMutation, useQueryClient } from "react-query";
|
|
|
|
import { useSelector } from "react-redux";
|
2021-02-12 19:03:47 -08:00
|
|
|
import Client from "../../../../classes/client";
|
2021-02-13 10:52:15 -08:00
|
|
|
import { activeInstance, fetchMapById } from '../../../../redux/clientSlice';
|
|
|
|
import { SimpleDialogProps, handleOnMutationSuccess } from "..";
|
2021-02-04 14:34:13 -08:00
|
|
|
import BaseDialog from "../base-dialog";
|
2021-02-16 11:30:18 -08:00
|
|
|
import Alert from "@material-ui/lab/Alert";
|
|
|
|
import AlertTitle from "@material-ui/lab/AlertTitle";
|
2020-12-26 19:32:41 -08:00
|
|
|
|
|
|
|
|
2021-02-16 21:51:59 -08:00
|
|
|
const DeleteDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement => {
|
2021-01-27 17:27:19 -08:00
|
|
|
const intl = useIntl();
|
2021-02-06 22:51:04 -08:00
|
|
|
const client: Client = useSelector(activeInstance);
|
2020-12-27 18:18:57 -08:00
|
|
|
const queryClient = useQueryClient();
|
2021-02-16 22:47:09 -05:00
|
|
|
|
2021-02-06 22:51:04 -08:00
|
|
|
const mutation = useMutation((id: number) => client.deleteMap(id),
|
2020-12-27 18:18:57 -08:00
|
|
|
{
|
2021-02-06 22:51:04 -08:00
|
|
|
onSuccess: () => handleOnMutationSuccess(onClose, queryClient)
|
2020-12-27 18:18:57 -08:00
|
|
|
}
|
|
|
|
);
|
|
|
|
|
|
|
|
const handleOnClose = (): void => {
|
2021-02-06 22:51:04 -08:00
|
|
|
onClose();
|
2020-12-27 18:18:57 -08:00
|
|
|
};
|
|
|
|
|
|
|
|
const handleOnSubmit = (): void => {
|
|
|
|
mutation.mutate(mapId);
|
2020-12-26 19:32:41 -08:00
|
|
|
}
|
2020-12-27 18:18:57 -08:00
|
|
|
|
|
|
|
// Fetch map model to be rendered ...
|
|
|
|
const { map } = fetchMapById(mapId);
|
2021-02-16 22:47:09 -05:00
|
|
|
const alertTitle = `Delete ${map?.title}`;
|
2020-12-27 18:18:57 -08:00
|
|
|
return (
|
|
|
|
<div>
|
2021-01-13 19:46:45 -08:00
|
|
|
<BaseDialog
|
2021-02-05 16:35:39 -08:00
|
|
|
onClose={handleOnClose} onSubmit={handleOnSubmit}
|
2021-02-16 21:51:59 -08:00
|
|
|
title={intl.formatMessage({ id: "action.delete-title", defaultMessage: "Delete" })}
|
|
|
|
submitButton={intl.formatMessage({ id: "action.delete-title", defaultMessage: "Delete" })}>
|
2021-02-13 10:52:15 -08:00
|
|
|
|
2020-12-27 18:18:57 -08:00
|
|
|
<Alert severity="warning">
|
2021-02-16 22:47:09 -05:00
|
|
|
<AlertTitle>{alertTitle}</AlertTitle>
|
|
|
|
<FormattedMessage id="action.delete-description"
|
2021-02-16 21:51:59 -08:00
|
|
|
defaultMessage="Deleted mindmap can not be recovered. Do you want to continue ?." />
|
2020-12-27 18:18:57 -08:00
|
|
|
</Alert>
|
2021-02-13 10:52:15 -08:00
|
|
|
|
2021-01-13 19:46:45 -08:00
|
|
|
</BaseDialog>
|
2020-12-27 18:18:57 -08:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2021-02-16 22:47:09 -05:00
|
|
|
export default DeleteDialog;
|