refactor

web/src/components/RemoveAll.jsx

@@ -1,7 +1,9 @@
+import { Button, Dialog, DialogActions, DialogTitle } from '@material-ui/core'
 import ListItem from '@material-ui/core/ListItem'
 import ListItemIcon from '@material-ui/core/ListItemIcon'
 import ListItemText from '@material-ui/core/ListItemText'
 import DeleteIcon from '@material-ui/icons/Delete'
+import { useState } from 'react'
 import { torrentsHost } from 'utils/Hosts'
 
 const fnRemoveAll = () => {
@@ -29,13 +31,40 @@ const fnRemoveAll = () => {
 }
 
 export default function RemoveAll() {
-  return (
-    <ListItem button key='Remove all' onClick={fnRemoveAll}>
-      <ListItemIcon>
-        <DeleteIcon />
-      </ListItemIcon>
+  const [open, setOpen] = useState(false)
+  const closeDialog = () => setOpen(false)
+  const openDialog = () => setOpen(true)
 
-      <ListItemText primary='Remove all' />
-    </ListItem>
+  return (
+    <>
+      <ListItem button key='Remove all' onClick={openDialog}>
+        <ListItemIcon>
+          <DeleteIcon />
+        </ListItemIcon>
+
+        <ListItemText primary='Remove all' />
+      </ListItem>
+
+      <Dialog open={open} onClose={closeDialog}>
+        <DialogTitle>Delete Torrent?</DialogTitle>
+        <DialogActions>
+          <Button variant='outlined' onClick={closeDialog} color='primary'>
+            Cancel
+          </Button>
+
+          <Button
+            variant='contained'
+            onClick={() => {
+              fnRemoveAll()
+              closeDialog()
+            }}
+            color='primary'
+            autoFocus
+          >
+            Ok
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
   )
 }