aboutsummaryrefslogtreecommitdiff
path: root/modern/src/common/components/RemoveDialog.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src/common/components/RemoveDialog.jsx')
-rw-r--r--modern/src/common/components/RemoveDialog.jsx54
1 files changed, 54 insertions, 0 deletions
diff --git a/modern/src/common/components/RemoveDialog.jsx b/modern/src/common/components/RemoveDialog.jsx
new file mode 100644
index 00000000..9a2a27fb
--- /dev/null
+++ b/modern/src/common/components/RemoveDialog.jsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import Button from '@mui/material/Button';
+import { Snackbar } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import { useTranslation } from './LocalizationProvider';
+import { useCatch } from '../../reactHelper';
+import { snackBarDurationLongMs } from '../util/duration';
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ [theme.breakpoints.down('md')]: {
+ bottom: `calc(${theme.dimensions.bottomBarHeight}px + ${theme.spacing(1)})`,
+ },
+ },
+ button: {
+ height: 'auto',
+ marginTop: 0,
+ marginBottom: 0,
+ color: theme.palette.colors.negative,
+ },
+}));
+
+const RemoveDialog = ({
+ open, endpoint, itemId, onResult,
+}) => {
+ const classes = useStyles();
+ const t = useTranslation();
+
+ const handleRemove = useCatch(async () => {
+ const response = await fetch(`/api/${endpoint}/${itemId}`, { method: 'DELETE' });
+ if (response.ok) {
+ onResult(true);
+ } else {
+ throw Error(await response.text());
+ }
+ });
+
+ return (
+ <Snackbar
+ className={classes.root}
+ open={open}
+ autoHideDuration={snackBarDurationLongMs}
+ onClose={() => onResult(false)}
+ message={t('sharedRemoveConfirm')}
+ action={(
+ <Button size="small" className={classes.button} onClick={handleRemove}>
+ {t('sharedRemove')}
+ </Button>
+ )}
+ />
+ );
+};
+
+export default RemoveDialog;