52 lines
1.6 KiB
TypeScript
Raw Normal View History

2020-12-26 19:32:41 -08:00
import { Alert, AlertTitle } from "@material-ui/lab";
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";
2020-12-26 19:32:41 -08:00
2021-02-06 22:51:04 -08:00
const DeleteDialog = (props: SimpleDialogProps) => {
2021-01-27 17:27:19 -08:00
const intl = useIntl();
2021-02-06 22:51:04 -08:00
const { mapId, onClose } = props;
2021-01-27 17:27:19 -08:00
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-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);
return (
<div>
2021-01-13 19:46:45 -08:00
<BaseDialog
2021-02-05 16:35:39 -08:00
onClose={handleOnClose} onSubmit={handleOnSubmit}
2021-01-31 18:04:50 -08:00
title={intl.formatMessage({ id: "action.delete-title", defaultMessage: "Delete" })}
2021-01-27 17:27:19 -08:00
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-04 10:01:35 -08:00
<AlertTitle>Delete '{map?.title}'</AlertTitle>
2020-12-27 18:18:57 -08:00
<FormattedMessage id="action.delete-description" defaultMessage="Deleted mindmap can not be recovered. Do you want to continue ?." />
</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>
);
}
export default DeleteDialog;