code refactoring

frontend/src/views/Archive.tsx

@@ -27,7 +27,7 @@ import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile'
 import VideoFileIcon from '@mui/icons-material/VideoFile'
 
 import { Buffer } from 'buffer'
-import { useEffect, useMemo, useState, useTransition } from 'react'
+import { useContext, useEffect, useMemo, useState, useTransition } from 'react'
 import { useSelector } from 'react-redux'
 import { BehaviorSubject, Subject, combineLatestWith, map, share } from 'rxjs'
 import { useObservable } from '../hooks/observable'
@@ -36,11 +36,14 @@ import { DeleteRequest, DirectoryEntry } from '../types'
 import { roundMiB } from '../utils'
 import { useNavigate } from 'react-router-dom'
 import { ffetch } from '../lib/httpClient'
+import { I18nContext } from '../providers/i18nProvider'
 
 export default function Downloaded() {
   const settings = useSelector((state: RootState) => state.settings)
   const navigate = useNavigate()
 
+  const { i18n } = useContext(I18nContext)
+
   const [openDialog, setOpenDialog] = useState(false)
 
   const serverAddr =
@@ -160,7 +163,7 @@ export default function Downloaded() {
         flexDirection: 'column',
       }}>
         <Typography py={1} variant="h5" color="primary">
-          {'Archive'}
+          {i18n.t('archiveTitle')}
         </Typography>
         <List sx={{ width: '100%', bgcolor: 'background.paper' }}>
           {selectable.length === 0 && 'No files found'}

frontend/src/views/Home.tsx

@@ -12,7 +12,7 @@ import {
   SpeedDialIcon,
   styled
 } from '@mui/material'
-import { useEffect, useMemo, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import DownloadDialog from '../components/DownloadDialog'
 import { DownloadsCardView } from '../components/DownloadsCardView'
@@ -20,8 +20,9 @@ import { DownloadsListView } from '../components/DownloadsListView'
 import Splash from '../components/Splash'
 import { toggleListView } from '../features/settings/settingsSlice'
 import { connected, setFreeSpace } from '../features/status/statusSlice'
-import I18nBuilder from '../lib/intl'
-import { RPCClient, socket$ } from '../lib/rpcClient'
+import { socket$ } from '../lib/rpcClient'
+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'
@@ -41,9 +42,9 @@ export default function Home() {
   const [openDialog, setOpenDialog] = useState(false)
   const [socketHasError, setSocketHasError] = useState(false)
 
-  // memos
-  const i18n = useMemo(() => new I18nBuilder(settings.language), [settings.language])
-  const client = useMemo(() => new RPCClient(), [settings.serverAddr, settings.serverPort])
+  // context
+  const { i18n } = useContext(I18nContext)
+  const { client } = useContext(RPCClientContext)
 
   /* -------------------- Effects -------------------- */
 
@@ -120,7 +121,6 @@ export default function Home() {
     client.killAll()
   }
 
-
   /* -------------------- styled components -------------------- */
 
   const Input = styled('input')({

frontend/src/views/Settings.tsx

@@ -17,7 +17,7 @@ import {
   TextField,
   Typography
 } from '@mui/material'
-import { useEffect, useMemo, useState } from 'react'
+import { useContext, useEffect, useMemo, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import {
   Subject,
@@ -26,9 +26,6 @@ import {
   map,
   takeWhile
 } from 'rxjs'
-import { CliArguments } from '../lib/argsParser'
-import I18nBuilder from '../lib/intl'
-import { RPCClient } from '../lib/rpcClient'
 import {
   LanguageUnion,
   ThemeUnion,
@@ -43,6 +40,9 @@ import {
   setTheme
 } from '../features/settings/settingsSlice'
 import { updated } from '../features/status/statusSlice'
+import { CliArguments } from '../lib/argsParser'
+import { I18nContext } from '../providers/i18nProvider'
+import { RPCClientContext } from '../providers/rpcClientProvider'
 import { RootState } from '../stores/store'
 import { validateDomain, validateIP } from '../utils'
 
@@ -54,9 +54,9 @@ export default function Settings() {
 
   const [invalidIP, setInvalidIP] = useState(false);
 
-  const i18n = useMemo(() => new I18nBuilder(settings.language), [settings.language])
+  const { i18n } = useContext(I18nContext)
+  const { client } = useContext(RPCClientContext)
 
-  const client = useMemo(() => new RPCClient(), [])
   const cliArgs = useMemo(() => new CliArguments().fromString(settings.cliArgs), [])
 
   const serverAddr$ = useMemo(() => new Subject<string>(), [])