✨ Hide downloads module sensitive data

Working thowards #259

src/components/modules/downloads/DownloadsModule.tsx

@@ -15,6 +15,7 @@ import { useEffect, useState } from 'react';
 import axios from 'axios';
 import { NormalizedTorrent } from '@ctrl/shared-torrent';
 import { useViewportSize } from '@mantine/hooks';
+import { showNotification } from '@mantine/notifications';
 import { IModule } from '../modules';
 import { useConfig } from '../../../tools/state';
 import { AddItemShelfButton } from '../../AppShelf/AddAppShelfItem';
@@ -52,12 +53,28 @@ export default function DownloadComponent() {
   useEffect(() => {
     setIsLoading(true);
     if (downloadServices.length === 0) return;
-    setSafeInterval(() => {
+    const interval = setSafeInterval(() => {
       // Send one request with each download service inside
-      axios.post('/api/modules/downloads', { config }).then((response) => {
-        setTorrents(response.data);
-        setIsLoading(false);
-      });
+      axios
+        .post('/api/modules/downloads')
+        .then((response) => {
+          setTorrents(response.data);
+          setIsLoading(false);
+        })
+        .catch((error) => {
+          setTorrents([]);
+          // eslint-disable-next-line no-console
+          console.error('Error while fetching torrents', error.response.data);
+          setIsLoading(false);
+          clearInterval(interval);
+          showNotification({
+            title: 'Error fetching torrents',
+            autoClose: false,
+            color: 'red',
+            message:
+              'Please check your config for any potential errors, check the console for more info',
+          });
+        });
     }, 5000);
   }, []);
 

src/components/modules/downloads/TotalDownloadsModule.tsx

@@ -6,6 +6,7 @@ import { NormalizedTorrent } from '@ctrl/shared-torrent';
 import { linearGradientDef } from '@nivo/core';
 import { Datum, ResponsiveLine } from '@nivo/line';
 import { useListState } from '@mantine/hooks';
+import { showNotification } from '@mantine/notifications';
 import { AddItemShelfButton } from '../../AppShelf/AddAppShelfItem';
 import { useConfig } from '../../../tools/state';
 import { humanFileSize } from '../../../tools/humanFileSize';
@@ -43,10 +44,25 @@ export default function TotalDownloadsComponent() {
   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);
-      });
+    const interval = setSafeInterval(() => {
+      axios
+        .post('/api/modules/downloads')
+        .then((response) => {
+          setTorrents(response.data);
+        })
+        .catch((error) => {
+          setTorrents([]);
+          // eslint-disable-next-line no-console
+          console.error('Error while fetching torrents', error.response.data);
+          clearInterval(interval);
+          showNotification({
+            title: 'Error fetching torrents',
+            autoClose: false,
+            color: 'red',
+            message:
+              'Please check your config for any potential errors, check the console for more info',
+          });
+        });
     }, 1000);
   }, [config.services]);
 

src/components/modules/modules.tsx

@@ -1,11 +1,14 @@
 // This interface is to be used in all the modules of the project
 // Each module should have its own interface and call the following function:
 // TODO: Add a function to register a module
+
+import { TablerIcon } from '@tabler/icons';
+
 // Note: Maybe use context to keep track of the modules
 export interface IModule {
   title: string;
   description: string;
-  icon: React.ReactNode;
+  icon: TablerIcon;
   component: React.ComponentType;
   options?: Option;
 }