50 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-01 22:15:32 -08:00
import Client from "../../../../client";
2021-01-13 19:46:45 -08:00
import { activeInstance } from '../../../../reducers/serviceSlice';
2021-01-14 01:14:07 -08:00
import { DialogProps, fetchMapById, handleOnMutationSuccess } from "..";
2021-01-13 19:46:45 -08:00
import BaseDialog from "../action-dialog";
2020-12-26 19:32:41 -08:00
const DeleteDialog = (props: DialogProps) => {
2021-01-27 17:27:19 -08:00
const intl = useIntl();
2021-02-01 22:15:32 -08:00
const service: Client = useSelector(activeInstance);
2020-12-27 18:18:57 -08:00
const queryClient = useQueryClient();
const mutation = useMutation((id: number) => service.deleteMap(id),
{
onSuccess: () => handleOnMutationSuccess(props.onClose, queryClient)
}
);
const mapId = props.mapId;
const handleOnClose = (): void => {
props.onClose();
};
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
2020-12-27 18:18:57 -08:00
open={props.open} 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" })} >
2020-12-27 18:18:57 -08:00
<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>
2021-01-13 19:46:45 -08:00
</BaseDialog>
2020-12-27 18:18:57 -08:00
</div>
);
}
export default DeleteDialog;