AddDialog devided on two parts for correct unmounting after dialog is closed

web/src/App.js

@@ -27,10 +27,10 @@ const baseTheme = createMuiTheme({
 export default function App() {
     return (
         <React.Fragment>
-            <MuiThemeProvider theme={baseTheme}>
-                <CssBaseline />
-                <Appbar />
-            </MuiThemeProvider>
+          <MuiThemeProvider theme={baseTheme}>
+              <CssBaseline />
+              <Appbar />
+          </MuiThemeProvider>
         </React.Fragment>
     )
 }

web/src/components/Add.js

@@ -1,93 +0,0 @@
-import React from 'react'
-import Button from '@material-ui/core/Button'
-import TextField from '@material-ui/core/TextField'
-import Dialog from '@material-ui/core/Dialog'
-import DialogActions from '@material-ui/core/DialogActions'
-import DialogContent from '@material-ui/core/DialogContent'
-import DialogContentText from '@material-ui/core/DialogContentText'
-import DialogTitle from '@material-ui/core/DialogTitle'
-import ListItemIcon from '@material-ui/core/ListItemIcon'
-import LibraryAddIcon from '@material-ui/icons/LibraryAdd'
-import ListItemText from '@material-ui/core/ListItemText'
-import ListItem from '@material-ui/core/ListItem'
-import { torrentsHost } from '../utils/Hosts'
-
-export default function AddDialog() {
-    const [open, setOpen] = React.useState(false)
-
-    const [magnet, setMagnet] = React.useState('')
-    const [title, setTitle] = React.useState('')
-    const [poster, setPoster] = React.useState('')
-
-    const handleClickOpen = () => {
-        setOpen(true)
-    }
-
-    const inputMagnet = (event) => {
-        setMagnet(event.target.value)
-    }
-
-    const inputTitle = (event) => {
-        setTitle(event.target.value)
-    }
-
-    const inputPoster = (event) => {
-        setPoster(event.target.value)
-    }
-
-    const handleCloseSave = () => {
-        try {
-            if (!magnet) return
-
-            fetch(torrentsHost(), {
-                method: 'post',
-                body: JSON.stringify({
-                    action: 'add',
-                    link: magnet,
-                    title: title,
-                    poster: poster,
-                    save_to_db: true,
-                }),
-                headers: {
-                    Accept: 'application/json, text/plain, */*',
-                    'Content-Type': 'application/json',
-                },
-            })
-            setOpen(false)
-        } catch (e) {
-            console.log(e)
-        }
-    }
-
-    const handleClose = () => {
-        setOpen(false)
-    }
-
-    return (
-        <div>
-            <ListItem button key="Add" onClick={handleClickOpen}>
-                <ListItemIcon>
-                    <LibraryAddIcon />
-                </ListItemIcon>
-                <ListItemText primary="Add" />
-            </ListItem>
-            <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title" fullWidth={true}>
-                <DialogTitle id="form-dialog-title">Add Magnet</DialogTitle>
-                <DialogContent>
-                    <DialogContentText>Add magnet or link to torrent file:</DialogContentText>
-                    <TextField onChange={inputTitle} margin="dense" id="title" label="Title" type="text" fullWidth />
-                    <TextField onChange={inputPoster} margin="dense" id="poster" label="Poster" type="url" fullWidth />
-                    <TextField onChange={inputMagnet} autoFocus margin="dense" id="magnet" label="Magnet" type="text" fullWidth />
-                </DialogContent>
-                <DialogActions>
-                    <Button onClick={handleClose} color="primary" variant="outlined">
-                        Cancel
-                    </Button>
-                    <Button onClick={handleCloseSave} color="primary" variant="outlined">
-                        Add
-                    </Button>
-                </DialogActions>
-            </Dialog>
-        </div>
-    )
-}

web/src/components/Add/AddDialog.js

@@ -0,0 +1,64 @@
+import { useState } from 'react'
+import Button from '@material-ui/core/Button'
+import TextField from '@material-ui/core/TextField'
+import Dialog from '@material-ui/core/Dialog'
+import DialogActions from '@material-ui/core/DialogActions'
+import DialogContent from '@material-ui/core/DialogContent'
+import DialogTitle from '@material-ui/core/DialogTitle'
+import { torrentsHost } from '../../utils/Hosts'
+
+export default function AddDialog({ handleClose }) {
+    const [magnet, setMagnet] = useState('')
+    const [title, setTitle] = useState('')
+    const [poster, setPoster] = useState('')
+
+    const inputMagnet = ({ target: { value } }) => setMagnet(value)
+    const inputTitle = ({ target: { value } }) => setTitle(value)
+    const inputPoster = ({ target: { value } }) => setPoster(value)
+
+    const handleCloseSave = () => {
+        try {
+            if (!magnet) return
+
+            fetch(torrentsHost(), {
+                method: 'post',
+                body: JSON.stringify({
+                    action: 'add',
+                    link: magnet,
+                    title: title,
+                    poster: poster,
+                    save_to_db: true,
+                }),
+                headers: {
+                    Accept: 'application/json, text/plain, */*',
+                    'Content-Type': 'application/json',
+                },
+            })
+            handleClose()
+        } catch (e) {
+            console.log(e)
+        }
+    }
+
+    return (
+        <Dialog open onClose={handleClose} aria-labelledby="form-dialog-title" fullWidth>
+            <DialogTitle id="form-dialog-title">Add magnet or link to torrent file</DialogTitle>
+
+            <DialogContent>
+                <TextField onChange={inputTitle} margin="dense" id="title" label="Title" type="text" fullWidth />
+                <TextField onChange={inputPoster} margin="dense" id="poster" label="Poster" type="url" fullWidth />
+                <TextField onChange={inputMagnet} autoFocus margin="dense" id="magnet" label="Magnet or torrent file link" type="text" fullWidth />
+            </DialogContent>
+
+            <DialogActions>
+                <Button onClick={handleClose} color="primary" variant="outlined">
+                    Cancel
+				</Button>
+
+                <Button disabled={!magnet} onClick={handleCloseSave} color="primary" variant="outlined">
+                    Add
+				</Button>
+            </DialogActions>
+        </Dialog>
+    )
+}

web/src/components/Add/index.js

@@ -0,0 +1,26 @@
+import { useState } from 'react'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import LibraryAddIcon from '@material-ui/icons/LibraryAdd'
+import ListItemText from '@material-ui/core/ListItemText'
+import ListItem from '@material-ui/core/ListItem'
+import AddDialog from './AddDialog'
+
+export default function AddDialogButton() {
+    const [isDialogOpen, setIsDialogOpen] = useState(false)
+
+    const handleClickOpen = () => setIsDialogOpen(true)
+    const handleClose = () => setIsDialogOpen(false)
+
+    return (
+        <div>
+            <ListItem button key="Add" onClick={handleClickOpen}>
+                <ListItemIcon>
+                    <LibraryAddIcon />
+                </ListItemIcon>
+                <ListItemText primary="Add from link" />
+            </ListItem>
+
+            {isDialogOpen && <AddDialog handleClose={handleClose} />}
+        </div>
+    )
+}

web/src/components/Appbar.js

@@ -22,7 +22,7 @@ import PowerSettingsNewIcon from '@material-ui/icons/PowerSettingsNew'
 import TorrentList from './TorrentList'
 import { Box } from '@material-ui/core'
 
-import AddDialog from './Add'
+import AddDialogButton from './Add'
 import RemoveAll from './RemoveAll'
 import SettingsDialog from './Settings'
 import AboutDialog from './About'
@@ -160,7 +160,7 @@ export default function MiniDrawer() {
                 </div>
                 <Divider />
                 <List>
-                    <AddDialog />
+                    <AddDialogButton />
                     <UploadDialog />
                     <RemoveAll />
                     <ListItem button component="a" key="Playlist all torrents" target="_blank" href={playlistAllHost()}>

web/src/components/RemoveAll.js

@@ -5,30 +5,31 @@ import ListItemText from '@material-ui/core/ListItemText'
 import DeleteIcon from '@material-ui/icons/Delete'
 import { torrentsHost } from '../utils/Hosts'
 
-export default function RemoveAll() {
-    const fnRemoveAll = () => {
-        fetch(torrentsHost(), {
-            method: 'post',
-            body: JSON.stringify({ action: 'list' }),
-            headers: {
-                Accept: 'application/json, text/plain, */*',
-                'Content-Type': 'application/json',
-            },
-        })
-            .then((res) => res.json())
-            .then((json) => {
-                json.forEach((torr) => {
-                    fetch(torrentsHost(), {
-                        method: 'post',
-                        body: JSON.stringify({ action: 'rem', hash: torr.hash }),
-                        headers: {
-                            Accept: 'application/json, text/plain, */*',
-                            'Content-Type': 'application/json',
-                        },
-                    })
+const fnRemoveAll = () => {
+    fetch(torrentsHost(), {
+        method: 'post',
+        body: JSON.stringify({ action: 'list' }),
+        headers: {
+            Accept: 'application/json, text/plain, */*',
+            'Content-Type': 'application/json',
+        },
+    })
+        .then((res) => res.json())
+        .then((json) => {
+            json.forEach((torr) => {
+                fetch(torrentsHost(), {
+                    method: 'post',
+                    body: JSON.stringify({ action: 'rem', hash: torr.hash }),
+                    headers: {
+                        Accept: 'application/json, text/plain, */*',
+                        'Content-Type': 'application/json',
+                    },
                 })
             })
-    }
+        })
+}
+
+export default function RemoveAll() {
     return (
         <ListItem button key="Remove all" onClick={fnRemoveAll}>
             <ListItemIcon>