From 6dbd3aec4d31879f0543834fa19cfa3dfb501bfd Mon Sep 17 00:00:00 2001 From: Daniel Shleifman Date: Wed, 2 Jun 2021 21:14:24 +0300 Subject: [PATCH] refactor --- web/src/App/index.jsx | 15 +++++------- web/src/App/style.js | 7 ++++++ web/src/components/TorrentList.jsx | 37 +++++++++++++----------------- web/src/components/Upload.jsx | 32 ++++++-------------------- 4 files changed, 36 insertions(+), 55 deletions(-) diff --git a/web/src/App/index.jsx b/web/src/App/index.jsx index 35bf94b..ce7164a 100644 --- a/web/src/App/index.jsx +++ b/web/src/App/index.jsx @@ -4,11 +4,12 @@ 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 { getTorrServerHost } from 'utils/Hosts' +import { echoHost } from 'utils/Hosts' import TorrentList from 'components/TorrentList' import DonateSnackbar from 'components/Donate' import DonateDialog from 'components/Donate/DonateDialog' import Div100vh from 'react-div-100vh' +import axios from 'axios' import { AppWrapper, AppHeader } from './style' import Sidebar from './Sidebar' @@ -21,15 +22,11 @@ const baseTheme = createMuiTheme({ export default function App() { const [isDrawerOpen, setIsDrawerOpen] = useState(false) const [isDonationDialogOpen, setIsDonationDialogOpen] = useState(false) - const [tsVersion, setTSVersion] = useState('') + const [torrServerVersion, setTorrServerVersion] = useState('') useEffect(() => { - fetch(`${getTorrServerHost()}/echo`) - .then(resp => resp.text()) - .then(txt => { - if (!txt.startsWith('')) setTSVersion(txt) - }) - }, [isDrawerOpen]) + axios.get(echoHost()).then(({ data }) => setTorrServerVersion(data)) + }, []) return ( @@ -49,7 +46,7 @@ export default function App() { - TorrServer {tsVersion} + TorrServer {torrServerVersion} diff --git a/web/src/App/style.js b/web/src/App/style.js index bf02027..bebad80 100644 --- a/web/src/App/style.js +++ b/web/src/App/style.js @@ -9,6 +9,13 @@ export const AppWrapper = styled.div` 'head head' 'side content'; ` + +export const CenteredGrid = styled.div` + height: 100%; + display: grid; + place-items: center; +` + export const AppHeader = styled.div` background: #3fb57a; color: rgba(0, 0, 0, 0.87); diff --git a/web/src/components/TorrentList.jsx b/web/src/components/TorrentList.jsx index 0209f4c..c75c9d2 100644 --- a/web/src/components/TorrentList.jsx +++ b/web/src/components/TorrentList.jsx @@ -1,17 +1,10 @@ -import styled from 'styled-components' import { useEffect, useRef, useState } from 'react' import { Typography } from '@material-ui/core' import { torrentsHost } from 'utils/Hosts' import TorrentCard from 'components/TorrentCard' import axios from 'axios' import CircularProgress from '@material-ui/core/CircularProgress' -import { TorrentListWrapper } from 'App/style' - -const CenteredGrid = styled.div` - height: 100%; - display: grid; - place-items: center; -` +import { TorrentListWrapper, CenteredGrid } from 'App/style' export default function TorrentList() { const [torrents, setTorrents] = useState([]) @@ -40,19 +33,21 @@ export default function TorrentList() { return () => clearInterval(timerID.current) }, []) - return isLoading ? ( - - - - ) : isOffline ? ( - - Offline - - ) : !torrents.length ? ( - - No torrents added - - ) : ( + if (isLoading || isOffline || !torrents.length) { + return ( + + {isLoading ? ( + + ) : isOffline ? ( + Offline + ) : ( + !torrents.length && No torrents added + )} + + ) + } + + return ( {torrents.map(torrent => ( diff --git a/web/src/components/Upload.jsx b/web/src/components/Upload.jsx index e2af75e..4eba3b4 100644 --- a/web/src/components/Upload.jsx +++ b/web/src/components/Upload.jsx @@ -3,40 +3,22 @@ import ListItemText from '@material-ui/core/ListItemText' import ListItem from '@material-ui/core/ListItem' import PublishIcon from '@material-ui/icons/Publish' import { torrentUploadHost } from 'utils/Hosts' - -const classes = { - input: { - display: 'none', - }, -} +import axios from 'axios' export default function UploadDialog() { - const handleCapture = ({ target }) => { + const handleCapture = ({ target: { files } }) => { + const [file] = files const data = new FormData() - data.append('save', 'true') - for (let i = 0; i < target.files.length; i++) { - data.append(`file${i}`, target.files[i]) - } - fetch(torrentUploadHost(), { - method: 'POST', - body: data, - }) + data.append('file', file) + axios.post(torrentUploadHost(), data) } return (