refactor

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 ? (
-    <CenteredGrid>
-      <CircularProgress />
-    </CenteredGrid>
-  ) : isOffline ? (
-    <CenteredGrid>
-      <Typography>Offline</Typography>
-    </CenteredGrid>
-  ) : !torrents.length ? (
-    <CenteredGrid>
-      <Typography>No torrents added</Typography>
-    </CenteredGrid>
-  ) : (
+  if (isLoading || isOffline || !torrents.length) {
+    return (
+      <CenteredGrid>
+        {isLoading ? (
+          <CircularProgress />
+        ) : isOffline ? (
+          <Typography>Offline</Typography>
+        ) : (
+          !torrents.length && <Typography>No torrents added</Typography>
+        )}
+      </CenteredGrid>
+    )
+  }
+
+  return (
     <TorrentListWrapper>
       {torrents.map(torrent => (
         <TorrentCard key={torrent.hash} torrent={torrent} />

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 (
     <div>
       <label htmlFor='raised-button-file'>
-        <input
-          onChange={handleCapture}
-          accept='*/*'
-          type='file'
-          className={classes.input}
-          style={{ display: 'none' }}
-          id='raised-button-file'
-          multiple
-        />
+        <input onChange={handleCapture} accept='*/*' type='file' style={{ display: 'none' }} id='raised-button-file' />
 
-        <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>
             <PublishIcon />
           </ListItemIcon>