refactor

2025-12-19 21:46:11 +05:00 · 2021-07-02 20:10:15 +03:00
parent dbfc1db5d2
commit 28c64e9307
4 changed files with 350 additions and 356 deletions
--- a/web/src/components/Settings/SettingsDialog.jsx
+++ b/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'
-
-const a11yProps = index => ({
-  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,
-}
+import defaultSettings from './defaultSettings'
+import { a11yProps, TabPanel } from './tabComponents'

 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
-      .post(settingsHost(), { action: 'get' })
-      .then(({ data }) => {
+    axios.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>
-                    <SettingLabel>Размер кеша</SettingLabel>
+                    <section>
+                      <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>
-                    <SettingLabel>Кеш предзагрузки</SettingLabel>
+                    <section>
+                      <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
--- a/web/src/components/Settings/defaultSettings.js
+++ b/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,
+}
--- a/web/src/components/Settings/style.js
+++ b/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;
--- a/web/src/components/Settings/tabComponents.jsx
+++ b/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>
+)