mirror of
https://github.com/ajnart/homarr.git
synced 2025-11-09 23:15:46 +01:00
More cleanup and history added
This commit is contained in:
Jannes Vandepitte
199
package.json
199
package.json
@@ -1,101 +1,102 @@
|
|||||||
{
|
{
|
||||||
"name": "homarr",
|
"name": "homarr",
|
||||||
"version": "0.9.2",
|
"version": "0.9.2",
|
||||||
"description": "Homarr - A homepage for your server.",
|
"description": "Homarr - A homepage for your server.",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "https://github.com/ajnart/homarr"
|
"url": "https://github.com/ajnart/homarr"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev",
|
"dev": "next dev",
|
||||||
"build": "next build",
|
"build": "next build",
|
||||||
"analyze": "ANALYZE=true next build",
|
"analyze": "ANALYZE=true next build",
|
||||||
"start": "next start",
|
"start": "next start",
|
||||||
"typecheck": "tsc --noEmit",
|
"typecheck": "tsc --noEmit",
|
||||||
"export": "next build && next export",
|
"export": "next build && next export",
|
||||||
"lint": "next lint",
|
"lint": "next lint",
|
||||||
"jest": "jest",
|
"jest": "jest",
|
||||||
"jest:watch": "jest --watch",
|
"jest:watch": "jest --watch",
|
||||||
"prettier:check": "prettier --check \"**/*.{ts,tsx}\"",
|
"prettier:check": "prettier --check \"**/*.{ts,tsx}\"",
|
||||||
"prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
|
"prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
|
||||||
"test": "npm run prettier:check && npm run lint && npm run typecheck && npm run jest",
|
"test": "npm run prettier:check && npm run lint && npm run typecheck && npm run jest",
|
||||||
"ci": "yarn test && yarn lint --fix && yarn typecheck && yarn prettier:write"
|
"ci": "yarn test && yarn lint --fix && yarn typecheck && yarn prettier:write"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@ctrl/deluge": "^4.1.0",
|
"@ctrl/deluge": "^4.1.0",
|
||||||
"@ctrl/qbittorrent": "^4.1.0",
|
"@ctrl/qbittorrent": "^4.1.0",
|
||||||
"@ctrl/shared-torrent": "^4.1.1",
|
"@ctrl/shared-torrent": "^4.1.1",
|
||||||
"@ctrl/transmission": "^4.1.1",
|
"@ctrl/transmission": "^4.1.1",
|
||||||
"@dnd-kit/core": "^6.0.5",
|
"@dnd-kit/core": "^6.0.5",
|
||||||
"@dnd-kit/sortable": "^7.0.1",
|
"@dnd-kit/sortable": "^7.0.1",
|
||||||
"@dnd-kit/utilities": "^3.2.0",
|
"@dnd-kit/utilities": "^3.2.0",
|
||||||
"@emotion/react": "^11.10.0",
|
"@emotion/react": "^11.10.0",
|
||||||
"@emotion/server": "^11.10.0",
|
"@emotion/server": "^11.10.0",
|
||||||
"@mantine/carousel": "^5.1.0",
|
"@mantine/carousel": "^5.1.0",
|
||||||
"@mantine/core": "^5.2.3",
|
"@mantine/core": "^5.2.3",
|
||||||
"@mantine/dates": "^5.2.3",
|
"@mantine/dates": "^5.2.3",
|
||||||
"@mantine/dropzone": "^5.2.3",
|
"@mantine/dropzone": "^5.2.3",
|
||||||
"@mantine/form": "^5.2.3",
|
"@mantine/form": "^5.2.3",
|
||||||
"@mantine/hooks": "^5.2.3",
|
"@mantine/hooks": "^5.2.3",
|
||||||
"@mantine/modals": "^5.2.3",
|
"@mantine/modals": "^5.2.3",
|
||||||
"@mantine/next": "^5.2.3",
|
"@mantine/next": "^5.2.3",
|
||||||
"@mantine/notifications": "^5.2.3",
|
"@mantine/notifications": "^5.2.3",
|
||||||
"@mantine/prism": "^5.0.0",
|
"@mantine/prism": "^5.0.0",
|
||||||
"@nivo/core": "^0.79.0",
|
"@nivo/core": "^0.79.0",
|
||||||
"@nivo/line": "^0.79.1",
|
"@nivo/line": "^0.79.1",
|
||||||
"@tabler/icons": "^1.78.0",
|
"@tabler/icons": "^1.78.0",
|
||||||
"add": "^2.0.6",
|
"@tanstack/react-query": "^4.2.1",
|
||||||
"axios": "^0.27.2",
|
"add": "^2.0.6",
|
||||||
"consola": "^2.15.3",
|
"axios": "^0.27.2",
|
||||||
"cookies-next": "^2.1.1",
|
"consola": "^2.15.3",
|
||||||
"country-flag-icons": "^1.5.5",
|
"cookies-next": "^2.1.1",
|
||||||
"dayjs": "^1.11.5",
|
"country-flag-icons": "^1.5.5",
|
||||||
"dockerode": "^3.3.2",
|
"dayjs": "^1.11.5",
|
||||||
"embla-carousel-react": "^7.0.0",
|
"dockerode": "^3.3.2",
|
||||||
"framer-motion": "^6.5.1",
|
"embla-carousel-react": "^7.0.0",
|
||||||
"i18next": "^21.9.1",
|
"framer-motion": "^6.5.1",
|
||||||
"i18next-browser-languagedetector": "^6.1.5",
|
"i18next": "^21.9.1",
|
||||||
"i18next-http-backend": "^1.4.1",
|
"i18next-browser-languagedetector": "^6.1.5",
|
||||||
"js-file-download": "^0.4.12",
|
"i18next-http-backend": "^1.4.1",
|
||||||
"next": "12.1.6",
|
"js-file-download": "^0.4.12",
|
||||||
"next-i18next": "^11.3.0",
|
"next": "12.1.6",
|
||||||
"prism-react-renderer": "^1.3.5",
|
"next-i18next": "^11.3.0",
|
||||||
"react": "^18.2.0",
|
"prism-react-renderer": "^1.3.5",
|
||||||
"react-dom": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"sabnzbd-api": "^1.5.0",
|
"react-dom": "^18.2.0",
|
||||||
"sharp": "^0.30.7",
|
"sabnzbd-api": "^1.5.0",
|
||||||
"systeminformation": "^5.12.1",
|
"sharp": "^0.30.7",
|
||||||
"uuid": "^8.3.2",
|
"systeminformation": "^5.12.1",
|
||||||
"yarn": "^1.22.19"
|
"uuid": "^8.3.2",
|
||||||
},
|
"yarn": "^1.22.19"
|
||||||
"devDependencies": {
|
},
|
||||||
"@next/bundle-analyzer": "^12.1.4",
|
"devDependencies": {
|
||||||
"@next/eslint-plugin-next": "^12.1.4",
|
"@next/bundle-analyzer": "^12.1.4",
|
||||||
"@types/dockerode": "^3.3.9",
|
"@next/eslint-plugin-next": "^12.1.4",
|
||||||
"@types/node": "17.0.1",
|
"@types/dockerode": "^3.3.9",
|
||||||
"@types/react": "17.0.1",
|
"@types/node": "17.0.1",
|
||||||
"@types/uuid": "^8.3.4",
|
"@types/react": "17.0.1",
|
||||||
"@typescript-eslint/eslint-plugin": "^5.30.7",
|
"@types/uuid": "^8.3.4",
|
||||||
"@typescript-eslint/parser": "^5.30.7",
|
"@typescript-eslint/eslint-plugin": "^5.30.7",
|
||||||
"eslint": "^8.20.0",
|
"@typescript-eslint/parser": "^5.30.7",
|
||||||
"eslint-config-airbnb": "^19.0.4",
|
"eslint": "^8.20.0",
|
||||||
"eslint-config-airbnb-typescript": "^17.0.0",
|
"eslint-config-airbnb": "^19.0.4",
|
||||||
"eslint-config-mantine": "^2.0.0",
|
"eslint-config-airbnb-typescript": "^17.0.0",
|
||||||
"eslint-plugin-import": "^2.26.0",
|
"eslint-config-mantine": "^2.0.0",
|
||||||
"eslint-plugin-jest": "^26.6.0",
|
"eslint-plugin-import": "^2.26.0",
|
||||||
"eslint-plugin-jsx-a11y": "^6.6.1",
|
"eslint-plugin-jest": "^26.6.0",
|
||||||
"eslint-plugin-react": "^7.30.1",
|
"eslint-plugin-jsx-a11y": "^6.6.1",
|
||||||
"eslint-plugin-react-hooks": "^4.6.0",
|
"eslint-plugin-react": "^7.30.1",
|
||||||
"eslint-plugin-testing-library": "^5.5.1",
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
"eslint-plugin-unused-imports": "^2.0.0",
|
"eslint-plugin-testing-library": "^5.5.1",
|
||||||
"jest": "^28.1.3",
|
"eslint-plugin-unused-imports": "^2.0.0",
|
||||||
"prettier": "^2.7.1",
|
"jest": "^28.1.3",
|
||||||
"typescript": "^4.7.4"
|
"prettier": "^2.7.1",
|
||||||
},
|
"typescript": "^4.7.4"
|
||||||
"resolutions": {
|
},
|
||||||
"@types/react": "17.0.2",
|
"resolutions": {
|
||||||
"@types/react-dom": "17.0.2"
|
"@types/react": "17.0.2",
|
||||||
},
|
"@types/react-dom": "17.0.2"
|
||||||
"packageManager": "yarn@3.2.1"
|
},
|
||||||
|
"packageManager": "yarn@3.2.1"
|
||||||
}
|
}
|
||||||
|
|||||||
71
src/modules/usenet/UsenetHistoryList.tsx
Normal file
71
src/modules/usenet/UsenetHistoryList.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -1,115 +1,16 @@
|
|||||||
import {
|
import { Skeleton, Tabs, useMantineTheme } from '@mantine/core';
|
||||||
Center,
|
import { IconDownload } from '@tabler/icons';
|
||||||
Progress,
|
import { FunctionComponent } from 'react';
|
||||||
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';
|
|
||||||
|
|
||||||
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 = () => {
|
export const UsenetComponent: FunctionComponent = () => {
|
||||||
const [nzbs, setNzbs] = useState<DownloadItem[]>([]);
|
const theme = useMantineTheme();
|
||||||
const [isLoading, setIsLoading] = useState(true);
|
const { isLoading, data: nzbs = [] } = useGetUsenetDownloads();
|
||||||
|
const { data: history = [] } = useGetUsenetHistory();
|
||||||
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>
|
|
||||||
));
|
|
||||||
|
|
||||||
if (isLoading) {
|
if (isLoading) {
|
||||||
return (
|
return (
|
||||||
@@ -128,18 +29,10 @@ export const UsenetComponent: FunctionComponent = () => {
|
|||||||
<Tabs.Tab value="history">History</Tabs.Tab>
|
<Tabs.Tab value="history">History</Tabs.Tab>
|
||||||
</Tabs.List>
|
</Tabs.List>
|
||||||
<Tabs.Panel value="queue">
|
<Tabs.Panel value="queue">
|
||||||
<ScrollArea sx={{ maxHeight: 300, width: '100%' }}>
|
<UsenetQueueList items={nzbs} />
|
||||||
{rows.length > 0 ? (
|
</Tabs.Panel>
|
||||||
<Table highlightOnHover>
|
<Tabs.Panel value="history">
|
||||||
<thead>{ths}</thead>
|
<UsenetHistoryList items={history} />
|
||||||
<tbody>{rows}</tbody>
|
|
||||||
</Table>
|
|
||||||
) : (
|
|
||||||
<Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
|
||||||
<Title order={3}>Queue is empty</Title>
|
|
||||||
</Center>
|
|
||||||
)}
|
|
||||||
</ScrollArea>
|
|
||||||
</Tabs.Panel>
|
</Tabs.Panel>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
);
|
);
|
||||||
|
|||||||
87
src/modules/usenet/UsenetQueueList.tsx
Normal file
87
src/modules/usenet/UsenetQueueList.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -1,6 +1,9 @@
|
|||||||
export interface UsenetQueueItem {
|
export interface UsenetQueueItem {
|
||||||
name: string;
|
name: string;
|
||||||
progress: number;
|
progress: number;
|
||||||
|
/**
|
||||||
|
* Size in bytes
|
||||||
|
*/
|
||||||
size: number;
|
size: number;
|
||||||
id: string;
|
id: string;
|
||||||
state: 'paused' | 'downloading' | 'queued';
|
state: 'paused' | 'downloading' | 'queued';
|
||||||
@@ -8,6 +11,10 @@ export interface UsenetQueueItem {
|
|||||||
}
|
}
|
||||||
export interface UsenetHistoryItem {
|
export interface UsenetHistoryItem {
|
||||||
name: string;
|
name: string;
|
||||||
|
/**
|
||||||
|
* Size in bytes
|
||||||
|
*/
|
||||||
size: number;
|
size: number;
|
||||||
id: string;
|
id: string;
|
||||||
|
time: number;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -28,7 +28,8 @@ async function Get(req: NextApiRequest, res: NextApiResponse) {
|
|||||||
history.push({
|
history.push({
|
||||||
id: slot.nzo_id,
|
id: slot.nzo_id,
|
||||||
name: slot.name,
|
name: slot.name,
|
||||||
size: slot.bytes * 1000,
|
size: slot.bytes,
|
||||||
|
time: slot.download_time,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -36,7 +36,7 @@ async function Get(req: NextApiRequest, res: NextApiResponse) {
|
|||||||
eta: eta.asSeconds(),
|
eta: eta.asSeconds(),
|
||||||
name: slot.filename,
|
name: slot.filename,
|
||||||
progress: parseFloat(slot.percentage),
|
progress: parseFloat(slot.percentage),
|
||||||
size: parseFloat(slot.mb),
|
size: parseFloat(slot.mb) * 1000 * 1000,
|
||||||
state: slot.status.toLowerCase() as any,
|
state: slot.status.toLowerCase() as any,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -3,6 +3,8 @@ import { GetServerSidePropsContext } from 'next';
|
|||||||
import { useEffect } from 'react';
|
import { useEffect } from 'react';
|
||||||
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
|
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
|
||||||
|
|
||||||
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||||
|
|
||||||
import AppShelf from '../components/AppShelf/AppShelf';
|
import AppShelf from '../components/AppShelf/AppShelf';
|
||||||
import LoadConfigComponent from '../components/Config/LoadConfig';
|
import LoadConfigComponent from '../components/Config/LoadConfig';
|
||||||
import { Config } from '../tools/types';
|
import { Config } from '../tools/types';
|
||||||
@@ -62,6 +64,8 @@ export async function getServerSideProps({
|
|||||||
return getConfig(configName as string, translations);
|
return getConfig(configName as string, translations);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const queryClient = new QueryClient();
|
||||||
|
|
||||||
export default function HomePage(props: any) {
|
export default function HomePage(props: any) {
|
||||||
const { config: initialConfig }: { config: Config } = props;
|
const { config: initialConfig }: { config: Config } = props;
|
||||||
const { setConfig } = useConfig();
|
const { setConfig } = useConfig();
|
||||||
@@ -73,9 +77,11 @@ export default function HomePage(props: any) {
|
|||||||
setConfig(migratedConfig);
|
setConfig(migratedConfig);
|
||||||
}, [initialConfig]);
|
}, [initialConfig]);
|
||||||
return (
|
return (
|
||||||
<Layout>
|
<QueryClientProvider client={queryClient}>
|
||||||
<AppShelf />
|
<Layout>
|
||||||
<LoadConfigComponent />
|
<AppShelf />
|
||||||
</Layout>
|
<LoadConfigComponent />
|
||||||
|
</Layout>
|
||||||
|
</QueryClientProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
21
src/tools/hooks/api.ts
Normal file
21
src/tools/hooks/api.ts
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import axios from 'axios';
|
||||||
|
import { UsenetHistoryItem, UsenetQueueItem } from '../../modules';
|
||||||
|
|
||||||
|
export const useGetUsenetDownloads = () =>
|
||||||
|
useQuery(
|
||||||
|
['usenetDownloads'],
|
||||||
|
async () => (await axios.get<UsenetQueueItem[]>('/api/modules/usenet')).data,
|
||||||
|
{
|
||||||
|
refetchInterval: 1000,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
export const useGetUsenetHistory = () =>
|
||||||
|
useQuery(
|
||||||
|
['usenetHistory'],
|
||||||
|
async () => (await axios.get<UsenetHistoryItem[]>('/api/modules/usenet/history')).data,
|
||||||
|
{
|
||||||
|
refetchInterval: 1000,
|
||||||
|
}
|
||||||
|
);
|
||||||
44
yarn.lock
44
yarn.lock
@@ -1918,6 +1918,33 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
"@tanstack/query-core@npm:^4.0.0-beta.1":
|
||||||
|
version: 4.2.1
|
||||||
|
resolution: "@tanstack/query-core@npm:4.2.1"
|
||||||
|
checksum: f71854969e02de6c2cfbe25e8b11e275b61e1297a902e0d5c4beac580a87db99555c1c21d536d838ce5e0664bc49da7b60a3c6b8de334c7004c5005fe2a48030
|
||||||
|
languageName: node
|
||||||
|
linkType: hard
|
||||||
|
|
||||||
|
"@tanstack/react-query@npm:^4.2.1":
|
||||||
|
version: 4.2.1
|
||||||
|
resolution: "@tanstack/react-query@npm:4.2.1"
|
||||||
|
dependencies:
|
||||||
|
"@tanstack/query-core": ^4.0.0-beta.1
|
||||||
|
"@types/use-sync-external-store": ^0.0.3
|
||||||
|
use-sync-external-store: ^1.2.0
|
||||||
|
peerDependencies:
|
||||||
|
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||||
|
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||||
|
react-native: "*"
|
||||||
|
peerDependenciesMeta:
|
||||||
|
react-dom:
|
||||||
|
optional: true
|
||||||
|
react-native:
|
||||||
|
optional: true
|
||||||
|
checksum: bbf3a808645c26c649971dc182bb9a7ed7a1d89f6456b60685c6081b8be6ae84ae83b39c7eacb96c4f3b6677ca001d8114037329951987b7a8d65de53b28c862
|
||||||
|
languageName: node
|
||||||
|
linkType: hard
|
||||||
|
|
||||||
"@tootallnate/once@npm:2":
|
"@tootallnate/once@npm:2":
|
||||||
version: 2.0.0
|
version: 2.0.0
|
||||||
resolution: "@tootallnate/once@npm:2.0.0"
|
resolution: "@tootallnate/once@npm:2.0.0"
|
||||||
@@ -2163,6 +2190,13 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
"@types/use-sync-external-store@npm:^0.0.3":
|
||||||
|
version: 0.0.3
|
||||||
|
resolution: "@types/use-sync-external-store@npm:0.0.3"
|
||||||
|
checksum: 161ddb8eec5dbe7279ac971531217e9af6b99f7783213566d2b502e2e2378ea19cf5e5ea4595039d730aa79d3d35c6567d48599f69773a02ffcff1776ec2a44e
|
||||||
|
languageName: node
|
||||||
|
linkType: hard
|
||||||
|
|
||||||
"@types/uuid@npm:^8.3.4":
|
"@types/uuid@npm:^8.3.4":
|
||||||
version: 8.3.4
|
version: 8.3.4
|
||||||
resolution: "@types/uuid@npm:8.3.4"
|
resolution: "@types/uuid@npm:8.3.4"
|
||||||
@@ -4775,6 +4809,7 @@ __metadata:
|
|||||||
"@nivo/core": ^0.79.0
|
"@nivo/core": ^0.79.0
|
||||||
"@nivo/line": ^0.79.1
|
"@nivo/line": ^0.79.1
|
||||||
"@tabler/icons": ^1.78.0
|
"@tabler/icons": ^1.78.0
|
||||||
|
"@tanstack/react-query": ^4.2.1
|
||||||
"@types/dockerode": ^3.3.9
|
"@types/dockerode": ^3.3.9
|
||||||
"@types/node": 17.0.1
|
"@types/node": 17.0.1
|
||||||
"@types/react": 17.0.1
|
"@types/react": 17.0.1
|
||||||
@@ -8164,6 +8199,15 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
"use-sync-external-store@npm:^1.2.0":
|
||||||
|
version: 1.2.0
|
||||||
|
resolution: "use-sync-external-store@npm:1.2.0"
|
||||||
|
peerDependencies:
|
||||||
|
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||||
|
checksum: 5c639e0f8da3521d605f59ce5be9e094ca772bd44a4ce7322b055a6f58eeed8dda3c94cabd90c7a41fb6fa852210092008afe48f7038792fd47501f33299116a
|
||||||
|
languageName: node
|
||||||
|
linkType: hard
|
||||||
|
|
||||||
"util-deprecate@npm:^1.0.1, util-deprecate@npm:~1.0.1":
|
"util-deprecate@npm:^1.0.1, util-deprecate@npm:~1.0.1":
|
||||||
version: 1.0.2
|
version: 1.0.2
|
||||||
resolution: "util-deprecate@npm:1.0.2"
|
resolution: "util-deprecate@npm:1.0.2"
|
||||||
|
|||||||
Reference in New Issue
Block a user