refactor

web/src/components/Settings/SettingsDialog.jsx

@@ -1,13 +1,9 @@
 import axios from 'axios'
 import Dialog from '@material-ui/core/Dialog'
-import DialogTitle from '@material-ui/core/DialogTitle'
-import DialogContent from '@material-ui/core/DialogContent'
 import TextField from '@material-ui/core/TextField'
-import DialogActions from '@material-ui/core/DialogActions'
 import Button from '@material-ui/core/Button'
 import Checkbox from '@material-ui/core/Checkbox'
 import {
-  ButtonGroup,
   FormControlLabel,
   Grid,
   Input,
@@ -27,6 +23,7 @@ import Tabs from '@material-ui/core/Tabs'
 import Tab from '@material-ui/core/Tab'
 import SwipeableViews from 'react-swipeable-views'
 import { USBIcon, RAMIcon } from 'icons'
+import CircularProgress from '@material-ui/core/CircularProgress'
 
 import {
   FooterSection,
@@ -36,70 +33,31 @@ import {
   SecondarySettingsContent,
   StorageButton,
   StorageIconWrapper,
-  CacheSizeSettings,
   CacheStorageSelector,
-  CacheStorageSettings,
-  SettingSection,
-  SettingLabel,
   SettingSectionLabel,
   PreloadCachePercentage,
   cacheBeforeReaderColor,
   cacheAfterReaderColor,
+  Content,
 } from './style'
-
+import defaultSettings from './defaultSettings'
-const a11yProps = index => ({
+import { a11yProps, TabPanel } from './tabComponents'
-  id: `full-width-tab-${index}`,
-  'aria-controls': `full-width-tabpanel-${index}`,
-})
-
-const TabPanel = ({ children, value, index, ...other }) => (
-  <div role='tabpanel' hidden={value !== index} id={`full-width-tabpanel-${index}`} {...other}>
-    {value === index && <>{children}</>}
-  </div>
-)
-
-const defaultSettings = {
-  CacheSize: 96,
-  ReaderReadAHead: 95,
-  UseDisk: false,
-  UploadRateLimit: 0,
-  TorrentsSavePath: '',
-  ConnectionsLimit: 23,
-  DhtConnectionLimit: 500,
-  DisableDHT: false,
-  DisablePEX: false,
-  DisableTCP: false,
-  DisableUPNP: false,
-  DisableUTP: true,
-  DisableUpload: false,
-  DownloadRateLimit: 0,
-  EnableDebug: false,
-  EnableIPv6: false,
-  ForceEncrypt: false,
-  PeersListenPort: 0,
-  PreloadBuffer: false,
-  RemoveCacheOnDrop: false,
-  RetrackersMode: 1,
-  Strategy: 0,
-  TorrentDisconnectTimeout: 30,
-}
 
 export default function SettingsDialog({ handleClose }) {
   const { t } = useTranslation()
-
   const fullScreen = useMediaQuery('@media (max-width:930px)')
+  const { direction } = useTheme()
 
   const [settings, setSettings] = useState()
-  const [show, setShow] = useState(false)
+  const [selectedTab, setSelectedTab] = useState(0)
+  const [cacheSize, setCacheSize] = useState(32)
+  const [cachePercentage, setCachePercentage] = useState(40)
+  const [isProMode, setIsProMode] = useState(JSON.parse(localStorage.getItem('isProMode')) || false)
 
   useEffect(() => {
-    axios
+    axios.post(settingsHost(), { action: 'get' }).then(({ data }) => {
-      .post(settingsHost(), { action: 'get' })
-      .then(({ data }) => {
       setSettings({ ...data, CacheSize: data.CacheSize / (1024 * 1024) })
-        setShow(true)
     })
-      .catch(() => setShow(false))
   }, [])
 
   const handleSave = () => {
@@ -155,19 +113,6 @@ export default function SettingsDialog({ handleClose }) {
     RemoveCacheOnDrop,
   } = settings || {}
 
-  const updateSettings = newProps => setSettings({ ...settings, ...newProps })
-
-  const { direction } = useTheme()
-  const [selectedTab, setSelectedTab] = useState(0)
-
-  const handleChange = (_, newValue) => setSelectedTab(newValue)
-
-  const handleChangeIndex = index => setSelectedTab(index)
-
-  const [cacheSize, setCacheSize] = useState(32)
-  const [cachePercentage, setCachePercentage] = useState(40)
-  const [isProMode, setIsProMode] = useState(JSON.parse(localStorage.getItem('isProMode')) || false)
-
   useEffect(() => {
     if (!CacheSize || !ReaderReadAHead) return
 
@@ -175,21 +120,22 @@ export default function SettingsDialog({ handleClose }) {
     setCachePercentage(ReaderReadAHead)
   }, [CacheSize, ReaderReadAHead])
 
+  const updateSettings = newProps => setSettings({ ...settings, ...newProps })
+  const handleChange = (_, newValue) => setSelectedTab(newValue)
+  const handleChangeIndex = index => setSelectedTab(index)
   const handleBlur = ({ target: { value } }) => {
     if (value < 32) return setCacheSize(32)
     if (value > 20000) return setCacheSize(20000)
 
     setCacheSize(Math.round(value / 8) * 8)
   }
-
+  const handleInputChange = ({ target: { value } }) => setCacheSize(value === '' ? '' : Number(value))
-  const handleInputChange = ({ target: { value } }) => {
-    setCacheSize(value === '' ? '' : Number(value))
-  }
 
   return (
     <Dialog open onClose={handleClose} fullScreen={fullScreen} fullWidth maxWidth='md'>
       <Header>{t('Settings')}</Header>
 
+      <Content isLoading={!settings}>
         {settings ? (
           <>
             <AppBar position='static' color='default'>
@@ -217,7 +163,7 @@ export default function SettingsDialog({ handleClose }) {
             >
               <TabPanel value={selectedTab} index={0} dir={direction}>
                 <MainSettingsContent>
-                <CacheSizeSettings>
+                  <div>
                     <SettingSectionLabel>Настройки кеша</SettingSectionLabel>
 
                     <PreloadCachePercentage
@@ -230,6 +176,7 @@ export default function SettingsDialog({ handleClose }) {
                       <div>
                         {100 - cachePercentage}% ({Math.round((cacheSize / 100) * (100 - cachePercentage))} МБ)
                       </div>
+
                       <div>От кеша будет оставаться позади воспроизводимого блока</div>
                     </PreloadCacheValue>
 
@@ -237,13 +184,14 @@ export default function SettingsDialog({ handleClose }) {
                       <div>
                         {cachePercentage}% ({Math.round((cacheSize / 100) * cachePercentage)} МБ)
                       </div>
+
                       <div>От кеша будет спереди от воспроизводимого блока</div>
                     </PreloadCacheValue>
 
                     <Divider />
 
-                  <SettingSection>
+                    <section>
-                    <SettingLabel>Размер кеша</SettingLabel>
+                      <div>Размер кеша</div>
 
                       <Grid container spacing={2} alignItems='center'>
                         <Grid item xs>
@@ -269,10 +217,10 @@ export default function SettingsDialog({ handleClose }) {
                           </Grid>
                         )}
                       </Grid>
-                  </SettingSection>
+                    </section>
 
-                  <SettingSection>
+                    <section>
-                    <SettingLabel>Кеш предзагрузки</SettingLabel>
+                      <div>Кеш предзагрузки</div>
 
                       <Grid container spacing={2} alignItems='center'>
                         <Grid item xs>
@@ -289,7 +237,9 @@ export default function SettingsDialog({ handleClose }) {
                             <Input
                               value={cachePercentage}
                               margin='dense'
-                            onChange={({ target: { value } }) => setCachePercentage(value === '' ? '' : Number(value))}
+                              onChange={({ target: { value } }) =>
+                                setCachePercentage(value === '' ? '' : Number(value))
+                              }
                               onBlur={({ target: { value } }) => {
                                 if (value < 0) return setCachePercentage(0)
                                 if (value > 100) return setCachePercentage(100)
@@ -300,7 +250,7 @@ export default function SettingsDialog({ handleClose }) {
                           </Grid>
                         )}
                       </Grid>
-                  </SettingSection>
+                    </section>
 
                     <FormControlLabel
                       control={
@@ -308,10 +258,10 @@ export default function SettingsDialog({ handleClose }) {
                       }
                       label={t('PreloadBuffer')}
                     />
-                </CacheSizeSettings>
+                  </div>
 
                   {UseDisk ? (
-                  <CacheStorageSettings>
+                    <div>
                       <SettingSectionLabel>Место хранения кеша</SettingSectionLabel>
 
                       <div style={{ display: 'grid', gridAutoFlow: 'column' }}>
@@ -354,7 +304,7 @@ export default function SettingsDialog({ handleClose }) {
                         type='url'
                         fullWidth
                       />
-                  </CacheStorageSettings>
+                    </div>
                   ) : (
                     <CacheStorageSelector>
                       <SettingSectionLabel style={{ placeSelf: 'start', gridArea: 'label' }}>
@@ -456,7 +406,9 @@ export default function SettingsDialog({ handleClose }) {
                   />
                   <br />
                   <FormControlLabel
-                  control={<Switch checked={!DisableUpload} onChange={inputForm} id='DisableUpload' color='primary' />}
+                    control={
+                      <Switch checked={!DisableUpload} onChange={inputForm} id='DisableUpload' color='primary' />
+                    }
                     label={t('Upload')}
                   />
                   <br />
@@ -498,8 +450,9 @@ export default function SettingsDialog({ handleClose }) {
             </SwipeableViews>
           </>
         ) : (
-        'loading...'
+          <CircularProgress color='secondary' />
         )}
+      </Content>
       {/* <DialogTitle id='form-dialog-title'>{t('Settings')}</DialogTitle>
       <DialogContent>
         <TextField

web/src/components/Settings/defaultSettings.js

@@ -0,0 +1,25 @@
+export default {
+  CacheSize: 96,
+  ReaderReadAHead: 95,
+  UseDisk: false,
+  UploadRateLimit: 0,
+  TorrentsSavePath: '',
+  ConnectionsLimit: 23,
+  DhtConnectionLimit: 500,
+  DisableDHT: false,
+  DisablePEX: false,
+  DisableTCP: false,
+  DisableUPNP: false,
+  DisableUTP: true,
+  DisableUpload: false,
+  DownloadRateLimit: 0,
+  EnableDebug: false,
+  EnableIPv6: false,
+  ForceEncrypt: false,
+  PeersListenPort: 0,
+  PreloadBuffer: false,
+  RemoveCacheOnDrop: false,
+  RetrackersMode: 1,
+  Strategy: 0,
+  TorrentDisconnectTimeout: 30,
+}

web/src/components/Settings/style.js

@@ -21,6 +21,19 @@ export const Divider = styled.div`
   margin: 30px 0;
 `
 
+export const Content = styled.div`
+  ${({ isLoading }) => css`
+    background: #f1eff3;
+    min-height: 500px;
+
+    ${isLoading &&
+    css`
+      display: grid;
+      place-items: center;
+    `}
+  `}
+`
+
 export const PreloadCacheValue = styled.div`
   ${({ color }) => css`
     display: grid;
@@ -43,7 +56,6 @@ export const PreloadCacheValue = styled.div`
 `
 
 export const MainSettingsContent = styled.div`
-  min-height: 500px;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 40px;
@@ -54,7 +66,6 @@ export const MainSettingsContent = styled.div`
   }
 `
 export const SecondarySettingsContent = styled.div`
-  min-height: 500px;
   padding: 20px;
 `
 
@@ -101,7 +112,6 @@ export const StorageIconWrapper = styled.div`
   `}
 `
 
-export const CacheSizeSettings = styled.div``
 export const CacheStorageSelector = styled.div`
   display: grid;
   grid-template-rows: max-content 1fr;
@@ -115,10 +125,6 @@ export const CacheStorageSelector = styled.div`
   }
 `
 
-export const CacheStorageSettings = styled.div``
-
-export const SettingSection = styled.section``
-export const SettingLabel = styled.div``
 export const SettingSectionLabel = styled.div`
   font-size: 25px;
   padding-bottom: 20px;

web/src/components/Settings/tabComponents.jsx

@@ -0,0 +1,10 @@
+export const a11yProps = index => ({
+  id: `full-width-tab-${index}`,
+  'aria-controls': `full-width-tabpanel-${index}`,
+})
+
+export const TabPanel = ({ children, value, index, ...other }) => (
+  <div role='tabpanel' hidden={value !== index} id={`full-width-tabpanel-${index}`} {...other}>
+    {value === index && <>{children}</>}
+  </div>
+)