Merge branch 'dev' into change-title-icons

.github/pull_request_template.md

@@ -14,10 +14,3 @@
 
 ### Screenshot _(if applicable)_
 > If you've introduced any significant UI changes, please include a screenshot.
-
-### Code Quality Checklist _(Please complete)_
-- [ ] All changes are backwards compatible
-- [ ] There are no (new) build warnings or errors
-- [ ] _(If a new config option is added)_ Attribute is outlined in the schema and documented
-- [ ] _(If a new dependency is added)_ Package is essential, and has been checked out for security or performance
-- [ ] Bumps version, if new feature added

package.json

@@ -24,27 +24,27 @@
 		"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",
 		"@dnd-kit/core": "^6.0.1",
 		"@dnd-kit/sortable": "^7.0.0",
 		"@dnd-kit/utilities": "^3.2.0",
-		"@mantine/core": "^4.2.6",
-		"@mantine/dates": "^4.2.6",
-		"@mantine/dropzone": "^4.2.6",
-		"@mantine/form": "^4.2.6",
-		"@mantine/hooks": "^4.2.6",
-		"@mantine/next": "^4.2.6",
-		"@mantine/notifications": "^4.2.6",
-		"@mantine/prism": "^4.2.6",
+		"@mantine/core": "^4.2.8",
+		"@mantine/dates": "^4.2.8",
+		"@mantine/dropzone": "^4.2.8",
+		"@mantine/form": "^4.2.8",
+		"@mantine/hooks": "^4.2.8",
+		"@mantine/next": "^4.2.8",
+		"@mantine/notifications": "^4.2.8",
+		"@mantine/prism": "^4.2.8",
 		"@nivo/core": "^0.79.0",
 		"@nivo/line": "^0.79.1",
 		"@tabler/icons": "^1.68.0",
 		"axios": "^0.27.2",
 		"cookies-next": "^2.0.4",
-		"dayjs": "^1.11.2",
+		"dayjs": "^1.11.3",
 		"framer-motion": "^6.3.1",
 		"js-file-download": "^0.4.12",
 		"next": "12.1.6",

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/AppShelf/AppShelf.tsx

@@ -19,7 +19,6 @@ import { ModuleWrapper } from '../modules/moduleWrapper';
 import { DownloadsModule } from '../modules';
 
 const useStyles = createStyles((theme, _params) => ({
-
   item: {
     borderBottom: 0,
     overflow: 'hidden',
@@ -31,7 +30,6 @@ const useStyles = createStyles((theme, _params) => ({
   itemOpened: {
     borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[3],
   },
-
 }));
 
 const AppShelf = (props: any) => {

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/_app.tsx

@@ -6,7 +6,6 @@ import Head from 'next/head';
 import { MantineProvider, ColorScheme, ColorSchemeProvider } from '@mantine/core';
 import { NotificationsProvider } from '@mantine/notifications';
 import { useHotkeys } from '@mantine/hooks';
-import Layout from '../components/layout/Layout';
 import { ConfigProvider } from '../tools/state';
 import { theme } from '../tools/theme';
 import { styles } from '../tools/styles';

src/pages/api/modules/downloads.ts

@@ -34,15 +34,13 @@ async function Post(req: NextApiRequest, res: NextApiResponse) {
     );
   }
   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) {