sovonegr/TorrServerJellyfin
1
0
Fork 0
mirror of https://github.com/Ernous/TorrServerJellyfin.git synced 2025-12-19 21:46:11 +05:00
Code Issues Packages Projects Releases Wiki Activity

refactor

Browse Source
This commit is contained in:
Daniel Shleifman
2021-06-02 21:14:24 +03:00
parent e472b8b59a
commit 6dbd3aec4d
4 changed files with 36 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
web/src/App/index.jsx
View File

@@ -4,11 +4,12 @@ import { useEffect, useState } from 'react'
import Typography from '@material-ui/core/Typography' import Typography from '@material-ui/core/Typography'
import IconButton from '@material-ui/core/IconButton' import IconButton from '@material-ui/core/IconButton'
import { Menu as MenuIcon, Close as CloseIcon } from '@material-ui/icons' 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 TorrentList from 'components/TorrentList'
import DonateSnackbar from 'components/Donate' import DonateSnackbar from 'components/Donate'
import DonateDialog from 'components/Donate/DonateDialog' import DonateDialog from 'components/Donate/DonateDialog'
import Div100vh from 'react-div-100vh' import Div100vh from 'react-div-100vh'
import axios from 'axios'
import { AppWrapper, AppHeader } from './style' import { AppWrapper, AppHeader } from './style'
import Sidebar from './Sidebar' import Sidebar from './Sidebar'
@@ -21,15 +22,11 @@ const baseTheme = createMuiTheme({
export default function App() { export default function App() {
const [isDrawerOpen, setIsDrawerOpen] = useState(false) const [isDrawerOpen, setIsDrawerOpen] = useState(false)
const [isDonationDialogOpen, setIsDonationDialogOpen] = useState(false) const [isDonationDialogOpen, setIsDonationDialogOpen] = useState(false)
const [tsVersion, setTSVersion] = useState('') const [torrServerVersion, setTorrServerVersion] = useState('')
useEffect(() => { useEffect(() => {
fetch(`${getTorrServerHost()}/echo`) axios.get(echoHost()).then(({ data }) => setTorrServerVersion(data))
.then(resp => resp.text()) }, [])
.then(txt => {
if (!txt.startsWith('<!DOCTYPE html>')) setTSVersion(txt)
})
}, [isDrawerOpen])
return ( return (
<MuiThemeProvider theme={baseTheme}> <MuiThemeProvider theme={baseTheme}>
@@ -49,7 +46,7 @@ export default function App() {
</IconButton> </IconButton>
<Typography variant='h6' noWrap> <Typography variant='h6' noWrap>
TorrServer {tsVersion} TorrServer {torrServerVersion}
</Typography> </Typography>
</AppHeader> </AppHeader>

7
web/src/App/style.js
View File

@@ -9,6 +9,13 @@ export const AppWrapper = styled.div`
'head head' 'head head'
'side content'; 'side content';
` `
export const CenteredGrid = styled.div`
height: 100%;
display: grid;
place-items: center;
`
export const AppHeader = styled.div` export const AppHeader = styled.div`
background: #3fb57a; background: #3fb57a;
color: rgba(0, 0, 0, 0.87); color: rgba(0, 0, 0, 0.87);

37
web/src/components/TorrentList.jsx
View File

@@ -1,17 +1,10 @@
import styled from 'styled-components'
import { useEffect, useRef, useState } from 'react' import { useEffect, useRef, useState } from 'react'
import { Typography } from '@material-ui/core' import { Typography } from '@material-ui/core'
import { torrentsHost } from 'utils/Hosts' import { torrentsHost } from 'utils/Hosts'
import TorrentCard from 'components/TorrentCard' import TorrentCard from 'components/TorrentCard'
import axios from 'axios' import axios from 'axios'
import CircularProgress from '@material-ui/core/CircularProgress' import CircularProgress from '@material-ui/core/CircularProgress'
import { TorrentListWrapper } from 'App/style' import { TorrentListWrapper, CenteredGrid } from 'App/style'
const CenteredGrid = styled.div`
height: 100%;
display: grid;
place-items: center;
`
export default function TorrentList() { export default function TorrentList() {
const [torrents, setTorrents] = useState([]) const [torrents, setTorrents] = useState([])
@@ -40,19 +33,21 @@ export default function TorrentList() {
return () => clearInterval(timerID.current) return () => clearInterval(timerID.current)
}, []) }, [])
return isLoading ? ( if (isLoading || isOffline || !torrents.length) {
<CenteredGrid> return (
<CircularProgress /> <CenteredGrid>
</CenteredGrid> {isLoading ? (
) : isOffline ? ( <CircularProgress />
<CenteredGrid> ) : isOffline ? (
<Typography>Offline</Typography> <Typography>Offline</Typography>
</CenteredGrid> ) : (
) : !torrents.length ? ( !torrents.length && <Typography>No torrents added</Typography>
<CenteredGrid> )}
<Typography>No torrents added</Typography> </CenteredGrid>
</CenteredGrid> )
) : ( }
return (
<TorrentListWrapper> <TorrentListWrapper>
{torrents.map(torrent => ( {torrents.map(torrent => (
<TorrentCard key={torrent.hash} torrent={torrent} /> <TorrentCard key={torrent.hash} torrent={torrent} />

32
web/src/components/Upload.jsx
View File

@@ -3,40 +3,22 @@ import ListItemText from '@material-ui/core/ListItemText'
import ListItem from '@material-ui/core/ListItem' import ListItem from '@material-ui/core/ListItem'
import PublishIcon from '@material-ui/icons/Publish' import PublishIcon from '@material-ui/icons/Publish'
import { torrentUploadHost } from 'utils/Hosts' import { torrentUploadHost } from 'utils/Hosts'
import axios from 'axios'
const classes = {
input: {
display: 'none',
},
}
export default function UploadDialog() { export default function UploadDialog() {
const handleCapture = ({ target }) => { const handleCapture = ({ target: { files } }) => {
const [file] = files
const data = new FormData() const data = new FormData()
data.append('save', 'true') data.append('file', file)
for (let i = 0; i < target.files.length; i++) { axios.post(torrentUploadHost(), data)
data.append(`file${i}`, target.files[i])
}
fetch(torrentUploadHost(), {
method: 'POST',
body: data,
})
} }
return ( return (
<div> <div>
<label htmlFor='raised-button-file'> <label htmlFor='raised-button-file'>
<input <input onChange={handleCapture} accept='*/*' type='file' style={{ display: 'none' }} id='raised-button-file' />
onChange={handleCapture}
accept='*/*'
type='file'
className={classes.input}
style={{ display: 'none' }}
id='raised-button-file'
multiple
/>
<ListItem button variant='raised' type='submit' component='span' className={classes.button} key='Upload file'> <ListItem button variant='raised' type='submit' component='span' key='Upload file'>
<ListItemIcon> <ListItemIcon>
<PublishIcon /> <PublishIcon />
</ListItemIcon> </ListItemIcon>