frontend/src/group/RemoveGroup.tsx

86 lines
2.3 KiB
TypeScript

import {
Button,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
Theme,
Typography
} from "@mui/material";
import { makeStyles } from "@mui/styles";
import { useGroupAPI, useSnackbar } from "hooks";
import { Group } from "models";
const useStyles = makeStyles((theme: Theme) => {
return ({
contentPadding: {
paddingTop: theme.spacing(2),
paddingBottom: theme.spacing(2)
}
})
});
interface Props {
group: Group;
isDialogOpen: boolean;
closeDialogCallback: Function;
removeCallback?: Function;
}
export default function RemoveGroup(props: Props) {
const classes = useStyles();
// const navigate = useNavigate();
const groupAPI = useGroupAPI();
const { success, error, warning } = useSnackbar();
const { group, isDialogOpen, closeDialogCallback, removeCallback } = props;
let groupName = group.name();
const closeDialog = () => {
closeDialogCallback();
};
const submit = () => {
groupAPI
.removeGroup(group.id())
.then((_response: any) => {
success(groupName + " was successfully removed");
if (removeCallback) removeCallback()
})
.catch((err: any) => {
err ? warning(err) : error("Error occured while removing " + groupName);
closeDialog();
}).finally(() => {
closeDialogCallback()
});
};
return (
<Dialog
open={isDialogOpen}
fullWidth
onClose={closeDialog}
aria-labelledby="remove-group-label"
aria-describedby="remove-group-description">
<DialogTitle id="remove-group-title">Delete {groupName}?</DialogTitle>
<DialogContent className={classes.contentPadding}>
<Typography color="error" align="left" variant="subtitle1">
WARNING:
</Typography>
<Typography color="textPrimary" align="left" variant="body1">
Clicking 'Accept' will delete {groupName} for you and all other users.
</Typography>
<Typography color="textSecondary" align="left" variant="body2">
Devices will NOT be deleted in this process.
</Typography>
</DialogContent>
<DialogActions>
<Button onClick={closeDialog} color="primary">
Cancel
</Button>
<Button onClick={submit} color="primary">
Accept
</Button>
</DialogActions>
</Dialog>
);
}