code refactoring, deps bump

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 (
     <ThemeProvider theme={theme}>
       <I18nProvider>
-        <RPCCLientProvider>
+        <RPCClientProvider>
           <Box sx={{ display: 'flex' }}>
             <CssBaseline />
             <AppBar position="absolute" open={open}>
@@ -184,7 +184,7 @@ export default function Layout() {
               <Outlet />
             </Box>
           </Box>
-        </RPCCLientProvider>
+        </RPCClientProvider>
       </I18nProvider>
     </ThemeProvider>
   )

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<DLMetadata>()
@@ -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) {
             </Typography>
           </Toolbar>
         </AppBar>
-        <Container sx={{ mt: 4 }}>
+        <Container sx={{ my: 4 }}>
           <Grid container spacing={2}>
             <Grid item xs={12}>
               <Paper

frontend/src/providers/rpcClientProvider.tsx

@@ -1,7 +1,7 @@
 import { createContext, useMemo } from 'react'
 import { useSelector } from 'react-redux'
 import { RPCClient } from '../lib/rpcClient'
-import { RootState } from '../stores/store'
+import type { RootState } from '../stores/store'
 
 type Props = {
   children: React.ReactNode
@@ -15,7 +15,7 @@ export const RPCClientContext = createContext<Context>({
   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(), [

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<any> {
+  return 'result' in object && 'id' in object
+}

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<RPCResult[]>) => {
-      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.