From 7d510fd2d48157e18d9dc4159e30551f31726883 Mon Sep 17 00:00:00 2001 From: marcobaobao Date: Fri, 23 Jun 2023 14:49:58 +0200 Subject: [PATCH] code refactoring, deps bump --- frontend/package.json | 24 +++++++++--------- frontend/src/Layout.tsx | 6 ++--- frontend/src/components/DownloadDialog.tsx | 6 ++--- frontend/src/providers/rpcClientProvider.tsx | 4 +-- frontend/src/utils.ts | 10 ++++++-- frontend/src/views/Home.tsx | 26 ++++++++------------ 6 files changed, 38 insertions(+), 38 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 48cea88..7850656 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,6 +1,6 @@ { "name": "yt-dlp-webui", - "version": "2.0.7", + "version": "2.10.0", "description": "Frontend compontent of yt-dlp-webui", "scripts": { "dev": "vite", @@ -9,28 +9,28 @@ "author": "marcopeocchi", "license": "MPL-2.0", "dependencies": { - "@emotion/react": "^11.11.0", + "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.11.16", - "@mui/material": "^5.13.2", + "@mui/material": "^5.13.5", "@reduxjs/toolkit": "^1.9.5", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-redux": "^8.0.5", - "react-router-dom": "^6.11.2", + "react-redux": "^8.1.1", + "react-router-dom": "^6.13.0", "rxjs": "^7.8.1", "uuid": "^9.0.0" }, "devDependencies": { "@modyfi/vite-plugin-yaml": "^1.0.4", - "@types/node": "^20.2.4", - "@types/react": "^18.2.7", - "@types/react-dom": "^18.0.10", + "@types/node": "^20.3.1", + "@types/react": "^18.2.13", + "@types/react-dom": "^18.2.6", "@types/react-router-dom": "^5.3.3", - "@types/uuid": "^9.0.1", - "@vitejs/plugin-react": "^4.0.0", + "@types/uuid": "^9.0.2", + "@vitejs/plugin-react": "^4.0.1", "buffer": "^6.0.3", - "typescript": "^5.0.4", - "vite": "^4.3.8" + "typescript": "^5.1.3", + "vite": "^4.3.9" } } \ No newline at end of file diff --git a/frontend/src/Layout.tsx b/frontend/src/Layout.tsx index 21bd067..55b1ffe 100644 --- a/frontend/src/Layout.tsx +++ b/frontend/src/Layout.tsx @@ -34,7 +34,7 @@ import Drawer from './components/Drawer' import Logout from './components/Logout' import ThemeToggler from './components/ThemeToggler' import I18nProvider from './providers/i18nProvider' -import RPCCLientProvider from './providers/rpcClientProvider' +import RPCClientProvider from './providers/rpcClientProvider' import { formatGiB } from './utils' export default function Layout() { @@ -62,7 +62,7 @@ export default function Layout() { return ( - + @@ -184,7 +184,7 @@ export default function Layout() { - + ) diff --git a/frontend/src/components/DownloadDialog.tsx b/frontend/src/components/DownloadDialog.tsx index 7280b66..45f3640 100644 --- a/frontend/src/components/DownloadDialog.tsx +++ b/frontend/src/components/DownloadDialog.tsx @@ -49,7 +49,6 @@ export default function DownloadDialog({ open, onClose }: Props) { // redux state const settings = useSelector((state: RootState) => state.settings) const status = useSelector((state: RootState) => state.status) - const dispatch = useDispatch() // ephemeral state const [downloadFormats, setDownloadFormats] = useState() @@ -67,7 +66,8 @@ export default function DownloadDialog({ open, onClose }: Props) { const [workingUrl, setWorkingUrl] = useState('') // memos - const cliArgs = useMemo(() => new CliArguments().fromString(settings.cliArgs), [settings.cliArgs]) + const cliArgs = useMemo(() => + new CliArguments().fromString(settings.cliArgs), [settings.cliArgs]) // context const { i18n } = useContext(I18nContext) @@ -210,7 +210,7 @@ export default function DownloadDialog({ open, onClose }: Props) { - + ({ client: new RPCClient() }) -export default function RPCCLientProvider({ children }: Props) { +export default function RPCClientProvider({ children }: Props) { const settings = useSelector((state: RootState) => state.settings) const client = useMemo(() => new RPCClient(), [ diff --git a/frontend/src/utils.ts b/frontend/src/utils.ts index 8f6d925..ab8fd92 100644 --- a/frontend/src/utils.ts +++ b/frontend/src/utils.ts @@ -1,3 +1,5 @@ +import type { RPCResponse } from "./types" + /** * Validate an ip v4 via regex * @param {string} ipAddr @@ -68,9 +70,9 @@ export function toFormatArgs(codes: string[]): string { return codes.reduce((v, a) => ` -f ${v}+${a}`) } if (codes.length === 1) { - return ` -f ${codes[0]}`; + return ` -f ${codes[0]}` } - return ''; + return '' } export function getWebSocketEndpoint() { @@ -94,3 +96,7 @@ export const roundMiB = (bytes: number) => `${(bytes / 1_000_000).toFixed(2)} Mi export const formatSpeedMiB = (val: number) => `${roundMiB(val)}/s` export const dateTimeComparatorFunc = (a: string, b: string) => new Date(a).getTime() - new Date(b).getTime() + +export function isRPCResponse(object: any): object is RPCResponse { + return 'result' in object && 'id' in object +} \ No newline at end of file diff --git a/frontend/src/views/Home.tsx b/frontend/src/views/Home.tsx index f4853a4..47f0968 100644 --- a/frontend/src/views/Home.tsx +++ b/frontend/src/views/Home.tsx @@ -24,7 +24,7 @@ import { I18nContext } from '../providers/i18nProvider' import { RPCClientContext } from '../providers/rpcClientProvider' import { RootState } from '../stores/store' import type { RPCResponse, RPCResult } from '../types' -import { dateTimeComparatorFunc } from '../utils' +import { dateTimeComparatorFunc, isRPCResponse } from '../utils' export default function Home() { // redux state @@ -83,20 +83,14 @@ export default function Home() { if (!status.connected) { return } const sub = socket$.subscribe((event: RPCResponse) => { - switch (typeof event.result) { - case 'object': - setActiveDownloads( - (event.result ?? []) - .filter((r) => !!r.info.url) - .sort((a, b) => dateTimeComparatorFunc( - b.info.created_at, - a.info.created_at, - )) - ) - break - default: - break - } + if (!isRPCResponse(event)) { return } + + setActiveDownloads((event.result ?? []) + .filter(f => !!f.info.url) + .sort((a, b) => dateTimeComparatorFunc( + b.info.created_at, + a.info.created_at, + ))) }) return () => sub.unsubscribe() }, [socket$, status.connected]) @@ -105,7 +99,7 @@ export default function Home() { if (activeDownloads && activeDownloads.length >= 0) { setShowBackdrop(false) } - }, [activeDownloads?.length]) + }, [activeDownloads]) /** * Abort a specific download if id's provided, other wise abort all running ones.