refactor

web/src/components/App/Sidebar.jsx

@@ -0,0 +1,63 @@
+import { playlistAllHost } from 'utils/Hosts'
+import Divider from '@material-ui/core/Divider'
+import ListItem from '@material-ui/core/ListItem'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import ListItemText from '@material-ui/core/ListItemText'
+import { CreditCard as CreditCardIcon, List as ListIcon, Language as LanguageIcon } from '@material-ui/icons'
+import List from '@material-ui/core/List'
+import { useTranslation } from 'react-i18next'
+import useChangeLanguage from 'utils/useChangeLanguage'
+import AddDialogButton from 'components/Add'
+import SettingsDialog from 'components/Settings'
+import RemoveAll from 'components/RemoveAll'
+import AboutDialog from 'components/About'
+import CloseServer from 'components/CloseServer'
+
+import { AppSidebarStyle } from './style'
+
+export default function Sidebar({ isDrawerOpen, setIsDonationDialogOpen }) {
+  const [currentLang, changeLang] = useChangeLanguage()
+  const { t } = useTranslation()
+
+  return (
+    <AppSidebarStyle isDrawerOpen={isDrawerOpen}>
+      <List>
+        <AddDialogButton />
+        <RemoveAll />
+        <ListItem button component='a' target='_blank' href={playlistAllHost()}>
+          <ListItemIcon>
+            <ListIcon />
+          </ListItemIcon>
+          <ListItemText primary={t('PlaylistAll')} />
+        </ListItem>
+      </List>
+
+      <Divider />
+
+      <List>
+        <SettingsDialog />
+
+        <ListItem button onClick={() => (currentLang === 'en' ? changeLang('ru') : changeLang('en'))}>
+          <ListItemIcon>
+            <LanguageIcon />
+          </ListItemIcon>
+          <ListItemText primary={t('ChooseLanguage')} />
+        </ListItem>
+
+        <AboutDialog />
+        <CloseServer />
+      </List>
+
+      <Divider />
+
+      <List>
+        <ListItem button onClick={() => setIsDonationDialogOpen(true)}>
+          <ListItemIcon>
+            <CreditCardIcon />
+          </ListItemIcon>
+          <ListItemText primary={t('Donate')} />
+        </ListItem>
+      </List>
+    </AppSidebarStyle>
+  )
+}

web/src/components/App/index.jsx

@@ -0,0 +1,63 @@
+import CssBaseline from '@material-ui/core/CssBaseline'
+import { createMuiTheme, MuiThemeProvider } from '@material-ui/core'
+import { useEffect, useState } from 'react'
+import Typography from '@material-ui/core/Typography'
+import IconButton from '@material-ui/core/IconButton'
+import { Menu as MenuIcon, Close as CloseIcon } from '@material-ui/icons'
+import { echoHost } from 'utils/Hosts'
+import Div100vh from 'react-div-100vh'
+import axios from 'axios'
+import TorrentList from 'components/TorrentList'
+import DonateSnackbar from 'components/Donate'
+import DonateDialog from 'components/Donate/DonateDialog'
+
+import { AppWrapper, AppHeader } from './style'
+import Sidebar from './Sidebar'
+
+const baseTheme = createMuiTheme({
+  overrides: { MuiCssBaseline: { '@global': { html: { WebkitFontSmoothing: 'auto' } } } },
+  palette: { primary: { main: '#00a572' }, secondary: { main: '#ffa724' }, tonalOffset: 0.2 },
+})
+
+export default function App() {
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false)
+  const [isDonationDialogOpen, setIsDonationDialogOpen] = useState(false)
+  const [torrServerVersion, setTorrServerVersion] = useState('')
+
+  useEffect(() => {
+    axios.get(echoHost()).then(({ data }) => setTorrServerVersion(data))
+  }, [])
+
+  return (
+    <MuiThemeProvider theme={baseTheme}>
+      <CssBaseline />
+
+      {/* Div100vh - iOS WebKit fix  */}
+      <Div100vh>
+        <AppWrapper>
+          <AppHeader>
+            <IconButton
+              style={{ marginRight: '20px' }}
+              color='inherit'
+              onClick={() => setIsDrawerOpen(!isDrawerOpen)}
+              edge='start'
+            >
+              {isDrawerOpen ? <CloseIcon /> : <MenuIcon />}
+            </IconButton>
+
+            <Typography variant='h6' noWrap>
+              TorrServer {torrServerVersion}
+            </Typography>
+          </AppHeader>
+
+          <Sidebar isDrawerOpen={isDrawerOpen} setIsDonationDialogOpen={setIsDonationDialogOpen} />
+
+          <TorrentList />
+
+          {isDonationDialogOpen && <DonateDialog onClose={() => setIsDonationDialogOpen(false)} />}
+          {!JSON.parse(localStorage.getItem('snackbarIsClosed')) && <DonateSnackbar />}
+        </AppWrapper>
+      </Div100vh>
+    </MuiThemeProvider>
+  )
+}

web/src/components/App/style.js

@@ -0,0 +1,65 @@
+import styled, { css } from 'styled-components'
+
+export const AppWrapper = styled.div`
+  height: 100%;
+  background: #cbe8d9;
+  display: grid;
+  grid-template-columns: 60px 1fr;
+  grid-template-rows: 60px 1fr;
+  grid-template-areas:
+    'head head'
+    'side content';
+`
+
+export const CenteredGrid = styled.div`
+  height: 100%;
+  display: grid;
+  place-items: center;
+`
+
+export const AppHeader = styled.div`
+  background: #00a572;
+  color: rgba(0, 0, 0, 0.87);
+  grid-area: head;
+  display: flex;
+  align-items: center;
+  box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
+  padding: 0 24px;
+  z-index: 3;
+`
+export const AppSidebarStyle = styled.div`
+  ${({ isDrawerOpen }) => css`
+    grid-area: side;
+    width: ${isDrawerOpen ? '400%' : '100%'};
+    z-index: 2;
+    overflow-x: hidden;
+    transition: width 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;
+    border-right: 1px solid rgba(0, 0, 0, 0.12);
+    background: #eee;
+    white-space: nowrap;
+  `}
+`
+export const TorrentListWrapper = styled.div`
+  grid-area: content;
+  padding: 20px;
+  overflow: auto;
+
+  display: grid;
+  place-content: start;
+  grid-template-columns: repeat(auto-fit, minmax(max-content, 570px));
+  gap: 20px;
+
+  @media (max-width: 1260px), (max-height: 500px) {
+    padding: 10px;
+    gap: 15px;
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  @media (max-width: 1100px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (max-width: 700px) {
+    grid-template-columns: 1fr;
+  }
+`

web/src/components/TorrentList.jsx

@@ -4,7 +4,7 @@ import { torrentsHost } from 'utils/Hosts'
 import TorrentCard from 'components/TorrentCard'
 import axios from 'axios'
 import CircularProgress from '@material-ui/core/CircularProgress'
-import { TorrentListWrapper, CenteredGrid } from 'App/style'
+import { TorrentListWrapper, CenteredGrid } from 'components/App/style'
 import { useTranslation } from 'react-i18next'
 
 export default function TorrentList() {