Add application delete confirm dialog
@@ -32,6 +32,10 @@ import { BasePage } from "../BasePage";
import CheckCircleIcon from "@material-ui/icons/CheckCircle";
import { ConfirmDialog } from "../../widgets/ConfirmDialog";
import { duplicateComponentAction } from "../../actions/component";
+import {
+ setSuccessNotificationAction,
+ setErrorNotificationAction
+} from "../../actions/notification";
const mapStateToProps = (state: RootState) => {
return {
@@ -112,6 +116,8 @@ interface State {
switchingIsEnabledApplicationId: string;
switchingIsEnabledTitle: string;
switchingIsEnabledContent: string;
+ isDeleteConfirmDialogOpen: boolean;
+ deletingApplicationId?: string;
}
class List extends React.PureComponent<Props, State> {
@@ -119,7 +125,9 @@ class List extends React.PureComponent<Props, State> {
isEnabledConfirmDialogOpen: false,
switchingIsEnabledApplicationId: "",
switchingIsEnabledTitle: "",
- switchingIsEnabledContent: ""
+ switchingIsEnabledContent: "",
+ isDeleteConfirmDialogOpen: false,
+ deletingApplicationId: ""
};
constructor(props: Props) {
@@ -193,6 +201,48 @@ class List extends React.PureComponent<Props, State> {
);
};
+ private closeConfirmDialog = () => {
+ this.setState({
+ isDeleteConfirmDialogOpen: false,
+ deletingApplicationId: undefined
+ });
+ };
+
+ private deleteConfirmedApplication = async () => {
+ const { dispatch } = this.props;
+ try {
+ await dispatch(
+ deleteApplicationAction(this.state.deletingApplicationId!)
+ );
+ await dispatch(
+ setSuccessNotificationAction("Successfully delete an application")
+ );
+ } catch {
+ dispatch(setErrorNotificationAction("Something wrong"));
+ }
+ };
+
+ private setDeletingApplicationAndConfirm = (applicationId: string) => {
+ this.setState({
+ isDeleteConfirmDialogOpen: true,
+ deletingApplicationId: applicationId
+ });
+ };
+
+ private renderDeleteConfirmDialog = () => {
+ const { isDeleteConfirmDialogOpen } = this.state;
+
+ return (
+ <ConfirmDialog
+ open={isDeleteConfirmDialogOpen}
+ onClose={this.closeConfirmDialog}
+ title="Are you sure to delete this Application?"
+ content="This application is already disabled. You will lost this application config, and this action is irrevocable."
+ onAgree={this.deleteConfirmedApplication}
+ />
+ );
+ };
+
public render() {
const { dispatch, applications, classes } = this.props;
const data = applications.map((application, index) => {
@@ -200,6 +250,10 @@ class List extends React.PureComponent<Props, State> {
this.showSwitchingIsEnabledDialog(application.get("id"));
};
+ const onDeleteClick = () => {
+ this.setDeletingApplicationAndConfirm(application.get("id"));
+ };
+
let status = null;
switch (application.get("status").get("status")) {
@@ -235,13 +289,7 @@ class List extends React.PureComponent<Props, State> {
<FileCopyIcon />
</IconButton>
- <IconButton
- aria-label="delete"
- onClick={() => {
- // TODO delete confirmation
- dispatch(deleteApplicationAction(application.get("id")));
- }}
- >
+ <IconButton aria-label="delete" onClick={onDeleteClick}>
<DeleteIcon />
</IconButton>
</>
@@ -270,6 +318,7 @@ class List extends React.PureComponent<Props, State> {
onCreate={this.onCreate}
createButtonText="Add An Application"
>
+ {this.renderDeleteConfirmDialog()}
{this.renderSwitchingIsEnabledConfirmDialog()}
<div className={classes.root}>
<MaterialTable
