diff --git a/src/modules/torrents/TorrentsModule.tsx b/src/modules/torrents/TorrentsModule.tsx index 04a9b6b3b..c7d3d5beb 100644 --- a/src/modules/torrents/TorrentsModule.tsx +++ b/src/modules/torrents/TorrentsModule.tsx @@ -42,8 +42,7 @@ export default function TorrentsComponent() { (service) => service.type === 'qBittorrent' || service.type === 'Transmission' || - service.type === 'Deluge' || - service.type === 'Sabnzbd' + service.type === 'Deluge' ) ?? []; const hideComplete: boolean = diff --git a/src/modules/usenet/UsenetHistoryList.tsx b/src/modules/usenet/UsenetHistoryList.tsx index c2b8e8da5..7b1b7792b 100644 --- a/src/modules/usenet/UsenetHistoryList.tsx +++ b/src/modules/usenet/UsenetHistoryList.tsx @@ -1,20 +1,39 @@ -import { Center, Table, Text, Title, Tooltip, useMantineTheme } from '@mantine/core'; +import { Center, Pagination, Skeleton, Table, Text, Title, Tooltip } from '@mantine/core'; import dayjs from 'dayjs'; import duration from 'dayjs/plugin/duration'; -import { FunctionComponent } from 'react'; +import { FunctionComponent, useState } from 'react'; +import { useGetUsenetHistory } from '../../tools/hooks/api'; import { humanFileSize } from '../../tools/humanFileSize'; -import { UsenetHistoryItem } from './types'; dayjs.extend(duration); interface UsenetHistoryListProps { - items: UsenetHistoryItem[]; + serviceId: string; } -export const UsenetHistoryList: FunctionComponent = ({ items }) => { - const theme = useMantineTheme(); +const PAGE_SIZE = 10; - if (items.length <= 0) { +export const UsenetHistoryList: FunctionComponent = ({ serviceId }) => { + const [page, setPage] = useState(1); + + const { data, isLoading } = useGetUsenetHistory({ + limit: PAGE_SIZE, + offset: (page - 1) * PAGE_SIZE, + serviceId, + }); + const totalPages = Math.ceil((data?.total || 1) / PAGE_SIZE); + + if (isLoading) { + return ( + <> + + + + + ); + } + + if (!data || data.items.length <= 0) { return (
Queue is empty @@ -23,49 +42,59 @@ export const UsenetHistoryList: FunctionComponent = ({ i } return ( - - - - - - - - - - - - - - - {items.map((history) => ( - - - - +
+
NameSizeDownload Duration
- - - {history.name} - - - - {humanFileSize(history.size)} - - - {dayjs - .duration(history.time, 's') - .format(history.time < 60 ? 's [seconds]' : 'm [minutes] s [seconds] ')} - -
+ + + + + + + + + + - ))} - -
NameSizeDownload Duration
+ + + {data.items.map((history) => ( + + + + + {history.name} + + + + + {humanFileSize(history.size)} + + + + {dayjs + .duration(history.time, 's') + .format(history.time < 60 ? 's [seconds]' : 'm [minutes] s [seconds] ')} + + + + ))} + + + + ); }; diff --git a/src/modules/usenet/UsenetModule.tsx b/src/modules/usenet/UsenetModule.tsx index 8fae8b3e3..da9837767 100644 --- a/src/modules/usenet/UsenetModule.tsx +++ b/src/modules/usenet/UsenetModule.tsx @@ -1,38 +1,42 @@ -import { Skeleton, Tabs, useMantineTheme } from '@mantine/core'; +import { Group, Select, Tabs } from '@mantine/core'; import { IconDownload } from '@tabler/icons'; -import { FunctionComponent } from 'react'; +import { FunctionComponent, useState } from 'react'; import { IModule } from '../ModuleTypes'; -import { useGetUsenetDownloads, useGetUsenetHistory } from '../../tools/hooks/api'; import { UsenetQueueList } from './UsenetQueueList'; import { UsenetHistoryList } from './UsenetHistoryList'; +import { useGetServiceByType } from '../../tools/hooks/useGetServiceByType'; export const UsenetComponent: FunctionComponent = () => { - const theme = useMantineTheme(); - const { isLoading, data: nzbs = [] } = useGetUsenetDownloads(); - const { data: history = [] } = useGetUsenetHistory(); + const downloadServices = useGetServiceByType('Sabnzbd'); - if (isLoading) { - return ( - <> - - - - - ); + const [selectedServiceId, setSelectedService] = useState(downloadServices[0]?.id); + + if (!selectedServiceId) { + return null; } return ( - - - Queue - History - + + + + Queue + History + + {downloadServices.length > 1 && ( +