Fix usenet pageination

src/widgets/useNet/UseNetTile.tsx

@@ -46,11 +46,13 @@ const definition = defineWidget({
   },
 });
 
-export type IWeatherWidget = IWidget<typeof definition['id'], typeof definition>;
+export type IUsenetWidget = IWidget<typeof definition['id'], typeof definition>;
 
-interface UseNetTileProps {}
+interface UseNetTileProps {
+  widget: IUsenetWidget;
+}
 
-function UseNetTile({}: UseNetTileProps) {
+function UseNetTile({ widget }: UseNetTileProps) {
   const { t } = useTranslation('modules/usenet');
   const { config } = useConfigContext();
   const downloadApps =

src/widgets/useNet/UsenetHistoryList.tsx

@@ -4,8 +4,8 @@ import {
   Code,
   Group,
   Pagination,
-  ScrollArea,
   Skeleton,
+  Stack,
   Table,
   Text,
   Title,
@@ -28,7 +28,7 @@ interface UsenetHistoryListProps {
   appId: string;
 }
 
-const PAGE_SIZE = 10;
+const PAGE_SIZE = 13;
 
 export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ appId }) => {
   const [page, setPage] = useState(1);
@@ -81,50 +81,49 @@ export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ a
   }
 
   return (
-    <>
-      <ScrollArea style={{ flex: 1 }}>
-        <Table highlightOnHover style={{ tableLayout: 'fixed' }} ref={ref}>
-          <thead>
-            <tr>
-              <th>{t('modules/usenet:history.header.name')}</th>
-              <th style={{ width: 100 }}>{t('modules/usenet:history.header.size')}</th>
+    <Stack justify="space-around" spacing="xs">
+      <Table highlightOnHover style={{ tableLayout: 'fixed' }} ref={ref}>
+        <thead>
+          <tr>
+            <th>{t('modules/usenet:history.header.name')}</th>
+            <th style={{ width: 100 }}>{t('modules/usenet:history.header.size')}</th>
+            {durationBreakpoint < width ? (
+              <th style={{ width: 200 }}>{t('modules/usenet:history.header.duration')}</th>
+            ) : null}
+          </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>
               {durationBreakpoint < width ? (
-                <th style={{ width: 200 }}>{t('modules/usenet:history.header.duration')}</th>
+                <td>
+                  <Text size="xs">{parseDuration(history.time, t)}</Text>
+                </td>
               ) : null}
             </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>
-                {durationBreakpoint < width ? (
-                  <td>
-                    <Text size="xs">{parseDuration(history.time, t)}</Text>
-                  </td>
-                ) : null}
-              </tr>
-            ))}
-          </tbody>
-        </Table>
-      </ScrollArea>
+          ))}
+        </tbody>
+      </Table>
       {totalPages > 1 && (
         <Pagination
+          noWrap
           size="sm"
           position="center"
           mt="md"
@@ -133,6 +132,6 @@ export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ a
           onChange={setPage}
         />
       )}
-    </>
+    </Stack>
   );
 };

src/widgets/useNet/UsenetQueueList.tsx

@@ -1,6 +1,7 @@
 import {
   ActionIcon,
   Alert,
+  Button,
   Center,
   Code,
   Group,
@@ -8,6 +9,7 @@ import {
   Progress,
   ScrollArea,
   Skeleton,
+  Stack,
   Table,
   Text,
   Title,
@@ -30,7 +32,7 @@ interface UsenetQueueListProps {
   appId: string;
 }
 
-const PAGE_SIZE = 10;
+const PAGE_SIZE = 13;
 
 export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ appId }) => {
   const theme = useMantineTheme();
@@ -38,7 +40,7 @@ export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ appId
   const progressbarBreakpoint = theme.breakpoints.xs;
   const progressBreakpoint = 400;
   const sizeBreakpoint = 300;
-  const { ref, width, height } = useElementSize();
+  const { ref, width } = useElementSize();
 
   const [page, setPage] = useState(1);
   const { data, isLoading, isError, error } = useGetUsenetDownloads({
@@ -85,103 +87,102 @@ export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ appId
     );
   }
 
+  // TODO: Set ScollArea dynamic height based on the widget size
   return (
-    <>
-      <ScrollArea style={{ flex: 1 }}>
-        <Table highlightOnHover style={{ tableLayout: 'fixed' }} ref={ref}>
-          <thead>
-            <tr>
-              <th style={{ width: 32 }} />
-              <th style={{ width: '75%' }}>{t('queue.header.name')}</th>
+    <Stack justify="space-around" spacing="xs">
+      <Table highlightOnHover style={{ tableLayout: 'fixed' }} ref={ref}>
+        <thead>
+          <tr>
+            <th style={{ width: 32 }} />
+            <th style={{ width: '75%' }}>{t('queue.header.name')}</th>
+            {sizeBreakpoint < width ? (
+              <th style={{ width: 100 }}>{t('queue.header.size')}</th>
+            ) : null}
+            <th style={{ width: 60 }}>{t('queue.header.eta')}</th>
+            {progressBreakpoint < width ? (
+              <th style={{ width: progressbarBreakpoint > width ? 100 : 200 }}>
+                {t('queue.header.progress')}
+              </th>
+            ) : null}
+          </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>
               {sizeBreakpoint < width ? (
-                <th style={{ width: 100 }}>{t('queue.header.size')}</th>
+                <td>
+                  <Text size="xs">{humanFileSize(nzb.size)}</Text>
+                </td>
               ) : null}
-              <th style={{ width: 60 }}>{t('queue.header.eta')}</th>
+              <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>
               {progressBreakpoint < width ? (
-                <th style={{ width: progressbarBreakpoint > width ? 100 : 200 }}>
-                  {t('queue.header.progress')}
-                </th>
+                <td style={{ display: 'flex', alignItems: 'center' }}>
+                  <Text mr="sm" style={{ whiteSpace: 'nowrap' }}>
+                    {nzb.progress.toFixed(1)}%
+                  </Text>
+                  {width > progressbarBreakpoint ? (
+                    <Progress
+                      radius="lg"
+                      color={nzb.eta > 0 ? theme.primaryColor : 'lightgrey'}
+                      value={nzb.progress}
+                      size="lg"
+                      style={{ width: '100%' }}
+                    />
+                  ) : null}
+                </td>
               ) : null}
             </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>
-                {sizeBreakpoint < width ? (
-                  <td>
-                    <Text size="xs">{humanFileSize(nzb.size)}</Text>
-                  </td>
-                ) : null}
-                <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>
-                {progressBreakpoint < width ? (
-                  <td style={{ display: 'flex', alignItems: 'center' }}>
-                    <Text mr="sm" style={{ whiteSpace: 'nowrap' }}>
-                      {nzb.progress.toFixed(1)}%
-                    </Text>
-                    {width > progressbarBreakpoint ? (
-                      <Progress
-                        radius="lg"
-                        color={nzb.eta > 0 ? theme.primaryColor : 'lightgrey'}
-                        value={nzb.progress}
-                        size="lg"
-                        style={{ width: '100%' }}
-                      />
-                    ) : null}
-                  </td>
-                ) : null}
-              </tr>
-            ))}
-          </tbody>
-        </Table>
-      </ScrollArea>
+          ))}
+        </tbody>
+      </Table>
       {totalPages > 1 && (
         <Pagination
+          noWrap
           size="sm"
           position="center"
-          mt="md"
           total={totalPages}
           page={page}
           onChange={setPage}
         />
       )}
-    </>
+    </Stack>
   );
 };