implement queue info and pause/resume

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}
+        />
+      )}
+    </>
   );
 };