🐛 Fixing Deluge integration

Thanks to @scttcper for fixing https://github.com/scttcper/deluge/issues/106 so quickly !

package.json

@@ -24,7 +24,7 @@
 		"ci": "yarn test && yarn lint --fix && yarn typecheck && yarn prettier:write"
 	},
 	"dependencies": {
-		"@ctrl/deluge": "^4.0.0",
+		"@ctrl/deluge": "^4.1.0",
 		"@ctrl/qbittorrent": "^4.0.0",
 		"@ctrl/shared-torrent": "^4.1.0",
 		"@ctrl/transmission": "^4.1.1",

src/components/AppShelf/AddAppShelfItem.tsx

@@ -300,21 +300,20 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
               />
             </>
           )}
-          {form.values.type === 'Deluge' ||
-            (form.values.type === 'Transmission' && (
-              <>
-                <TextInput
-                  required
-                  label="Password"
-                  placeholder="password"
-                  value={form.values.password}
-                  onChange={(event) => {
-                    form.setFieldValue('password', event.currentTarget.value);
-                  }}
-                  error={form.errors.password && 'Invalid password'}
-                />
-              </>
-            ))}
+          {(form.values.type === 'Deluge' || form.values.type === 'Transmission') && (
+            <>
+              <TextInput
+                required
+                label="Password"
+                placeholder="password"
+                value={form.values.password}
+                onChange={(event) => {
+                  form.setFieldValue('password', event.currentTarget.value);
+                }}
+                error={form.errors.password && 'Invalid password'}
+              />
+            </>
+          )}
         </Group>
 
         <Group grow position="center" mt="xl">

src/components/modules/downloads/DownloadsModule.tsx

@@ -1,4 +1,15 @@
-import { Table, Text, Tooltip, Title, Group, Progress, Skeleton, ScrollArea } from '@mantine/core';
+import {
+  Table,
+  Text,
+  Tooltip,
+  Title,
+  Group,
+  Progress,
+  Skeleton,
+  ScrollArea,
+  Center,
+  Image,
+} from '@mantine/core';
 import { IconDownload as Download } from '@tabler/icons';
 import { useEffect, useState } from 'react';
 import axios from 'axios';
@@ -34,14 +45,18 @@ export default function DownloadComponent() {
     (config?.modules?.[DownloadsModule.title]?.options?.hidecomplete?.value as boolean) ?? false;
   const [torrents, setTorrents] = useState<NormalizedTorrent[]>([]);
   const setSafeInterval = useSetSafeInterval();
+  const [isLoading, setIsLoading] = useState(true);
   useEffect(() => {
+    setIsLoading(true);
+    if (downloadServices.length === 0) return;
     setSafeInterval(() => {
       // Send one request with each download service inside
       axios.post('/api/modules/downloads', { config }).then((response) => {
         setTorrents(response.data);
+        setIsLoading(false);
       });
     }, 1000);
-  }, [config.modules]);
+  }, [config.services]);
 
   if (downloadServices.length === 0) {
     return (
@@ -55,7 +70,7 @@ export default function DownloadComponent() {
     );
   }
 
-  if (torrents.length === 0) {
+  if (isLoading) {
     return (
       <>
         <Skeleton height={40} mt={10} />
@@ -115,14 +130,24 @@ export default function DownloadComponent() {
       </tr>
     );
   });
+
+  const easteregg = (
+    <Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <Image fit="cover" height={300} src="https://danjohnvelasco.github.io/images/empty.png" />
+    </Center>
+  );
   return (
     <Group noWrap grow direction="column">
       <Title order={4}>Your torrents</Title>
       <ScrollArea sx={{ height: 300 }}>
-        <Table highlightOnHover>
-          <thead>{ths}</thead>
-          <tbody>{rows}</tbody>
-        </Table>
+        {rows.length > 0 ? (
+          <Table highlightOnHover>
+            <thead>{ths}</thead>
+            <tbody>{rows}</tbody>
+          </Table>
+        ) : (
+          easteregg
+        )}
       </ScrollArea>
     </Group>
   );

src/components/modules/downloads/TotalDownloadsModule.tsx

@@ -73,12 +73,13 @@ export default function TotalDownloadsComponent() {
   const totalDownloadSpeed = torrents.reduce((acc, torrent) => acc + torrent.downloadSpeed, 0);
   const totalUploadSpeed = torrents.reduce((acc, torrent) => acc + torrent.uploadSpeed, 0);
   useEffect(() => {
+    if (downloadServices.length === 0) return;
     setSafeInterval(() => {
       axios.post('/api/modules/downloads', { config }).then((response) => {
         setTorrents(response.data);
       });
     }, 1000);
-  }, []);
+  }, [config.services]);
 
   useEffect(() => {
     torrentHistoryHandlers.append({

src/pages/api/modules/downloads.ts

@@ -24,36 +24,34 @@ async function Post(req: NextApiRequest, res: NextApiResponse) {
   }
   if (qBittorrentService) {
     torrents.push(
-      ...(
+      ...((
         await new QBittorrent({
           baseUrl: qBittorrentService.url,
           username: qBittorrentService.username,
           password: qBittorrentService.password,
         }).getAllData()
-      ).torrents
+      ).torrents)
     );
   }
   if (delugeService) {
-    const delugeTorrents = (
-      await new Deluge({
-        baseUrl: delugeService.url,
-        username: delugeService.username,
-        password: delugeService.password,
-      }).getAllData()
-    ).torrents;
-    delugeTorrents.forEach((delugeTorrent) =>
-      torrents.push({ ...delugeTorrent, progress: delugeTorrent.progress / 100 })
+    torrents.push(
+      ...((
+        await new Deluge({
+          baseUrl: delugeService.url,
+          password: delugeService.password,
+        }).getAllData()
+      ).torrents)
     );
   }
   if (transmissionService) {
     torrents.push(
-      ...(
+      ...((
         await new Transmission({
           baseUrl: transmissionService.url,
           username: transmissionService.username,
           password: transmissionService.password,
         }).getAllData()
-      ).torrents
+      ).torrents)
     );
   }
   res.status(200).json(torrents);

yarn.lock

@@ -1583,17 +1583,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ctrl/deluge@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "@ctrl/deluge@npm:4.0.0"
+"@ctrl/deluge@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "@ctrl/deluge@npm:4.1.0"
   dependencies:
-    "@ctrl/magnet-link": ^3.1.0
-    "@ctrl/shared-torrent": ^4.1.0
+    "@ctrl/magnet-link": ^3.1.1
+    "@ctrl/shared-torrent": ^4.1.1
     "@ctrl/url-join": ^2.0.0
     formdata-node: ^4.3.2
-    got: ^12.0.1
+    got: ^12.1.0
     tough-cookie: ^4.0.0
-  checksum: d4b828fb580a3e4c589169044b78e74d2d1c6ea3ff24f24c9aba59a5fc88320c494eebe814aa0f048e772d698ddd5979f8cd92d4144b0550227bc502342c82ed
+  checksum: a17f974e1b98a9086e1036604a86d3e14b5cf9c8d0fd997357dd4522dc296f0ef92e2697231f97f7211c0224e35256af966f722b6b316a363533328908cd8d5e
   languageName: node
   linkType: hard
 
@@ -1606,6 +1606,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@ctrl/magnet-link@npm:^3.1.1":
+  version: 3.1.1
+  resolution: "@ctrl/magnet-link@npm:3.1.1"
+  dependencies:
+    "@ctrl/ts-base32": ^2.1.1
+  checksum: 82533b50e2a60b2cfbad19879b0b16dbdbf2cfb633cda519d9cac7ab4039d52f98bc10185a5f6ffd29cfe415d709b8748ebe7cf763e522e0c4dcee8dde6506fe
+  languageName: node
+  linkType: hard
+
 "@ctrl/qbittorrent@npm:^4.0.0":
   version: 4.0.0
   resolution: "@ctrl/qbittorrent@npm:4.0.0"
@@ -9416,7 +9425,7 @@ __metadata:
   resolution: "homarr@workspace:."
   dependencies:
     "@babel/core": ^7.17.8
-    "@ctrl/deluge": ^4.0.0
+    "@ctrl/deluge": ^4.1.0
     "@ctrl/qbittorrent": ^4.0.0
     "@ctrl/shared-torrent": ^4.1.0
     "@ctrl/transmission": ^4.1.1