implement queue info and pause/resume

src/modules/usenet/UsenetHistoryList.tsx

@@ -14,6 +14,7 @@ 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';
@@ -28,6 +29,7 @@ const PAGE_SIZE = 10;
 
 export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ serviceId }) => {
   const [page, setPage] = useState(1);
+  const { t } = useTranslation('modules/usenet');
 
   const { data, isLoading, isError, error } = useGetUsenetHistory({
     limit: PAGE_SIZE,
@@ -50,7 +52,7 @@ export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ s
     return (
       <Group position="center">
         <Alert icon={<IconAlertCircle size={16} />} my="lg" title="Error!" color="red" radius="md">
-          Some error has occured while fetching data:
+          {t('history.error')}
           <Code mt="sm" block>
             {(error as AxiosError)?.response?.data as string}
           </Code>
@@ -62,13 +64,13 @@ export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ s
   if (!data || data.items.length <= 0) {
     return (
       <Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-        <Title order={3}>History is empty</Title>
+        <Title order={3}>{t('history.empty')}</Title>
       </Center>
     );
   }
 
   return (
-    <div>
+    <>
       <Table highlightOnHover style={{ tableLayout: 'fixed' }}>
         <colgroup>
           <col span={1} />
@@ -77,9 +79,9 @@ export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ s
         </colgroup>
         <thead>
           <tr>
-            <th>Name</th>
-            <th>Size</th>
-            <th>Download Duration</th>
+            <th>{t('history.header.name')}</th>
+            <th>{t('history.header.size')}</th>
+            <th>{t('history.header.duration')}</th>
           </tr>
         </thead>
         <tbody>
@@ -113,14 +115,16 @@ export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ s
           ))}
         </tbody>
       </Table>
-      <Pagination
-        size="sm"
-        position="center"
-        mt="md"
-        total={totalPages}
-        page={page}
-        onChange={setPage}
-      />
-    </div>
+      {totalPages > 1 && (
+        <Pagination
+          size="sm"
+          position="center"
+          mt="md"
+          total={totalPages}
+          page={page}
+          onChange={setPage}
+        />
+      )}
+    </>
   );
 };

src/modules/usenet/UsenetModule.tsx

@@ -1,16 +1,27 @@
-import { Group, Select, Tabs } from '@mantine/core';
-import { IconDownload } from '@tabler/icons';
+import { Badge, Button, Group, Select, Tabs } from '@mantine/core';
+import { IconDownload, IconPlayerPause, IconPlayerPlay } from '@tabler/icons';
 import { FunctionComponent, 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';
+
+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! });
+  const { mutate: pause } = usePauseUsenetQueue({ serviceId: selectedServiceId! });
+  const { mutate: resume } = useResumeUsenetQueue({ serviceId: selectedServiceId! });
 
   if (!selectedServiceId) {
     return null;
@@ -20,8 +31,26 @@ export const UsenetComponent: FunctionComponent = () => {
     <Tabs keepMounted={false} defaultValue="queue">
       <Group mb="md">
         <Tabs.List style={{ flex: 1 }}>
-          <Tabs.Tab value="queue">Queue</Tabs.Tab>
-          <Tabs.Tab value="history">History</Tabs.Tab>
+          <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

src/modules/usenet/UsenetQueueList.tsx

@@ -1,8 +1,10 @@
 import {
   Alert,
+  Button,
   Center,
   Code,
   Group,
+  Pagination,
   Progress,
   Skeleton,
   Table,
@@ -15,6 +17,7 @@ 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';
@@ -29,12 +32,15 @@ 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 (
@@ -50,7 +56,7 @@ export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ servi
     return (
       <Group position="center">
         <Alert icon={<IconAlertCircle size={16} />} my="lg" title="Error!" color="red" radius="md">
-          Some error has occured while fetching data:
+          {t('queue.error')}
           <Code mt="sm" block>
             {(error as AxiosError)?.response?.data as string}
           </Code>
@@ -62,71 +68,88 @@ export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ servi
   if (!data || data.items.length <= 0) {
     return (
       <Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-        <Title order={3}>Queue is empty</Title>
+        <Title order={3}>{t('queue.empty')}</Title>
       </Center>
     );
   }
 
   return (
-    <Table highlightOnHover style={{ tableLayout: 'fixed' }}>
-      <thead>
-        <tr>
-          <th style={{ width: 40 }} />
-          <th style={{ width: '75%' }}>Name</th>
-          <th style={{ width: 100 }}>Size</th>
-          <th style={{ width: 100 }}>ETA</th>
-          <th style={{ width: 200 }}>Progress</th>
-        </tr>
-      </thead>
-      <tbody>
-        {data.items.map((nzb) => (
-          <tr key={nzb.id}>
-            <td>
-              {nzb.state === 'paused' ? (
-                <IconPlayerPause fill="grey" stroke={0} size="16" />
-              ) : (
-                <IconPlayerPlay fill="black" stroke={0} size="16" />
-              )}
-            </td>
-            <td>
-              <Tooltip position="top" label={nzb.name}>
-                <Text
-                  style={{
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                  }}
-                  size="xs"
-                >
-                  {nzb.name}
-                </Text>
-              </Tooltip>
-            </td>
-            <td>
-              <Text size="xs">{humanFileSize(nzb.size)}</Text>
-            </td>
-            <td>
-              {nzb.eta <= 0 ? (
-                <Text size="xs" color="dimmed">
-                  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">{nzb.progress.toFixed(1)}%</Text>
-              <Progress
-                radius="lg"
-                color={nzb.eta > 0 ? theme.primaryColor : 'lightgrey'}
-                value={nzb.progress}
-                size="lg"
-                style={{ width: '100%' }}
-              />
-            </td>
+    <>
+      <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>
-        ))}
-      </tbody>
-    </Table>
+        </thead>
+        <tbody>
+          {data.items.map((nzb) => (
+            <tr key={nzb.id}>
+              <td>
+                {nzb.state === 'paused' ? (
+                  <Button disabled color="gray" variant="subtle" radius="lg" size="xs" compact>
+                    <IconPlayerPlay size="16" />
+                  </Button>
+                ) : (
+                  <Button disabled variant="subtle" radius="lg" size="xs" compact>
+                    <IconPlayerPause size="16" />
+                  </Button>
+                )}
+              </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">{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}
+        />
+      )}
+    </>
   );
 };