More cleanup and history added

src/modules/usenet/UsenetHistoryList.tsx

@@ -0,0 +1,71 @@
+import { Center, Table, Text, Title, Tooltip, useMantineTheme } from '@mantine/core';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import { FunctionComponent } from 'react';
+import { humanFileSize } from '../../tools/humanFileSize';
+import { UsenetHistoryItem } from './types';
+
+dayjs.extend(duration);
+
+interface UsenetHistoryListProps {
+  items: UsenetHistoryItem[];
+}
+
+export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ items }) => {
+  const theme = useMantineTheme();
+
+  if (items.length <= 0) {
+    return (
+      <Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <Title order={3}>Queue is 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>Name</th>
+          <th>Size</th>
+          <th>Download Duration</th>
+        </tr>
+      </thead>
+      <tbody>
+        {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">
+                {dayjs
+                  .duration(history.time, 's')
+                  .format(history.time < 60 ? 's [seconds]' : 'm [minutes] s [seconds] ')}
+              </Text>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </Table>
+  );
+};

src/modules/usenet/UsenetModule.tsx

@@ -1,115 +1,16 @@
-import {
-  Center,
-  Progress,
-  ScrollArea,
-  Skeleton,
-  Table,
-  Tabs,
-  Text,
-  Title,
-  Tooltip,
-} from '@mantine/core';
-import { showNotification } from '@mantine/notifications';
-import { IconDownload, IconPlayerPause, IconPlayerPlay } from '@tabler/icons';
-import axios from 'axios';
-import dayjs from 'dayjs';
-import { FunctionComponent, useEffect, useState } from 'react';
-import duration from 'dayjs/plugin/duration';
-import { humanFileSize } from '../../tools/humanFileSize';
-import { DownloadItem } from '../../tools/types';
-import { IModule } from '../ModuleTypes';
+import { Skeleton, Tabs, useMantineTheme } from '@mantine/core';
+import { IconDownload } from '@tabler/icons';
+import { FunctionComponent } from 'react';
 
-dayjs.extend(duration);
+import { IModule } from '../ModuleTypes';
+import { useGetUsenetDownloads, useGetUsenetHistory } from '../../tools/hooks/api';
+import { UsenetQueueList } from './UsenetQueueList';
+import { UsenetHistoryList } from './UsenetHistoryList';
 
 export const UsenetComponent: FunctionComponent = () => {
-  const [nzbs, setNzbs] = useState<DownloadItem[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    setIsLoading(true);
-
-    const getData = async () => {
-      try {
-        const response = await axios.get('/api/modules/usenet');
-        setNzbs(response.data);
-      } catch (error) {
-        setNzbs([]);
-        showNotification({
-          title: 'Error fetching torrents',
-          autoClose: 1000,
-          disallowClose: true,
-          id: 'fail-torrent-downloads-module',
-          color: 'red',
-          message:
-            'Please check your config for any potential errors, check the console for more info',
-        });
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    const interval = setInterval(getData, 5000);
-    getData();
-
-    () => {
-      clearInterval(interval);
-    };
-  }, []);
-
-  const ths = (
-    <tr>
-      <th />
-      <th>Name</th>
-      <th>Size</th>
-      <th>ETA</th>
-      <th>Progress</th>
-    </tr>
-  );
-
-  const rows = nzbs.map((nzb) => (
-    <tr key={nzb.id}>
-      <td>
-        {nzb.state === 'paused' ? (
-          <IconPlayerPause fill="grey" stroke={0} />
-        ) : (
-          <IconPlayerPlay fill="black" stroke={0} />
-        )}
-      </td>
-      <td>
-        <Tooltip position="top" label={nzb.name}>
-          <Text
-            style={{
-              maxWidth: '30vw',
-            }}
-            size="xs"
-          >
-            {nzb.name}
-          </Text>
-        </Tooltip>
-      </td>
-      <td>
-        <Text size="xs">{humanFileSize(nzb.size * 1000 * 1000)}</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>
-        <Text>{nzb.progress.toFixed(1)}%</Text>
-        <Progress
-          radius="lg"
-          color={nzb.progress === 1 ? 'green' : nzb.state === 'downloading' ? 'blue' : 'lightgrey'}
-          value={nzb.progress}
-          size="lg"
-        />
-      </td>
-    </tr>
-  ));
+  const theme = useMantineTheme();
+  const { isLoading, data: nzbs = [] } = useGetUsenetDownloads();
+  const { data: history = [] } = useGetUsenetHistory();
 
   if (isLoading) {
     return (
@@ -128,18 +29,10 @@ export const UsenetComponent: FunctionComponent = () => {
         <Tabs.Tab value="history">History</Tabs.Tab>
       </Tabs.List>
       <Tabs.Panel value="queue">
-        <ScrollArea sx={{ maxHeight: 300, width: '100%' }}>
-          {rows.length > 0 ? (
-            <Table highlightOnHover>
-              <thead>{ths}</thead>
-              <tbody>{rows}</tbody>
-            </Table>
-          ) : (
-            <Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-              <Title order={3}>Queue is empty</Title>
-            </Center>
-          )}
-        </ScrollArea>
+        <UsenetQueueList items={nzbs} />
+      </Tabs.Panel>
+      <Tabs.Panel value="history">
+        <UsenetHistoryList items={history} />
       </Tabs.Panel>
     </Tabs>
   );

src/modules/usenet/UsenetQueueList.tsx

@@ -0,0 +1,87 @@
+import { Center, Progress, Table, Text, Title, Tooltip, useMantineTheme } from '@mantine/core';
+import { IconPlayerPause, IconPlayerPlay } from '@tabler/icons';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import { FunctionComponent } from 'react';
+import { humanFileSize } from '../../tools/humanFileSize';
+import { UsenetQueueItem } from './types';
+
+dayjs.extend(duration);
+interface UsenetQueueListProps {
+  items: UsenetQueueItem[];
+}
+
+export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ items }) => {
+  const theme = useMantineTheme();
+
+  if (items.length <= 0) {
+    return (
+      <Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <Title order={3}>Queue is 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>
+        {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>
+          </tr>
+        ))}
+      </tbody>
+    </Table>
+  );
+};

src/modules/usenet/types.ts

@@ -1,6 +1,9 @@
 export interface UsenetQueueItem {
   name: string;
   progress: number;
+  /**
+   * Size in bytes
+   */
   size: number;
   id: string;
   state: 'paused' | 'downloading' | 'queued';
@@ -8,6 +11,10 @@ export interface UsenetQueueItem {
 }
 export interface UsenetHistoryItem {
   name: string;
+  /**
+   * Size in bytes
+   */
   size: number;
   id: string;
+  time: number;
 }