refactor

web/src/components/Add/index.jsx

@@ -15,7 +15,7 @@ export default function AddDialogButton({ isOffline, isLoading }) {
 
   return (
     <div>
-      <ListItem disabled={isOffline || isLoading} button key='Add' onClick={handleClickOpen}>
+      <ListItem disabled={isOffline || isLoading} button onClick={handleClickOpen}>
         <ListItemIcon>
           <LibraryAddIcon />
         </ListItemIcon>

web/src/components/Settings/SettingsDialog.jsx

@@ -1,9 +1,4 @@
 import axios from 'axios'
-import ListItem from '@material-ui/core/ListItem'
-import ListItemIcon from '@material-ui/core/ListItemIcon'
-import ListItemText from '@material-ui/core/ListItemText'
-import { useEffect, useState } from 'react'
-import SettingsIcon from '@material-ui/icons/Settings'
 import Dialog from '@material-ui/core/Dialog'
 import DialogTitle from '@material-ui/core/DialogTitle'
 import DialogContent from '@material-ui/core/DialogContent'
@@ -12,9 +7,10 @@ import DialogActions from '@material-ui/core/DialogActions'
 import Button from '@material-ui/core/Button'
 import { FormControlLabel, InputLabel, Select, Switch } from '@material-ui/core'
 import { settingsHost, setTorrServerHost, getTorrServerHost } from 'utils/Hosts'
+import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-const SettingsDialog = ({ handleClose }) => {
+export default function SettingsDialog({ handleClose }) {
   const { t } = useTranslation()
 
   const [settings, setSets] = useState({})
@@ -277,24 +273,3 @@ const SettingsDialog = ({ handleClose }) => {
     </Dialog>
   )
 }
-
-export default function Settings() {
-  const { t } = useTranslation()
-  const [open, setOpen] = useState(false)
-
-  const handleClickOpen = () => setOpen(true)
-  const handleClose = () => setOpen(false)
-
-  return (
-    <div>
-      <ListItem button key={t('Settings')} onClick={handleClickOpen}>
-        <ListItemIcon>
-          <SettingsIcon />
-        </ListItemIcon>
-        <ListItemText primary={t('Settings')} />
-      </ListItem>
-
-      {open && <SettingsDialog handleClose={handleClose} />}
-    </div>
-  )
-}

web/src/components/Settings/index.jsx

@@ -0,0 +1,29 @@
+import ListItem from '@material-ui/core/ListItem'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import ListItemText from '@material-ui/core/ListItemText'
+import { useState } from 'react'
+import SettingsIcon from '@material-ui/icons/Settings'
+import { useTranslation } from 'react-i18next'
+
+import SettingsDialog from './SettingsDialog'
+
+export default function SettingsDialogButton() {
+  const { t } = useTranslation()
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
+
+  const handleClickOpen = () => setIsDialogOpen(true)
+  const handleClose = () => setIsDialogOpen(false)
+
+  return (
+    <div>
+      <ListItem button onClick={handleClickOpen}>
+        <ListItemIcon>
+          <SettingsIcon />
+        </ListItemIcon>
+        <ListItemText primary={t('Settings')} />
+      </ListItem>
+
+      {isDialogOpen && <SettingsDialog handleClose={handleClose} />}
+    </div>
+  )
+}