Fix minor issues

data/configs/default.json

@@ -9,7 +9,9 @@
       "url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
     }
   ],
-  "settings": {},
+  "settings": {
+    "searchUrl": "https://google.com/search?q="
+  },
   "modules": {
     "Search Bar": {
       "enabled": true

public/locales/en/modules/usenet.json

@@ -3,6 +3,14 @@
     "name": "Usenet",
     "description": "Show the queue and history of supported services"
   },
+  "card": {
+    "errors": {
+      "noDownloadClients": {
+        "title": "No supported download clients found!",
+        "text": "Add a download service to view your current downloads"
+      }
+    }
+  },
   "tabs": {
     "queue": "Queue",
     "history": "History"

src/modules/usenet/UsenetModule.tsx

@@ -1,6 +1,6 @@
-import { Badge, Button, Group, Select, Tabs } from '@mantine/core';
+import { Badge, Button, Group, Select, Stack, Tabs, Text, Title } from '@mantine/core';
 import { IconDownload, IconPlayerPause, IconPlayerPlay } from '@tabler/icons';
-import { FunctionComponent, useState } from 'react';
+import { FunctionComponent, useEffect, useState } from 'react';
 
 import { useTranslation } from 'next-i18next';
 import dayjs from 'dayjs';
@@ -11,18 +11,39 @@ import { UsenetHistoryList } from './UsenetHistoryList';
 import { useGetServiceByType } from '../../tools/hooks/useGetServiceByType';
 import { useGetUsenetInfo, usePauseUsenetQueue, useResumeUsenetQueue } from '../../tools/hooks/api';
 import { humanFileSize } from '../../tools/humanFileSize';
+import { AddItemShelfButton } from '../../components/AppShelf/AddAppShelfItem';
 
 dayjs.extend(duration);
 
 export const UsenetComponent: FunctionComponent = () => {
   const downloadServices = useGetServiceByType('Sabnzbd');
+
   const { t } = useTranslation('modules/usenet');
 
   const [selectedServiceId, setSelectedService] = useState<string | null>(downloadServices[0]?.id);
   const { data } = useGetUsenetInfo({ serviceId: selectedServiceId! });
+
+  useEffect(() => {
+    if (!selectedServiceId && downloadServices.length) {
+      setSelectedService(downloadServices[0].id);
+    }
+  }, [downloadServices, selectedServiceId]);
+
   const { mutate: pause } = usePauseUsenetQueue({ serviceId: selectedServiceId! });
   const { mutate: resume } = useResumeUsenetQueue({ serviceId: selectedServiceId! });
 
+  if (downloadServices.length === 0) {
+    return (
+      <Stack>
+        <Title order={3}>{t('card.errors.noDownloadClients.title')}</Title>
+        <Group>
+          <Text>{t('card.errors.noDownloadClients.text')}</Text>
+          <AddItemShelfButton />
+        </Group>
+      </Stack>
+    );
+  }
+
   if (!selectedServiceId) {
     return null;
   }

src/modules/usenet/UsenetQueueList.tsx

@@ -1,6 +1,6 @@
 import {
+  ActionIcon,
   Alert,
-  Button,
   Center,
   Code,
   Group,
@@ -90,13 +90,17 @@ export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ servi
             <tr key={nzb.id}>
               <td>
                 {nzb.state === 'paused' ? (
-                  <Button disabled color="gray" variant="subtle" radius="lg" size="xs" compact>
+                  <Tooltip label="NOT IMPLEMENTED">
-                    <IconPlayerPlay size="16" />
+                    <ActionIcon color="gray" variant="subtle" radius="xl" size="sm">
-                  </Button>
+                      <IconPlayerPlay size="16" />
+                    </ActionIcon>
+                  </Tooltip>
                 ) : (
-                  <Button disabled variant="subtle" radius="lg" size="xs" compact>
+                  <Tooltip label="NOT IMPLEMENTED">
-                    <IconPlayerPause size="16" />
+                    <ActionIcon color="primary" variant="subtle" radius="xl" size="sm">
-                  </Button>
+                      <IconPlayerPause size="16" />
+                    </ActionIcon>
+                  </Tooltip>
                 )}
               </td>
               <td>

src/tools/hooks/api.ts

@@ -14,6 +14,8 @@ import { UsenetPauseRequestParams } from '../../pages/api/modules/usenet/pause';
 import { queryClient } from '../queryClient';
 import { UsenetResumeRequestParams } from '../../pages/api/modules/usenet/resume';
 
+const POLLING_INTERVAL = 2000;
+
 export const useGetUsenetInfo = (params: UsenetInfoRequestParams) =>
   useQuery(
     ['usenetInfo', params.serviceId],
@@ -24,9 +26,10 @@ export const useGetUsenetInfo = (params: UsenetInfoRequestParams) =>
         })
       ).data,
     {
-      refetchInterval: 1000,
+      refetchInterval: POLLING_INTERVAL,
       keepPreviousData: true,
       retry: 2,
+      enabled: !!params.serviceId,
     }
   );
 
@@ -40,7 +43,7 @@ export const useGetUsenetDownloads = (params: UsenetQueueRequestParams) =>
         })
       ).data,
     {
-      refetchInterval: 1000,
+      refetchInterval: POLLING_INTERVAL,
       keepPreviousData: true,
       retry: 2,
     }
@@ -56,7 +59,7 @@ export const useGetUsenetHistory = (params: UsenetHistoryRequestParams) =>
         })
       ).data,
     {
-      refetchInterval: 1000,
+      refetchInterval: POLLING_INTERVAL,
       keepPreviousData: true,
       retry: 2,
     }