getTorrentList fn changed to support errorCallback

web/README.md

@@ -8,10 +8,10 @@
 > `http://192.168.78.4:8090` - correct
 >
 > `http://192.168.78.4:8090/` - wrong
-3. `npm start`
+3. `yarn start`
 
 ### Eslint
 > Prettier will fix the code every time the code is saved
 
-- `npm run lint` - to find all linting problems
-- `npm run fix` - to fix code
+- `yarn lint` - to find all linting problems
+- `yarn fix` - to fix code

web/package.json

@@ -20,7 +20,7 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "lint": "eslint --ext .js,.jsx src --color",
-    "fix": "eslint --ext .js,.jsx src --color --fix"
+    "fix": "yarn lint --fix"
   },
   "browserslist": {
     "production": [

web/src/components/About.jsx

@@ -27,7 +27,7 @@ export default function AboutDialog() {
 
         <DialogContent>
           <DialogContent>
-            <a id='alert-dialog-description'>
+            <DialogContentText id='alert-dialog-description'>
               <center>
                 <h2>Thanks to everyone who tested and helped.</h2>
               </center>

web/src/components/Appbar/index.jsx

@@ -36,13 +36,8 @@ export default function MiniDrawer() {
   const [isDonationDialogOpen, setIsDonationDialogOpen] = useState(false)
   const [tsVersion, setTSVersion] = useState('')
 
-  const handleDrawerOpen = () => {
-    setIsDrawerOpen(true)
-  }
-
-  const handleDrawerClose = () => {
-    setIsDrawerOpen(false)
-  }
+  const handleDrawerOpen = () => setIsDrawerOpen(true)
+  const handleDrawerClose = () => setIsDrawerOpen(false)
 
   useEffect(() => {
     fetch(`${getTorrServerHost()}/echo`)

web/src/components/TorrentList.jsx

@@ -2,8 +2,7 @@ import styled from 'styled-components'
 import { useEffect, useRef, useState } from 'react'
 import { Typography } from '@material-ui/core'
 import { torrentsHost } from 'utils/Hosts'
-
-import Torrent from './Torrent'
+import Torrent from 'components/Torrent'
 
 const TorrentListWrapper = styled.div`
   display: grid;
@@ -20,18 +19,38 @@ const TorrentListWrapper = styled.div`
   }
 `
 
+const getTorrentList = (callback, errorCallback) => {
+  fetch(torrentsHost(), {
+    method: 'post',
+    body: JSON.stringify({ action: 'list' }),
+    headers: {
+      Accept: 'application/json, text/plain, */*',
+      'Content-Type': 'application/json',
+    },
+  })
+    .then(res => res.json())
+    .then(callback)
+    .catch(() => errorCallback())
+}
+
 export default function TorrentList() {
   const [torrents, setTorrents] = useState([])
   const [offline, setOffline] = useState(true)
   const timerID = useRef(-1)
 
+  const updateTorrentList = torrs => {
+    setTorrents(torrs)
+    setOffline(false)
+  }
+
+  const resetTorrentList = () => {
+    setTorrents([])
+    setOffline(true)
+  }
+
   useEffect(() => {
     timerID.current = setInterval(() => {
-      getTorrentList(torrs => {
-        if (torrs) setOffline(false)
-        else setOffline(true)
-        setTorrents(torrs)
-      })
+      getTorrentList(updateTorrentList, resetTorrentList)
     }, 1000)
 
     return () => {
@@ -43,22 +62,11 @@ export default function TorrentList() {
     <TorrentListWrapper>
       {offline ? (
         <Typography>Offline</Typography>
+      ) : !torrents.length ? (
+        <Typography>No torrents added</Typography>
       ) : (
         torrents && torrents.map(torrent => <Torrent key={torrent.hash} torrent={torrent} />)
       )}
     </TorrentListWrapper>
   )
 }
-
-function getTorrentList(callback) {
-  fetch(torrentsHost(), {
-    method: 'post',
-    body: JSON.stringify({ action: 'list' }),
-    headers: {
-      Accept: 'application/json, text/plain, */*',
-      'Content-Type': 'application/json',
-    },
-  })
-    .then(res => res.json())
-    .then(callback)
-}