code refactoring (#227)

frontend/src/components/UpdateBinaryButton.tsx

@@ -0,0 +1,33 @@
+import { Button, CircularProgress } from '@mui/material'
+import { useI18n } from '../hooks/useI18n'
+import { useRPC } from '../hooks/useRPC'
+import { useState } from 'react'
+import { useToast } from '../hooks/toast'
+
+const UpdateBinaryButton: React.FC = () => {
+  const { i18n } = useI18n()
+  const { client } = useRPC()
+  const { pushMessage } = useToast()
+
+  const [isLoading, setIsLoading] = useState(false)
+
+  const updateBinary = () => {
+    setIsLoading(true)
+    client
+      .updateExecutable()
+      .then(() => pushMessage(i18n.t('toastUpdated'), 'success'))
+      .then(() => setIsLoading(false))
+  }
+
+  return (
+    <Button
+      variant="contained"
+      endIcon={isLoading ? <CircularProgress size={16} color='secondary' /> : <></>}
+      onClick={updateBinary}
+    >
+      {i18n.t('updateBinButton')}
+    </Button>
+  )
+}
+
+export default UpdateBinaryButton

frontend/src/lib/rpcClient.ts

@@ -191,4 +191,11 @@ export class RPCClient {
       params: []
     })
   }
+
+  public updateExecutable() {
+    return this.sendHTTP({
+      method: 'Service.UpdateExecutable',
+      params: []
+    })
+  }
 }

frontend/src/views/Settings.tsx

@@ -1,5 +1,4 @@
 import {
-  Button,
   Checkbox,
   Container,
   FormControl,
@@ -18,6 +17,7 @@ import {
   Typography,
   capitalize
 } from '@mui/material'
+import { useAtom } from 'jotai'
 import { Suspense, useEffect, useMemo, useState } from 'react'
 import {
   Subject,
@@ -44,11 +44,10 @@ import {
   themeState
 } from '../atoms/settings'
 import CookiesTextField from '../components/CookiesTextField'
+import UpdateBinaryButton from '../components/UpdateBinaryButton'
 import { useToast } from '../hooks/toast'
 import { useI18n } from '../hooks/useI18n'
-import { useRPC } from '../hooks/useRPC'
 import { validateDomain, validateIP } from '../utils'
-import { useAtom } from 'jotai'
 
 // NEED ABSOLUTELY TO BE SPLIT IN MULTIPLE COMPONENTS
 export default function Settings() {
@@ -72,7 +71,6 @@ export default function Settings() {
   const [invalidIP, setInvalidIP] = useState(false)
 
   const { i18n } = useI18n()
-  const { client } = useRPC()
 
   const { pushMessage } = useToast()
 
@@ -140,13 +138,6 @@ export default function Settings() {
     setTheme(event.target.value as Theme)
   }
 
-  /**
-   * Updates yt-dlp binary via RPC
-   */
-  const updateBinary = () => {
-    client.updateExecutable().then(() => pushMessage(i18n.t('toastUpdated'), 'success'))
-  }
-
   return (
     <Container maxWidth="xl" sx={{ mt: 4, mb: 8 }}>
       <Paper
@@ -352,14 +343,8 @@ export default function Settings() {
           </Suspense>
         </Grid>
         <Grid>
-          <Stack direction="row">
-            <Button
-              sx={{ mr: 1, mt: 3 }}
-              variant="contained"
-              onClick={() => updateBinary()}
-            >
-              {i18n.t('updateBinButton')}
-            </Button>
+          <Stack direction="row" sx={{ pt: 2 }}>
+            <UpdateBinaryButton />
           </Stack>
         </Grid>
       </Paper>