added icons for noserver or no files

web/src/components/App/Sidebar.jsx

@@ -10,17 +10,19 @@ import SettingsDialog from 'components/Settings'
 import RemoveAll from 'components/RemoveAll'
 import AboutDialog from 'components/About'
 import CloseServer from 'components/CloseServer'
+import { memo } from 'react'
 
 import { AppSidebarStyle } from './style'
 
-export default function Sidebar({ isDrawerOpen, setIsDonationDialogOpen }) {
+const Sidebar = ({ isDrawerOpen, setIsDonationDialogOpen, isOffline, isLoading }) => {
   const { t } = useTranslation()
 
   return (
     <AppSidebarStyle isDrawerOpen={isDrawerOpen}>
       <List>
-        <AddDialogButton />
-        <RemoveAll />
+        <AddDialogButton isOffline={isOffline} isLoading={isLoading} />
+
+        <RemoveAll isOffline={isOffline} isLoading={isLoading} />
       </List>
 
       <Divider />
@@ -28,7 +30,7 @@ export default function Sidebar({ isDrawerOpen, setIsDonationDialogOpen }) {
       <List>
         <SettingsDialog />
 
-        <CloseServer />
+        <CloseServer isOffline={isOffline} isLoading={isLoading} />
       </List>
 
       <Divider />
@@ -46,3 +48,5 @@ export default function Sidebar({ isDrawerOpen, setIsDonationDialogOpen }) {
     </AppSidebarStyle>
   )
 }
+
+export default memo(Sidebar)

web/src/components/App/index.jsx

@@ -11,6 +11,8 @@ import TorrentList from 'components/TorrentList'
 import DonateSnackbar from 'components/Donate'
 import DonateDialog from 'components/Donate/DonateDialog'
 import useChangeLanguage from 'utils/useChangeLanguage'
+import { useQuery } from 'react-query'
+import { getTorrents } from 'utils/Utils'
 
 import { AppWrapper, AppHeader, LanguageSwitch } from './style'
 import Sidebar from './Sidebar'
@@ -25,6 +27,13 @@ export default function App() {
   const [isDonationDialogOpen, setIsDonationDialogOpen] = useState(false)
   const [torrServerVersion, setTorrServerVersion] = useState('')
   const [currentLang, changeLang] = useChangeLanguage()
+  const [isOffline, setIsOffline] = useState(false)
+  const { data: torrents, isLoading } = useQuery('torrents', getTorrents, {
+    retry: 1,
+    refetchInterval: 1000,
+    onError: () => setIsOffline(true),
+    onSuccess: () => setIsOffline(false),
+  })
 
   useEffect(() => {
     axios.get(echoHost()).then(({ data }) => setTorrServerVersion(data))
@@ -58,9 +67,14 @@ export default function App() {
             </div>
           </AppHeader>
 
-          <Sidebar isDrawerOpen={isDrawerOpen} setIsDonationDialogOpen={setIsDonationDialogOpen} />
+          <Sidebar
+            isOffline={isOffline}
+            isLoading={isLoading}
+            isDrawerOpen={isDrawerOpen}
+            setIsDonationDialogOpen={setIsDonationDialogOpen}
+          />
 
-          <TorrentList />
+          <TorrentList isOffline={isOffline} torrents={torrents} isLoading={isLoading} />
 
           {isDonationDialogOpen && <DonateDialog onClose={() => setIsDonationDialogOpen(false)} />}
           {!JSON.parse(localStorage.getItem('snackbarIsClosed')) && <DonateSnackbar />}