🔀 Merge pull request #373 from JannesV/feature/usenet

Feature/usenet

.eslintrc.js

@@ -3,9 +3,9 @@ module.exports = {
     'mantine',
     'plugin:@next/next/recommended',
     'plugin:jest/recommended',
-    "eslint:recommended",
+    'eslint:recommended',
-    "plugin:@typescript-eslint/eslint-recommended",
+    'plugin:@typescript-eslint/eslint-recommended',
-    "plugin:@typescript-eslint/recommended"
+    'plugin:@typescript-eslint/recommended',
   ],
   plugins: ['testing-library', 'jest', 'react-hooks', 'react', 'unused-imports'],
   overrides: [
@@ -20,12 +20,13 @@ module.exports = {
   rules: {
     'react/react-in-jsx-scope': 'off',
     'react/no-children-prop': 'off',
-    "unused-imports/no-unused-imports": "warn",
+    'unused-imports/no-unused-imports': 'warn',
-    "@typescript-eslint/no-unused-vars": "off",
+    '@typescript-eslint/no-unused-vars': 'off',
-    "@typescript-eslint/no-unused-imports": "off",
+    '@typescript-eslint/no-unused-imports': 'off',
-    "@typescript-eslint/no-unused-expressions": "off",
+    '@typescript-eslint/no-unused-expressions': 'off',
-    "@typescript-eslint/no-explicit-any": "off",
+    '@typescript-eslint/no-explicit-any': 'off',
-    "@typescript-eslint/no-shadow": "off",
+    '@typescript-eslint/no-shadow': 'off',
-    "@typescript-eslint/no-use-before-define": "off",
+    '@typescript-eslint/no-use-before-define': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
   },
 };

package.json

@@ -1,100 +1,102 @@
 {
-	"name": "homarr",
+  "name": "homarr",
-	"version": "0.9.2",
+  "version": "0.9.2",
-	"description": "Homarr - A homepage for your server.",
+  "description": "Homarr - A homepage for your server.",
-	"license": "MIT",
+  "license": "MIT",
-	"repository": {
+  "repository": {
-		"type": "git",
+    "type": "git",
-		"url": "https://github.com/ajnart/homarr"
+    "url": "https://github.com/ajnart/homarr"
-	},
+  },
-	"scripts": {
+  "scripts": {
-		"dev": "next dev",
+    "dev": "next dev",
-		"build": "next build",
+    "build": "next build",
-		"analyze": "ANALYZE=true next build",
+    "analyze": "ANALYZE=true next build",
-		"start": "next start",
+    "start": "next start",
-		"typecheck": "tsc --noEmit",
+    "typecheck": "tsc --noEmit",
-		"export": "next build && next export",
+    "export": "next build && next export",
-		"lint": "next lint",
+    "lint": "next lint",
-		"jest": "jest",
+    "jest": "jest",
-		"jest:watch": "jest --watch",
+    "jest:watch": "jest --watch",
-		"prettier:check": "prettier --check \"**/*.{ts,tsx}\"",
+    "prettier:check": "prettier --check \"**/*.{ts,tsx}\"",
-		"prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
+    "prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
-		"test": "npm run prettier:check && npm run lint && npm run typecheck && npm run jest",
+    "test": "npm run prettier:check && npm run lint && npm run typecheck && npm run jest",
-		"ci": "yarn test && yarn lint --fix && yarn typecheck && yarn prettier:write"
+    "ci": "yarn test && yarn lint --fix && yarn typecheck && yarn prettier:write"
-	},
+  },
-	"dependencies": {
+  "dependencies": {
-		"@ctrl/deluge": "^4.1.0",
+    "@ctrl/deluge": "^4.1.0",
-		"@ctrl/qbittorrent": "^4.1.0",
+    "@ctrl/qbittorrent": "^4.1.0",
-		"@ctrl/shared-torrent": "^4.1.1",
+    "@ctrl/shared-torrent": "^4.1.1",
-		"@ctrl/transmission": "^4.1.1",
+    "@ctrl/transmission": "^4.1.1",
-		"@dnd-kit/core": "^6.0.5",
+    "@dnd-kit/core": "^6.0.5",
-		"@dnd-kit/sortable": "^7.0.1",
+    "@dnd-kit/sortable": "^7.0.1",
-		"@dnd-kit/utilities": "^3.2.0",
+    "@dnd-kit/utilities": "^3.2.0",
-		"@emotion/react": "^11.10.0",
+    "@emotion/react": "^11.10.0",
-		"@emotion/server": "^11.10.0",
+    "@emotion/server": "^11.10.0",
-		"@mantine/carousel": "^5.1.0",
+    "@mantine/carousel": "^5.1.0",
-		"@mantine/core": "^5.2.3",
+    "@mantine/core": "^5.2.3",
-		"@mantine/dates": "^5.2.3",
+    "@mantine/dates": "^5.2.3",
-		"@mantine/dropzone": "^5.2.3",
+    "@mantine/dropzone": "^5.2.3",
-		"@mantine/form": "^5.2.3",
+    "@mantine/form": "^5.2.3",
-		"@mantine/hooks": "^5.2.3",
+    "@mantine/hooks": "^5.2.3",
-		"@mantine/modals": "^5.2.3",
+    "@mantine/modals": "^5.2.3",
-		"@mantine/next": "^5.2.3",
+    "@mantine/next": "^5.2.3",
-		"@mantine/notifications": "^5.2.3",
+    "@mantine/notifications": "^5.2.3",
-		"@mantine/prism": "^5.0.0",
+    "@mantine/prism": "^5.0.0",
-		"@nivo/core": "^0.79.0",
+    "@nivo/core": "^0.79.0",
-		"@nivo/line": "^0.79.1",
+    "@nivo/line": "^0.79.1",
-		"@tabler/icons": "^1.78.0",
+    "@tabler/icons": "^1.78.0",
-		"add": "^2.0.6",
+    "@tanstack/react-query": "^4.2.1",
-		"axios": "^0.27.2",
+    "add": "^2.0.6",
-		"consola": "^2.15.3",
+    "axios": "^0.27.2",
-		"cookies-next": "^2.1.1",
+    "consola": "^2.15.3",
-		"country-flag-icons": "^1.5.5",
+    "cookies-next": "^2.1.1",
-		"dayjs": "^1.11.5",
+    "country-flag-icons": "^1.5.5",
-		"dockerode": "^3.3.2",
+    "dayjs": "^1.11.5",
-		"embla-carousel-react": "^7.0.0",
+    "dockerode": "^3.3.2",
-		"framer-motion": "^6.5.1",
+    "embla-carousel-react": "^7.0.0",
-		"i18next": "^21.9.1",
+    "framer-motion": "^6.5.1",
-		"i18next-browser-languagedetector": "^6.1.5",
+    "i18next": "^21.9.1",
-		"i18next-http-backend": "^1.4.1",
+    "i18next-browser-languagedetector": "^6.1.5",
-		"js-file-download": "^0.4.12",
+    "i18next-http-backend": "^1.4.1",
-		"next": "12.1.6",
+    "js-file-download": "^0.4.12",
-		"next-i18next": "^11.3.0",
+    "next": "12.1.6",
-		"prism-react-renderer": "^1.3.5",
+    "next-i18next": "^11.3.0",
-		"react": "^18.2.0",
+    "prism-react-renderer": "^1.3.5",
-		"react-dom": "^18.2.0",
+    "react": "^18.2.0",
-		"sharp": "^0.30.7",
+    "react-dom": "^18.2.0",
-		"systeminformation": "^5.12.1",
+    "sabnzbd-api": "^1.5.0",
-		"uuid": "^8.3.2",
+    "sharp": "^0.30.7",
-		"yarn": "^1.22.19"
+    "systeminformation": "^5.12.1",
-	},
+    "uuid": "^8.3.2",
-	"devDependencies": {
+    "yarn": "^1.22.19"
-		"@next/bundle-analyzer": "^12.1.4",
+  },
-		"@next/eslint-plugin-next": "^12.1.4",
+  "devDependencies": {
-		"@types/dockerode": "^3.3.9",
+    "@next/bundle-analyzer": "^12.1.4",
-		"@types/node": "17.0.1",
+    "@next/eslint-plugin-next": "^12.1.4",
-		"@types/react": "17.0.1",
+    "@types/dockerode": "^3.3.9",
-		"@types/uuid": "^8.3.4",
+    "@types/node": "17.0.1",
-		"@typescript-eslint/eslint-plugin": "^5.30.7",
+    "@types/react": "17.0.1",
-		"@typescript-eslint/parser": "^5.30.7",
+    "@types/uuid": "^8.3.4",
-		"eslint": "^8.20.0",
+    "@typescript-eslint/eslint-plugin": "^5.30.7",
-		"eslint-config-airbnb": "^19.0.4",
+    "@typescript-eslint/parser": "^5.30.7",
-		"eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint": "^8.20.0",
-		"eslint-config-mantine": "^2.0.0",
+    "eslint-config-airbnb": "^19.0.4",
-		"eslint-plugin-import": "^2.26.0",
+    "eslint-config-airbnb-typescript": "^17.0.0",
-		"eslint-plugin-jest": "^26.6.0",
+    "eslint-config-mantine": "^2.0.0",
-		"eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-import": "^2.26.0",
-		"eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-jest": "^26.6.0",
-		"eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
-		"eslint-plugin-testing-library": "^5.5.1",
+    "eslint-plugin-react": "^7.30.1",
-		"eslint-plugin-unused-imports": "^2.0.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
-		"jest": "^28.1.3",
+    "eslint-plugin-testing-library": "^5.5.1",
-		"prettier": "^2.7.1",
+    "eslint-plugin-unused-imports": "^2.0.0",
-		"typescript": "^4.7.4"
+    "jest": "^28.1.3",
-	},
+    "prettier": "^2.7.1",
-	"resolutions": {
+    "typescript": "^4.7.4"
-		"@types/react": "17.0.2",
+  },
-		"@types/react-dom": "17.0.2"
+  "resolutions": {
-	},
+    "@types/react": "17.0.2",
-	"packageManager": "yarn@3.2.1"
+    "@types/react-dom": "17.0.2"
+  },
+  "packageManager": "yarn@3.2.1"
 }

public/locales/en/common.json

@@ -2,5 +2,10 @@
   "actions": {
     "save": "Save"
   },
-  "tip": "Tip: "
+  "tip": "Tip: ",
+  "time": {
+    "seconds": "seconds",
+    "minutes": "minutes",
+    "hours": "hours"
+  }
 }

public/locales/en/modules/usenet.json

@@ -0,0 +1,49 @@
+{
+  "descriptor": {
+    "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"
+  },
+  "info": {
+    "sizeLeft": "Size left",
+    "paused": "Paused"
+  },
+  "queue": {
+    "header": {
+      "name": "Name",
+      "size": "Size",
+      "eta": "ETA",
+      "progress": "Progress"
+    },
+    "empty": "Queue is empty.",
+    "error": {
+      "title": "Error!",
+      "message": "Some error has occured while fetching data:"
+    },
+    "paused": "Paused"
+  },
+  "history": {
+    "header": {
+      "name": "Name",
+      "size": "Size",
+      "duration": "Download Duration"
+    },
+    "empty": "Queue is empty.",
+    "error": {
+      "title": "Error!",
+      "message": "Some error has occured while fetching data:"
+    },
+    "paused": "Paused"
+  }
+}

src/components/AppShelf/AddAppShelfItem.tsx

@@ -276,7 +276,8 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
                 form.values.type === 'Lidarr' ||
                 form.values.type === 'Overseerr' ||
                 form.values.type === 'Jellyseerr' ||
-                form.values.type === 'Readarr') && (
+                form.values.type === 'Readarr' ||
+                form.values.type === 'Sabnzbd') && (
                 <>
                   <TextInput
                     required

src/components/AppShelf/AppShelf.tsx

@@ -1,5 +1,13 @@
 import React, { useState } from 'react';
-import { Accordion, Grid, Paper, Stack, useMantineColorScheme } from '@mantine/core';
+import {
+  Accordion,
+  Divider,
+  Grid,
+  Paper,
+  Stack,
+  Title,
+  useMantineColorScheme,
+} from '@mantine/core';
 import {
   closestCenter,
   DndContext,
@@ -16,8 +24,9 @@ import { useConfig } from '../../tools/state';
 
 import { SortableAppShelfItem, AppShelfItem } from './AppShelfItem';
 import { ModuleMenu, ModuleWrapper } from '../../modules/moduleWrapper';
-import { DownloadsModule } from '../../modules';
+import { UsenetModule, TorrentsModule } from '../../modules';
-import DownloadComponent from '../../modules/downloads/DownloadsModule';
+import TorrentsComponent from '../../modules/torrents/TorrentsModule';
+import { UsenetComponent } from '../../modules/usenet/UsenetModule';
 
 const AppShelf = (props: any) => {
   const { config, setConfig } = useConfig();
@@ -126,7 +135,11 @@ const AppShelf = (props: any) => {
     const noCategory = config.services.filter(
       (e) => e.category === undefined || e.category === null
     );
-    const downloadEnabled = config.modules?.[DownloadsModule.id]?.enabled ?? false;
+
+    const torrentEnabled = config.modules?.[TorrentsModule.id]?.enabled ?? false;
+    const usenetEnabled = config.modules?.[UsenetModule.id]?.enabled ?? false;
+
+    const downloadEnabled = usenetEnabled || torrentEnabled;
     // Create an item with 0: true, 1: true, 2: true... For each category
     return (
       // TODO: Style accordion so that the bar is transparent to the user settings
@@ -159,7 +172,6 @@ const AppShelf = (props: any) => {
               <Accordion.Control>{t('accordions.downloads.text')}</Accordion.Control>
               <Accordion.Panel>
                 <Paper
-                  p="lg"
                   radius="lg"
                   style={{
                     background: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '255, 255, 255,'} \
@@ -170,8 +182,23 @@ const AppShelf = (props: any) => {
                 ${(config.settings.appOpacity || 100) / 100}`,
                   }}
                 >
-                  <ModuleMenu module={DownloadsModule} />
+                  {torrentEnabled && (
-                  <DownloadComponent />
+                    <>
+                      <Title size="h2">Torrents</Title>
+                      <ModuleMenu module={TorrentsModule} />
+                      <TorrentsComponent />
+                    </>
+                  )}
+                  {usenetEnabled && (
+                    <>
+                      {torrentEnabled && <Divider my="sm" />}
+                      <Title size="h2" mt={0}>
+                        Usenet
+                      </Title>
+                      <ModuleMenu module={UsenetModule} />
+                      <UsenetComponent />
+                    </>
+                  )}
                 </Paper>
               </Accordion.Panel>
             </Accordion.Item>
@@ -183,7 +210,8 @@ const AppShelf = (props: any) => {
   return (
     <Stack>
       {getItems()}
-      <ModuleWrapper mt="xl" module={DownloadsModule} />
+      <ModuleWrapper mt="xl" module={TorrentsModule} />
+      <ModuleWrapper mt="xl" module={UsenetModule} />
     </Stack>
   );
 };

src/components/AppShelf/SmallServiceItem.tsx

@@ -1,4 +1,4 @@
-import { Anchor, Avatar, Group, Text } from '@mantine/core';
+import { Avatar, Group, Text } from '@mantine/core';
 
 interface smallServiceItem {
   label: string;

src/modules/index.ts

@@ -1,9 +1,10 @@
 export * from './calendar';
 export * from './dashdot';
 export * from './date';
-export * from './downloads';
+export * from './torrents';
 export * from './ping';
 export * from './search';
 export * from './weather';
 export * from './docker';
 export * from './overseerr';
+export * from './usenet';

src/modules/torrents/TorrentsModule.tsx

@@ -13,9 +13,9 @@ import {
 import { IconDownload as Download } from '@tabler/icons';
 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 { NormalizedTorrent } from '@ctrl/shared-torrent';
 import { useTranslation } from 'next-i18next';
 import { IModule } from '../ModuleTypes';
 import { useConfig } from '../../tools/state';
@@ -23,20 +23,20 @@ import { AddItemShelfButton } from '../../components/AppShelf/AddAppShelfItem';
 import { useSetSafeInterval } from '../../tools/hooks/useSetSafeInterval';
 import { humanFileSize } from '../../tools/humanFileSize';
 
-export const DownloadsModule: IModule = {
+export const TorrentsModule: IModule = {
+  id: 'torrents-status',
   title: 'Torrent',
   icon: Download,
-  component: DownloadComponent,
+  component: TorrentsComponent,
   options: {
     hidecomplete: {
       name: 'descriptor.settings.hideComplete',
       value: false,
     },
   },
-  id: 'torrents-status',
 };
 
-export default function DownloadComponent() {
+export default function TorrentsComponent() {
   const { config } = useConfig();
   const { height, width } = useViewportSize();
   const downloadServices =
@@ -46,13 +46,14 @@ export default function DownloadComponent() {
         service.type === 'Transmission' ||
         service.type === 'Deluge'
     ) ?? [];
+
   const hideComplete: boolean =
-    (config?.modules?.[DownloadsModule.id]?.options?.hidecomplete?.value as boolean) ?? false;
+    (config?.modules?.[TorrentsModule.id]?.options?.hidecomplete?.value as boolean) ?? false;
   const [torrents, setTorrents] = useState<NormalizedTorrent[]>([]);
   const setSafeInterval = useSetSafeInterval();
   const [isLoading, setIsLoading] = useState(true);
 
-  const { t } = useTranslation(`modules/${DownloadsModule.id}`);
+  const { t } = useTranslation(`modules/${TorrentsModule.id}`);
 
   useEffect(() => {
     setIsLoading(true);
@@ -60,7 +61,7 @@ export default function DownloadComponent() {
     const interval = setInterval(() => {
       // Send one request with each download service inside
       axios
-        .post('/api/modules/downloads')
+        .post('/api/modules/torrents')
         .then((response) => {
           setTorrents(response.data);
           setIsLoading(false);

src/modules/torrents/TotalDownloadsModule.tsx

@@ -37,7 +37,7 @@ export default function TotalDownloadsComponent() {
         service.type === 'Transmission' ||
         service.type === 'Deluge'
     ) ?? [];
-    const { t } = useTranslation(`modules/${TotalDownloadsModule.id}`);
+  const { t } = useTranslation(`modules/${TotalDownloadsModule.id}`);
 
   const [torrentHistory, torrentHistoryHandlers] = useListState<torrentHistory>([]);
   const [torrents, setTorrents] = useState<NormalizedTorrent[]>([]);

src/modules/torrents/index.ts

@@ -1,2 +1,2 @@
-export { DownloadsModule } from './DownloadsModule';
+export { TorrentsModule } from './TorrentsModule';
 export { TotalDownloadsModule } from './TotalDownloadsModule';

src/modules/usenet/UsenetHistoryList.tsx

@@ -0,0 +1,133 @@
+import {
+  Alert,
+  Center,
+  Code,
+  Group,
+  Pagination,
+  Skeleton,
+  Table,
+  Text,
+  Title,
+  Tooltip,
+} from '@mantine/core';
+import { IconAlertCircle } from '@tabler/icons';
+import { AxiosError } from 'axios';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import { useTranslation } from 'next-i18next';
+import { FunctionComponent, useState } from 'react';
+import { useGetUsenetHistory } from '../../tools/hooks/api';
+import { humanFileSize } from '../../tools/humanFileSize';
+import { parseDuration } from '../../tools/parseDuration';
+
+dayjs.extend(duration);
+
+interface UsenetHistoryListProps {
+  serviceId: string;
+}
+
+const PAGE_SIZE = 10;
+
+export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ serviceId }) => {
+  const [page, setPage] = useState(1);
+  const { t } = useTranslation(['modules/usenet', 'common']);
+
+  const { data, isLoading, isError, error } = useGetUsenetHistory({
+    limit: PAGE_SIZE,
+    offset: (page - 1) * PAGE_SIZE,
+    serviceId,
+  });
+  const totalPages = Math.ceil((data?.total || 1) / PAGE_SIZE);
+
+  if (isLoading) {
+    return (
+      <>
+        <Skeleton height={40} mt={10} />
+        <Skeleton height={40} mt={10} />
+        <Skeleton height={40} mt={10} />
+      </>
+    );
+  }
+
+  if (isError) {
+    return (
+      <Group position="center">
+        <Alert
+          icon={<IconAlertCircle size={16} />}
+          my="lg"
+          title={t('modules/usenet:history.error.title')}
+          color="red"
+          radius="md"
+        >
+          {t('modules/usenet:history.error.message')}
+          <Code mt="sm" block>
+            {(error as AxiosError)?.response?.data as string}
+          </Code>
+        </Alert>
+      </Group>
+    );
+  }
+
+  if (!data || data.items.length <= 0) {
+    return (
+      <Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <Title order={3}>{t('modules/usenet:history.empty')}</Title>
+      </Center>
+    );
+  }
+
+  return (
+    <>
+      <Table highlightOnHover style={{ tableLayout: 'fixed' }}>
+        <colgroup>
+          <col span={1} />
+          <col span={1} style={{ width: 100 }} />
+          <col span={1} style={{ width: 200 }} />
+        </colgroup>
+        <thead>
+          <tr>
+            <th>{t('modules/usenet:history.header.name')}</th>
+            <th>{t('modules/usenet:history.header.size')}</th>
+            <th>{t('modules/usenet:history.header.duration')}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {data.items.map((history) => (
+            <tr key={history.id}>
+              <td>
+                <Tooltip position="top" label={history.name}>
+                  <Text
+                    size="xs"
+                    style={{
+                      whiteSpace: 'nowrap',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                    }}
+                  >
+                    {history.name}
+                  </Text>
+                </Tooltip>
+              </td>
+              <td>
+                <Text size="xs">{humanFileSize(history.size)}</Text>
+              </td>
+              <td>
+                <Text size="xs">{parseDuration(history.time, t)}</Text>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </Table>
+      {totalPages > 1 && (
+        <Pagination
+          size="sm"
+          position="center"
+          mt="md"
+          total={totalPages}
+          page={page}
+          onChange={setPage}
+        />
+      )}
+    </>
+  );
+};

src/modules/usenet/UsenetModule.tsx

@@ -0,0 +1,102 @@
+import { Badge, Button, Group, Select, Stack, Tabs, Text, Title } from '@mantine/core';
+import { IconDownload, IconPlayerPause, IconPlayerPlay } from '@tabler/icons';
+import { FunctionComponent, useEffect, useState } from 'react';
+
+import { useTranslation } from 'next-i18next';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import { IModule } from '../ModuleTypes';
+import { UsenetQueueList } from './UsenetQueueList';
+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;
+  }
+
+  return (
+    <Tabs keepMounted={false} defaultValue="queue">
+      <Group mb="md">
+        <Tabs.List style={{ flex: 1 }}>
+          <Tabs.Tab value="queue">{t('tabs.queue')}</Tabs.Tab>
+          <Tabs.Tab value="history">{t('tabs.history')}</Tabs.Tab>
+          {data && (
+            <Group position="right" ml="auto" mb="lg">
+              <Badge>{humanFileSize(data?.speed)}/s</Badge>
+              <Badge>
+                {t('info.sizeLeft')}: {humanFileSize(data?.sizeLeft)}
+              </Badge>
+              {data.paused ? (
+                <Button uppercase onClick={() => resume()} radius="xl" size="xs">
+                  <IconPlayerPlay size={16} style={{ marginRight: 5 }} /> {t('info.paused')}
+                </Button>
+              ) : (
+                <Button uppercase onClick={() => pause()} radius="xl" size="xs">
+                  <IconPlayerPause size={16} style={{ marginRight: 5 }} />{' '}
+                  {dayjs.duration(data.eta, 's').format('HH:mm:ss')}
+                </Button>
+              )}
+            </Group>
+          )}
+        </Tabs.List>
+        {downloadServices.length > 1 && (
+          <Select
+            value={selectedServiceId}
+            onChange={setSelectedService}
+            ml="xs"
+            data={downloadServices.map((service) => ({ value: service.id, label: service.name }))}
+          />
+        )}
+      </Group>
+      <Tabs.Panel value="queue">
+        <UsenetQueueList serviceId={selectedServiceId} />
+      </Tabs.Panel>
+      <Tabs.Panel value="history">
+        <UsenetHistoryList serviceId={selectedServiceId} />
+      </Tabs.Panel>
+    </Tabs>
+  );
+};
+
+export const UsenetModule: IModule = {
+  id: 'usenet',
+  title: 'Usenet',
+  icon: IconDownload,
+  component: UsenetComponent,
+};
+
+export default UsenetComponent;

src/modules/usenet/UsenetQueueList.tsx

@@ -0,0 +1,167 @@
+import {
+  ActionIcon,
+  Alert,
+  Center,
+  Code,
+  Group,
+  Pagination,
+  Progress,
+  Skeleton,
+  Table,
+  Text,
+  Title,
+  Tooltip,
+  useMantineTheme,
+} from '@mantine/core';
+import { IconAlertCircle, IconPlayerPause, IconPlayerPlay } from '@tabler/icons';
+import { AxiosError } from 'axios';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import { useTranslation } from 'next-i18next';
+import { FunctionComponent, useState } from 'react';
+import { useGetUsenetDownloads } from '../../tools/hooks/api';
+import { humanFileSize } from '../../tools/humanFileSize';
+
+dayjs.extend(duration);
+
+interface UsenetQueueListProps {
+  serviceId: string;
+}
+
+const PAGE_SIZE = 10;
+
+export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ serviceId }) => {
+  const theme = useMantineTheme();
+  const { t } = useTranslation('modules/usenet');
+
+  const [page, setPage] = useState(1);
+  const { data, isLoading, isError, error } = useGetUsenetDownloads({
+    limit: PAGE_SIZE,
+    offset: (page - 1) * PAGE_SIZE,
+    serviceId,
+  });
+  const totalPages = Math.ceil((data?.total || 1) / PAGE_SIZE);
+
+  if (isLoading) {
+    return (
+      <>
+        <Skeleton height={40} mt={10} />
+        <Skeleton height={40} mt={10} />
+        <Skeleton height={40} mt={10} />
+      </>
+    );
+  }
+
+  if (isError) {
+    return (
+      <Group position="center">
+        <Alert
+          icon={<IconAlertCircle size={16} />}
+          my="lg"
+          title={t('queue.error.title')}
+          color="red"
+          radius="md"
+        >
+          {t('queue.error.message')}
+          <Code mt="sm" block>
+            {(error as AxiosError)?.response?.data as string}
+          </Code>
+        </Alert>
+      </Group>
+    );
+  }
+
+  if (!data || data.items.length <= 0) {
+    return (
+      <Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <Title order={3}>{t('queue.empty')}</Title>
+      </Center>
+    );
+  }
+
+  return (
+    <>
+      <Table highlightOnHover style={{ tableLayout: 'fixed' }}>
+        <thead>
+          <tr>
+            <th style={{ width: 50 }} />
+            <th style={{ width: '75%' }}>{t('queue.header.name')}</th>
+            <th style={{ width: 100 }}>{t('queue.header.size')}</th>
+            <th style={{ width: 100 }}>{t('queue.header.eta')}</th>
+            <th style={{ width: 200 }}>{t('queue.header.progress')}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {data.items.map((nzb) => (
+            <tr key={nzb.id}>
+              <td>
+                {nzb.state === 'paused' ? (
+                  <Tooltip label="NOT IMPLEMENTED">
+                    <ActionIcon color="gray" variant="subtle" radius="xl" size="sm">
+                      <IconPlayerPlay size="16" />
+                    </ActionIcon>
+                  </Tooltip>
+                ) : (
+                  <Tooltip label="NOT IMPLEMENTED">
+                    <ActionIcon color="primary" variant="subtle" radius="xl" size="sm">
+                      <IconPlayerPause size="16" />
+                    </ActionIcon>
+                  </Tooltip>
+                )}
+              </td>
+              <td>
+                <Tooltip position="top" label={nzb.name}>
+                  <Text
+                    style={{
+                      whiteSpace: 'nowrap',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                    }}
+                    size="xs"
+                    color={nzb.state === 'paused' ? 'dimmed' : undefined}
+                  >
+                    {nzb.name}
+                  </Text>
+                </Tooltip>
+              </td>
+              <td>
+                <Text size="xs">{humanFileSize(nzb.size)}</Text>
+              </td>
+              <td>
+                {nzb.eta <= 0 ? (
+                  <Text size="xs" color="dimmed">
+                    {t('queue.paused')}
+                  </Text>
+                ) : (
+                  <Text size="xs">{dayjs.duration(nzb.eta, 's').format('H:mm:ss')}</Text>
+                )}
+              </td>
+              <td style={{ display: 'flex', alignItems: 'center' }}>
+                <Text mr="sm" style={{ whiteSpace: 'nowrap' }}>
+                  {nzb.progress.toFixed(1)}%
+                </Text>
+                <Progress
+                  radius="lg"
+                  color={nzb.eta > 0 ? theme.primaryColor : 'lightgrey'}
+                  value={nzb.progress}
+                  size="lg"
+                  style={{ width: '100%' }}
+                />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </Table>
+      {totalPages > 1 && (
+        <Pagination
+          size="sm"
+          position="center"
+          mt="md"
+          total={totalPages}
+          page={page}
+          onChange={setPage}
+        />
+      )}
+    </>
+  );
+};

src/modules/usenet/index.ts

@@ -0,0 +1,2 @@
+export { UsenetModule } from './UsenetModule';
+export * from './types';

src/modules/usenet/types.ts

@@ -0,0 +1,20 @@
+export interface UsenetQueueItem {
+  name: string;
+  progress: number;
+  /**
+   * Size in bytes
+   */
+  size: number;
+  id: string;
+  state: 'paused' | 'downloading' | 'queued';
+  eta: number;
+}
+export interface UsenetHistoryItem {
+  name: string;
+  /**
+   * Size in bytes
+   */
+  size: number;
+  id: string;
+  time: number;
+}

src/pages/_app.tsx

@@ -8,9 +8,11 @@ import { NotificationsProvider } from '@mantine/notifications';
 import { useHotkeys } from '@mantine/hooks';
 import { ModalsProvider } from '@mantine/modals';
 import { appWithTranslation } from 'next-i18next';
+import { QueryClientProvider } from '@tanstack/react-query';
 import { ConfigProvider } from '../tools/state';
 import { theme } from '../tools/theme';
 import { ColorTheme } from '../tools/color';
+import { queryClient } from '../tools/queryClient';
 
 function App(this: any, props: AppProps & { colorScheme: ColorScheme }) {
   const { Component, pageProps } = props;
@@ -40,43 +42,44 @@ function App(this: any, props: AppProps & { colorScheme: ColorScheme }) {
       <Head>
         <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
       </Head>
-
+      <QueryClientProvider client={queryClient}>
-      <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
+        <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
-        <ColorTheme.Provider value={colorTheme}>
+          <ColorTheme.Provider value={colorTheme}>
-          <MantineProvider
+            <MantineProvider
-            theme={{
+              theme={{
-              ...theme,
+                ...theme,
-              components: {
+                components: {
-                Checkbox: {
+                  Checkbox: {
-                  styles: {
+                    styles: {
-                    input: { cursor: 'pointer' },
+                      input: { cursor: 'pointer' },
-                    label: { cursor: 'pointer' },
+                      label: { cursor: 'pointer' },
+                    },
+                  },
+                  Switch: {
+                    styles: {
+                      input: { cursor: 'pointer' },
+                      label: { cursor: 'pointer' },
+                    },
                   },
                 },
-                Switch: {
+                primaryColor,
-                  styles: {
+                primaryShade,
-                    input: { cursor: 'pointer' },
+                colorScheme,
-                    label: { cursor: 'pointer' },
+              }}
-                  },
+              withGlobalStyles
-                },
+              withNormalizeCSS
-              },
+            >
-              primaryColor,
+              <NotificationsProvider limit={4} position="bottom-left">
-              primaryShade,
+                <ModalsProvider>
-              colorScheme,
+                  <ConfigProvider>
-            }}
+                    <Component {...pageProps} />
-            withGlobalStyles
+                  </ConfigProvider>
-            withNormalizeCSS
+                </ModalsProvider>
-          >
+              </NotificationsProvider>
-            <NotificationsProvider limit={4} position="bottom-left">
+            </MantineProvider>
-              <ModalsProvider>
+          </ColorTheme.Provider>
-                <ConfigProvider>
+        </ColorSchemeProvider>
-                  <Component {...pageProps} />
+      </QueryClientProvider>
-                </ConfigProvider>
-              </ModalsProvider>
-            </NotificationsProvider>
-          </MantineProvider>
-        </ColorTheme.Provider>
-      </ColorSchemeProvider>
     </>
   );
 }

src/pages/api/modules/usenet/history.ts

@@ -0,0 +1,69 @@
+import { getCookie } from 'cookies-next';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import { NextApiRequest, NextApiResponse } from 'next';
+import { Client } from 'sabnzbd-api';
+import { UsenetHistoryItem } from '../../../../modules';
+import { getConfig } from '../../../../tools/getConfig';
+import { getServiceById } from '../../../../tools/hooks/useGetServiceByType';
+import { Config } from '../../../../tools/types';
+
+dayjs.extend(duration);
+
+export interface UsenetHistoryRequestParams {
+  serviceId: string;
+  offset: number;
+  limit: number;
+}
+
+export interface UsenetHistoryResponse {
+  items: UsenetHistoryItem[];
+  total: number;
+}
+
+async function Get(req: NextApiRequest, res: NextApiResponse) {
+  try {
+    const configName = getCookie('config-name', { req });
+    const { config }: { config: Config } = getConfig(configName?.toString() ?? 'default').props;
+    const { limit, offset, serviceId } = req.query as any as UsenetHistoryRequestParams;
+
+    const service = getServiceById(config, serviceId);
+
+    if (!service) {
+      throw new Error(`Service with ID "${req.query.serviceId}" could not be found.`);
+    }
+
+    if (!service.apiKey) {
+      throw new Error(`API Key for service "${service.name}" is missing`);
+    }
+    const { origin } = new URL(service.url);
+
+    const history = await new Client(origin, service.apiKey).history(offset, limit);
+
+    const items: UsenetHistoryItem[] = history.slots.map((slot) => ({
+      id: slot.nzo_id,
+      name: slot.name,
+      size: slot.bytes,
+      time: slot.download_time,
+    }));
+    const response: UsenetHistoryResponse = {
+      items,
+      total: history.noofslots,
+    };
+
+    return res.status(200).json(response);
+  } catch (err) {
+    return res.status(500).send((err as any).message);
+  }
+}
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  // Filter out if the reuqest is a POST or a GET
+  if (req.method === 'GET') {
+    return Get(req, res);
+  }
+  return res.status(405).json({
+    statusCode: 405,
+    message: 'Method not allowed',
+  });
+};

src/pages/api/modules/usenet/index.ts

@@ -0,0 +1,72 @@
+import { getCookie } from 'cookies-next';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import { NextApiRequest, NextApiResponse } from 'next';
+import { Client } from 'sabnzbd-api';
+import { getConfig } from '../../../../tools/getConfig';
+import { getServiceById } from '../../../../tools/hooks/useGetServiceByType';
+import { Config } from '../../../../tools/types';
+
+dayjs.extend(duration);
+
+export interface UsenetInfoRequestParams {
+  serviceId: string;
+}
+
+export interface UsenetInfoResponse {
+  paused: boolean;
+  sizeLeft: number;
+  speed: number;
+  eta: number;
+}
+
+async function Get(req: NextApiRequest, res: NextApiResponse) {
+  try {
+    const configName = getCookie('config-name', { req });
+    const { config }: { config: Config } = getConfig(configName?.toString() ?? 'default').props;
+    const { serviceId } = req.query as any as UsenetInfoRequestParams;
+
+    const service = getServiceById(config, serviceId);
+
+    if (!service) {
+      throw new Error(`Service with ID "${req.query.serviceId}" could not be found.`);
+    }
+
+    if (!service.apiKey) {
+      throw new Error(`API Key for service "${service.name}" is missing`);
+    }
+
+    const { origin } = new URL(service.url);
+
+    const queue = await new Client(origin, service.apiKey).queue(0, -1);
+
+    const [hours, minutes, seconds] = queue.timeleft.split(':');
+    const eta = dayjs.duration({
+      hour: parseInt(hours, 10),
+      minutes: parseInt(minutes, 10),
+      seconds: parseInt(seconds, 10),
+    } as any);
+
+    const response: UsenetInfoResponse = {
+      paused: queue.paused,
+      sizeLeft: parseFloat(queue.mbleft) * 1024 * 1024,
+      speed: parseFloat(queue.kbpersec) * 1000,
+      eta: eta.asSeconds(),
+    };
+
+    return res.status(200).json(response);
+  } catch (err) {
+    return res.status(500).send((err as any).message);
+  }
+}
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  // Filter out if the reuqest is a POST or a GET
+  if (req.method === 'GET') {
+    return Get(req, res);
+  }
+  return res.status(405).json({
+    statusCode: 405,
+    message: 'Method not allowed',
+  });
+};

src/pages/api/modules/usenet/pause.ts

@@ -0,0 +1,51 @@
+import { getCookie } from 'cookies-next';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import { NextApiRequest, NextApiResponse } from 'next';
+import { Client } from 'sabnzbd-api';
+import { getConfig } from '../../../../tools/getConfig';
+import { getServiceById } from '../../../../tools/hooks/useGetServiceByType';
+import { Config } from '../../../../tools/types';
+
+dayjs.extend(duration);
+
+export interface UsenetPauseRequestParams {
+  serviceId: string;
+}
+
+async function Post(req: NextApiRequest, res: NextApiResponse) {
+  try {
+    const configName = getCookie('config-name', { req });
+    const { config }: { config: Config } = getConfig(configName?.toString() ?? 'default').props;
+    const { serviceId } = req.query as any as UsenetPauseRequestParams;
+
+    const service = getServiceById(config, serviceId);
+
+    if (!service) {
+      throw new Error(`Service with ID "${req.query.serviceId}" could not be found.`);
+    }
+
+    if (!service.apiKey) {
+      throw new Error(`API Key for service "${service.name}" is missing`);
+    }
+
+    const { origin } = new URL(service.url);
+
+    const result = await new Client(origin, service.apiKey).queuePause();
+
+    return res.status(200).json(result);
+  } catch (err) {
+    return res.status(500).send((err as any).message);
+  }
+}
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  // Filter out if the reuqest is a POST or a GET
+  if (req.method === 'POST') {
+    return Post(req, res);
+  }
+  return res.status(405).json({
+    statusCode: 405,
+    message: 'Method not allowed',
+  });
+};

src/pages/api/modules/usenet/queue.ts

@@ -0,0 +1,81 @@
+import { getCookie } from 'cookies-next';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import { NextApiRequest, NextApiResponse } from 'next';
+import { Client } from 'sabnzbd-api';
+import { UsenetQueueItem } from '../../../../modules';
+import { getConfig } from '../../../../tools/getConfig';
+import { getServiceById } from '../../../../tools/hooks/useGetServiceByType';
+import { Config } from '../../../../tools/types';
+
+dayjs.extend(duration);
+
+export interface UsenetQueueRequestParams {
+  serviceId: string;
+  offset: number;
+  limit: number;
+}
+
+export interface UsenetQueueResponse {
+  items: UsenetQueueItem[];
+  total: number;
+}
+
+async function Get(req: NextApiRequest, res: NextApiResponse) {
+  try {
+    const configName = getCookie('config-name', { req });
+    const { config }: { config: Config } = getConfig(configName?.toString() ?? 'default').props;
+    const { limit, offset, serviceId } = req.query as any as UsenetQueueRequestParams;
+
+    const service = getServiceById(config, serviceId);
+
+    if (!service) {
+      throw new Error(`Service with ID "${req.query.serviceId}" could not be found.`);
+    }
+
+    if (!service.apiKey) {
+      throw new Error(`API Key for service "${service.name}" is missing`);
+    }
+
+    const { origin } = new URL(service.url);
+    const queue = await new Client(origin, service.apiKey).queue(offset, limit);
+
+    const items: UsenetQueueItem[] = queue.slots.map((slot) => {
+      const [hours, minutes, seconds] = slot.timeleft.split(':');
+      const eta = dayjs.duration({
+        hour: parseInt(hours, 10),
+        minutes: parseInt(minutes, 10),
+        seconds: parseInt(seconds, 10),
+      } as any);
+
+      return {
+        id: slot.nzo_id,
+        eta: eta.asSeconds(),
+        name: slot.filename,
+        progress: parseFloat(slot.percentage),
+        size: parseFloat(slot.mb) * 1000 * 1000,
+        state: slot.status.toLowerCase() as any,
+      };
+    });
+
+    const response: UsenetQueueResponse = {
+      items,
+      total: queue.noofslots,
+    };
+
+    return res.status(200).json(response);
+  } catch (err) {
+    return res.status(500).send((err as any).message);
+  }
+}
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  // Filter out if the reuqest is a POST or a GET
+  if (req.method === 'GET') {
+    return Get(req, res);
+  }
+  return res.status(405).json({
+    statusCode: 405,
+    message: 'Method not allowed',
+  });
+};

src/pages/api/modules/usenet/resume.ts

@@ -0,0 +1,52 @@
+import { getCookie } from 'cookies-next';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import { NextApiRequest, NextApiResponse } from 'next';
+import { Client } from 'sabnzbd-api';
+import { getConfig } from '../../../../tools/getConfig';
+import { getServiceById } from '../../../../tools/hooks/useGetServiceByType';
+import { Config } from '../../../../tools/types';
+
+dayjs.extend(duration);
+
+export interface UsenetResumeRequestParams {
+  serviceId: string;
+  nzbId?: string;
+}
+
+async function Post(req: NextApiRequest, res: NextApiResponse) {
+  try {
+    const configName = getCookie('config-name', { req });
+    const { config }: { config: Config } = getConfig(configName?.toString() ?? 'default').props;
+    const { serviceId } = req.query as any as UsenetResumeRequestParams;
+
+    const service = getServiceById(config, serviceId);
+
+    if (!service) {
+      throw new Error(`Service with ID "${req.query.serviceId}" could not be found.`);
+    }
+
+    if (!service.apiKey) {
+      throw new Error(`API Key for service "${service.name}" is missing`);
+    }
+
+    const { origin } = new URL(service.url);
+
+    const result = await new Client(origin, service.apiKey).queueResume();
+
+    return res.status(200).json(result);
+  } catch (err) {
+    return res.status(500).send((err as any).message);
+  }
+}
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  // Filter out if the reuqest is a POST or a GET
+  if (req.method === 'POST') {
+    return Post(req, res);
+  }
+  return res.status(405).json({
+    statusCode: 405,
+    message: 'Method not allowed',
+  });
+};

src/pages/index.tsx

@@ -50,6 +50,7 @@ export async function getServerSideProps({
     'modules/date',
     'modules/calendar',
     'modules/dlspeed',
+    'modules/usenet',
     'modules/search',
     'modules/torrents-status',
     'modules/weather',

src/tools/hooks/api.ts

@@ -0,0 +1,154 @@
+import { useMutation, useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import { Results } from 'sabnzbd-api';
+import {
+  UsenetQueueRequestParams,
+  UsenetQueueResponse,
+} from '../../pages/api/modules/usenet/queue';
+import {
+  UsenetHistoryRequestParams,
+  UsenetHistoryResponse,
+} from '../../pages/api/modules/usenet/history';
+import { UsenetInfoRequestParams, UsenetInfoResponse } from '../../pages/api/modules/usenet';
+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],
+    async () =>
+      (
+        await axios.get<UsenetInfoResponse>('/api/modules/usenet', {
+          params,
+        })
+      ).data,
+    {
+      refetchInterval: POLLING_INTERVAL,
+      keepPreviousData: true,
+      retry: 2,
+      enabled: !!params.serviceId,
+    }
+  );
+
+export const useGetUsenetDownloads = (params: UsenetQueueRequestParams) =>
+  useQuery(
+    ['usenetDownloads', ...Object.values(params)],
+    async () =>
+      (
+        await axios.get<UsenetQueueResponse>('/api/modules/usenet/queue', {
+          params,
+        })
+      ).data,
+    {
+      refetchInterval: POLLING_INTERVAL,
+      keepPreviousData: true,
+      retry: 2,
+    }
+  );
+
+export const useGetUsenetHistory = (params: UsenetHistoryRequestParams) =>
+  useQuery(
+    ['usenetHistory', ...Object.values(params)],
+    async () =>
+      (
+        await axios.get<UsenetHistoryResponse>('/api/modules/usenet/history', {
+          params,
+        })
+      ).data,
+    {
+      refetchInterval: POLLING_INTERVAL,
+      keepPreviousData: true,
+      retry: 2,
+    }
+  );
+
+export const usePauseUsenetQueue = (params: UsenetPauseRequestParams) =>
+  useMutation(
+    ['usenetPause', ...Object.values(params)],
+    async () =>
+      (
+        await axios.post<Results>(
+          '/api/modules/usenet/pause',
+          {},
+          {
+            params,
+          }
+        )
+      ).data,
+    {
+      async onMutate() {
+        await queryClient.cancelQueries(['usenetInfo', params.serviceId]);
+        const previousInfo = queryClient.getQueryData<UsenetInfoResponse>([
+          'usenetInfo',
+          params.serviceId,
+        ]);
+
+        if (previousInfo) {
+          queryClient.setQueryData<UsenetInfoResponse>(['usenetInfo', params.serviceId], {
+            ...previousInfo,
+            paused: true,
+          });
+        }
+
+        return { previousInfo };
+      },
+      onError(err, _, context) {
+        if (context?.previousInfo) {
+          queryClient.setQueryData<UsenetInfoResponse>(
+            ['usenetInfo', params.serviceId],
+            context.previousInfo
+          );
+        }
+      },
+      onSettled() {
+        queryClient.invalidateQueries(['usenetInfo', params.serviceId]);
+      },
+    }
+  );
+
+export const useResumeUsenetQueue = (params: UsenetResumeRequestParams) =>
+  useMutation(
+    ['usenetResume', ...Object.values(params)],
+    async () =>
+      (
+        await axios.post<Results>(
+          '/api/modules/usenet/resume',
+          {},
+          {
+            params,
+          }
+        )
+      ).data,
+    {
+      async onMutate() {
+        await queryClient.cancelQueries(['usenetInfo', params.serviceId]);
+        const previousInfo = queryClient.getQueryData<UsenetInfoResponse>([
+          'usenetInfo',
+          params.serviceId,
+        ]);
+
+        if (previousInfo) {
+          queryClient.setQueryData<UsenetInfoResponse>(['usenetInfo', params.serviceId], {
+            ...previousInfo,
+            paused: false,
+          });
+        }
+
+        return { previousInfo };
+      },
+      onError(err, _, context) {
+        if (context?.previousInfo) {
+          queryClient.setQueryData<UsenetInfoResponse>(
+            ['usenetInfo', params.serviceId],
+            context.previousInfo
+          );
+        }
+      },
+      onSettled() {
+        queryClient.invalidateQueries(['usenetInfo', params.serviceId]);
+      },
+    }
+  );

src/tools/hooks/useGetServiceByType.ts

@@ -0,0 +1,14 @@
+import { useConfig } from '../state';
+import { Config, ServiceType } from '../types';
+
+export const useGetServiceByType = (...serviceTypes: ServiceType[]) => {
+  const { config } = useConfig();
+
+  return getServiceByType(config, ...serviceTypes);
+};
+
+export const getServiceByType = (config: Config, ...serviceTypes: ServiceType[]) =>
+  config.services.filter((s) => serviceTypes.includes(s.type));
+
+export const getServiceById = (config: Config, id: string) =>
+  config.services.find((s) => s.id === id);

src/tools/parseDuration.ts

@@ -0,0 +1,20 @@
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import { TFunction } from 'next-i18next';
+
+dayjs.extend(duration);
+
+export const parseDuration = (time: number, t: TFunction): string => {
+  const etaDuration = dayjs.duration(time, 's');
+
+  let eta = etaDuration.format(`s [${t('common:time.seconds')}]`);
+
+  if (etaDuration.asMinutes() > 1) {
+    eta = etaDuration.format(`m [${t('common:time.minutes')}] `) + eta;
+  }
+  if (etaDuration.asHours() > 1) {
+    eta = etaDuration.format(`H [${t('common:time.hours')}] `) + eta;
+  }
+
+  return eta;
+};

src/tools/queryClient.ts

@@ -0,0 +1,3 @@
+import { QueryClient } from '@tanstack/react-query';
+
+export const queryClient = new QueryClient();

src/tools/types.ts

@@ -74,6 +74,7 @@ export const ServiceTypeList = [
   'Transmission',
   'Overseerr',
   'Jellyseerr',
+  'Sabnzbd',
 ];
 export type ServiceType =
   | 'Other'
@@ -88,7 +89,8 @@ export type ServiceType =
   | 'Sonarr'
   | 'Overseerr'
   | 'Jellyseerr'
-  | 'Transmission';
+  | 'Transmission'
+  | 'Sabnzbd';
 
 export function tryMatchPort(name: string | undefined, form?: any) {
   if (!name) {
@@ -114,6 +116,7 @@ export const portmap = [
   { name: 'emby', value: '8096' },
   { name: 'overseerr', value: '5055' },
   { name: 'dash.', value: '3001' },
+  { name: 'sabnzbd', value: '8080' },
 ];
 
 export const MatchingImages: {

yarn.lock

@@ -1860,7 +1860,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sindresorhus/is@npm:^4.6.0":
+"@sindresorhus/is@npm:^4.0.0, @sindresorhus/is@npm:^4.6.0":
   version: 4.6.0
   resolution: "@sindresorhus/is@npm:4.6.0"
   checksum: 83839f13da2c29d55c97abc3bc2c55b250d33a0447554997a85c539e058e57b8da092da396e252b11ec24a0279a0bed1f537fa26302209327060643e327f81d2
@@ -1885,6 +1885,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@szmarczak/http-timer@npm:^4.0.5":
+  version: 4.0.6
+  resolution: "@szmarczak/http-timer@npm:4.0.6"
+  dependencies:
+    defer-to-connect: ^2.0.0
+  checksum: c29df3bcec6fc3bdec2b17981d89d9c9fc9bd7d0c9bcfe92821dc533f4440bc890ccde79971838b4ceed1921d456973c4180d7175ee1d0023ad0562240a58d95
+  languageName: node
+  linkType: hard
+
 "@szmarczak/http-timer@npm:^5.0.1":
   version: 5.0.1
   resolution: "@szmarczak/http-timer@npm:5.0.1"
@@ -1909,6 +1918,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tanstack/query-core@npm:^4.0.0-beta.1":
+  version: 4.2.1
+  resolution: "@tanstack/query-core@npm:4.2.1"
+  checksum: f71854969e02de6c2cfbe25e8b11e275b61e1297a902e0d5c4beac580a87db99555c1c21d536d838ce5e0664bc49da7b60a3c6b8de334c7004c5005fe2a48030
+  languageName: node
+  linkType: hard
+
+"@tanstack/react-query@npm:^4.2.1":
+  version: 4.2.1
+  resolution: "@tanstack/react-query@npm:4.2.1"
+  dependencies:
+    "@tanstack/query-core": ^4.0.0-beta.1
+    "@types/use-sync-external-store": ^0.0.3
+    use-sync-external-store: ^1.2.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-native: "*"
+  peerDependenciesMeta:
+    react-dom:
+      optional: true
+    react-native:
+      optional: true
+  checksum: bbf3a808645c26c649971dc182bb9a7ed7a1d89f6456b60685c6081b8be6ae84ae83b39c7eacb96c4f3b6677ca001d8114037329951987b7a8d65de53b28c862
+  languageName: node
+  linkType: hard
+
 "@tootallnate/once@npm:2":
   version: 2.0.0
   resolution: "@tootallnate/once@npm:2.0.0"
@@ -1957,7 +1993,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/cacheable-request@npm:^6.0.2":
+"@types/cacheable-request@npm:^6.0.1, @types/cacheable-request@npm:^6.0.2":
   version: 6.0.2
   resolution: "@types/cacheable-request@npm:6.0.2"
   dependencies:
@@ -2154,6 +2190,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/use-sync-external-store@npm:^0.0.3":
+  version: 0.0.3
+  resolution: "@types/use-sync-external-store@npm:0.0.3"
+  checksum: 161ddb8eec5dbe7279ac971531217e9af6b99f7783213566d2b502e2e2378ea19cf5e5ea4595039d730aa79d3d35c6567d48599f69773a02ffcff1776ec2a44e
+  languageName: node
+  linkType: hard
+
 "@types/uuid@npm:^8.3.4":
   version: 8.3.4
   resolution: "@types/uuid@npm:8.3.4"
@@ -2805,6 +2848,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cacheable-lookup@npm:^5.0.3":
+  version: 5.0.4
+  resolution: "cacheable-lookup@npm:5.0.4"
+  checksum: 763e02cf9196bc9afccacd8c418d942fc2677f22261969a4c2c2e760fa44a2351a81557bd908291c3921fe9beb10b976ba8fa50c5ca837c5a0dd945f16468f2d
+  languageName: node
+  linkType: hard
+
 "cacheable-lookup@npm:^6.0.4":
   version: 6.0.4
   resolution: "cacheable-lookup@npm:6.0.4"
@@ -3397,7 +3447,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"defer-to-connect@npm:^2.0.1":
+"defer-to-connect@npm:^2.0.0, defer-to-connect@npm:^2.0.1":
   version: 2.0.1
   resolution: "defer-to-connect@npm:2.0.1"
   checksum: 8a9b50d2f25446c0bfefb55a48e90afd58f85b21bcf78e9207cd7b804354f6409032a1705c2491686e202e64fc05f147aa5aa45f9aa82627563f045937f5791b
@@ -4597,6 +4647,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"got@npm:^11.8.2":
+  version: 11.8.5
+  resolution: "got@npm:11.8.5"
+  dependencies:
+    "@sindresorhus/is": ^4.0.0
+    "@szmarczak/http-timer": ^4.0.5
+    "@types/cacheable-request": ^6.0.1
+    "@types/responselike": ^1.0.0
+    cacheable-lookup: ^5.0.3
+    cacheable-request: ^7.0.2
+    decompress-response: ^6.0.0
+    http2-wrapper: ^1.0.0-beta.5.2
+    lowercase-keys: ^2.0.0
+    p-cancelable: ^2.0.0
+    responselike: ^2.0.0
+  checksum: 2de8a1bbda4e9b6b2b72b2d2100bc055a59adc1740529e631f61feb44a8b9a1f9f8590941ed9da9df0090b6d6d0ed8ffee94cd9ac086ec3409b392b33440f7d2
+  languageName: node
+  linkType: hard
+
 "got@npm:^12.1.0":
   version: 12.1.0
   resolution: "got@npm:12.1.0"
@@ -4740,6 +4809,7 @@ __metadata:
     "@nivo/core": ^0.79.0
     "@nivo/line": ^0.79.1
     "@tabler/icons": ^1.78.0
+    "@tanstack/react-query": ^4.2.1
     "@types/dockerode": ^3.3.9
     "@types/node": 17.0.1
     "@types/react": 17.0.1
@@ -4777,6 +4847,7 @@ __metadata:
     prism-react-renderer: ^1.3.5
     react: ^18.2.0
     react-dom: ^18.2.0
+    sabnzbd-api: ^1.5.0
     sharp: ^0.30.7
     systeminformation: ^5.12.1
     typescript: ^4.7.4
@@ -4870,6 +4941,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"http2-wrapper@npm:^1.0.0-beta.5.2":
+  version: 1.0.3
+  resolution: "http2-wrapper@npm:1.0.3"
+  dependencies:
+    quick-lru: ^5.1.1
+    resolve-alpn: ^1.0.0
+  checksum: 74160b862ec699e3f859739101ff592d52ce1cb207b7950295bf7962e4aa1597ef709b4292c673bece9c9b300efad0559fc86c71b1409c7a1e02b7229456003e
+  languageName: node
+  linkType: hard
+
 "http2-wrapper@npm:^2.1.10":
   version: 2.1.11
   resolution: "http2-wrapper@npm:2.1.11"
@@ -6603,6 +6684,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"p-cancelable@npm:^2.0.0":
+  version: 2.1.1
+  resolution: "p-cancelable@npm:2.1.1"
+  checksum: 3dba12b4fb4a1e3e34524535c7858fc82381bbbd0f247cc32dedc4018592a3950ce66b106d0880b4ec4c2d8d6576f98ca885dc1d7d0f274d1370be20e9523ddf
+  languageName: node
+  linkType: hard
+
 "p-cancelable@npm:^3.0.0":
   version: 3.0.0
   resolution: "p-cancelable@npm:3.0.0"
@@ -7128,7 +7216,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve-alpn@npm:^1.2.0":
+"resolve-alpn@npm:^1.0.0, resolve-alpn@npm:^1.2.0":
   version: 1.2.1
   resolution: "resolve-alpn@npm:1.2.1"
   checksum: f558071fcb2c60b04054c99aebd572a2af97ef64128d59bef7ab73bd50d896a222a056de40ffc545b633d99b304c259ea9d0c06830d5c867c34f0bfa60b8eae0
@@ -7260,6 +7348,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sabnzbd-api@npm:^1.5.0":
+  version: 1.5.0
+  resolution: "sabnzbd-api@npm:1.5.0"
+  dependencies:
+    form-data: ^4.0.0
+    got: ^11.8.2
+  checksum: e52b6978f7f4c4df1857b3be5a400182c3f494bf68f1c496bb0e56d7a629947cdd088aff9ae0cb331337574b1302ff13c7d75228761876d7f0e825c7269b54ff
+  languageName: node
+  linkType: hard
+
 "safe-buffer@npm:^5.0.1, safe-buffer@npm:~5.2.0":
   version: 5.2.1
   resolution: "safe-buffer@npm:5.2.1"
@@ -8101,6 +8199,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"use-sync-external-store@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "use-sync-external-store@npm:1.2.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 5c639e0f8da3521d605f59ce5be9e094ca772bd44a4ce7322b055a6f58eeed8dda3c94cabd90c7a41fb6fa852210092008afe48f7038792fd47501f33299116a
+  languageName: node
+  linkType: hard
+
 "util-deprecate@npm:^1.0.1, util-deprecate@npm:~1.0.1":
   version: 1.0.2
   resolution: "util-deprecate@npm:1.0.2"