code refactoring, removed react helmet

frontend/package.json

@@ -18,7 +18,6 @@
     "fp-ts": "^2.16.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-helmet": "^6.1.0",
     "react-router-dom": "^6.17.0",
     "recoil": "^0.7.7",
     "rxjs": "^7.8.1"

frontend/pnpm-lock.yaml

@@ -29,9 +29,6 @@ dependencies:
   react-dom:
     specifier: ^18.2.0
     version: 18.2.0(react@18.2.0)
-  react-helmet:
-    specifier: ^6.1.0
-    version: 6.1.0(react@18.2.0)
   react-router-dom:
     specifier: ^6.17.0
     version: 6.17.0(react-dom@18.2.0)(react@18.2.0)
@@ -1138,22 +1135,6 @@ packages:
       scheduler: 0.23.0
     dev: false
 
-  /react-fast-compare@3.2.2:
-    resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==}
-    dev: false
-
-  /react-helmet@6.1.0(react@18.2.0):
-    resolution: {integrity: sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==}
-    peerDependencies:
-      react: '>=16.3.0'
-    dependencies:
-      object-assign: 4.1.1
-      prop-types: 15.8.1
-      react: 18.2.0
-      react-fast-compare: 3.2.2
-      react-side-effect: 2.1.2(react@18.2.0)
-    dev: false
-
   /react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
     dev: false
@@ -1185,14 +1166,6 @@ packages:
       react: 18.2.0
     dev: false
 
-  /react-side-effect@2.1.2(react@18.2.0):
-    resolution: {integrity: sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==}
-    peerDependencies:
-      react: ^16.3.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      react: 18.2.0
-    dev: false
-
   /react-transition-group@4.4.5(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
     peerDependencies:

frontend/src/Layout.tsx

@@ -17,7 +17,6 @@ import Toolbar from '@mui/material/Toolbar'
 import Typography from '@mui/material/Typography'
 import { grey } from '@mui/material/colors'
 import { Suspense, useMemo, useState } from 'react'
-import { Helmet } from 'react-helmet'
 import { Link, Outlet } from 'react-router-dom'
 import { useRecoilValue } from 'recoil'
 import { settingsState } from './atoms/settings'
@@ -56,11 +55,6 @@ export default function Layout() {
   return (
     <ThemeProvider theme={theme}>
       <SocketSubscriber />
-      <Helmet>
-        <title>
-          {settings.appTitle}
-        </title>
-      </Helmet>
       <Box sx={{ display: 'flex' }}>
         <CssBaseline />
         <AppBar position="absolute" open={open}>

frontend/src/atoms/rpc.ts

@@ -6,7 +6,5 @@ export const rpcClientState = selector({
   key: 'rpcClientState',
   get: ({ get }) =>
     new RPCClient(get(rpcHTTPEndpoint), get(rpcWebSocketEndpoint)),
-  set: ({ get }) =>
-    new RPCClient(get(rpcHTTPEndpoint), get(rpcWebSocketEndpoint)),
   dangerouslyAllowMutability: true,
 })

frontend/src/atoms/status.ts

@@ -36,6 +36,7 @@ export const availableDownloadPathsState = selector({
   key: 'availableDownloadPathsState',
   get: async ({ get }) => {
     const res = await get(rpcClientState).directoryTree()
+      .catch(() => ({ result: [] }))
     return res.result
   }
 })

frontend/src/components/SocketSubscriber.tsx

@@ -1,7 +1,7 @@
 import * as O from 'fp-ts/Option'
 import { useEffect, useMemo } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { share, take, timer } from 'rxjs'
+import { take, timer } from 'rxjs'
 import { downloadsState } from '../atoms/downloads'
 import { serverAddressAndPortState } from '../atoms/settings'
 import { connectedState } from '../atoms/status'
@@ -13,7 +13,7 @@ import { datetimeCompareFunc, isRPCResponse } from '../utils'
 
 interface Props extends React.HTMLAttributes<HTMLBaseElement> { }
 
-const SocketSubscriber: React.FC<Props> = ({ children }) => {
+const SocketSubscriber: React.FC<Props> = () => {
   const [connected, setIsConnected] = useRecoilState(connectedState)
   const [, setDownloads] = useRecoilState(downloadsState)
 
@@ -23,19 +23,22 @@ const SocketSubscriber: React.FC<Props> = ({ children }) => {
   const { client } = useRPC()
   const { pushMessage } = useToast()
 
-  const sharedSocket$ = useMemo(() => client.socket$.pipe(share()), [])
+  const socketOnce$ = useMemo(() => client.socket$.pipe(take(1)), [])
-  const socketOnce$ = useMemo(() => sharedSocket$.pipe(take(1)), [])
 
-  useSubscription(socketOnce$, () => {
+  useEffect(() => {
-    setIsConnected(true)
+    if (!connected) {
-    pushMessage(
+      socketOnce$.subscribe(() => {
-      `${i18n.t('toastConnected')} (${serverAddressAndPort})`,
+        setIsConnected(true)
-      "success"
+        pushMessage(
-    )
+          `${i18n.t('toastConnected')} (${serverAddressAndPort})`,
-  })
+          "success"
+        )
+      })
+    }
+  }, [connected])
 
   useSubscription(
-    sharedSocket$,
+    client.socket$,
     event => {
       if (!isRPCResponse(event)) { return }
       if (!Array.isArray(event.result)) { return }
@@ -50,7 +53,6 @@ const SocketSubscriber: React.FC<Props> = ({ children }) => {
           )
         )
       }
-
       setDownloads(O.none)
     },
     err => {
@@ -64,13 +66,13 @@ const SocketSubscriber: React.FC<Props> = ({ children }) => {
 
   useEffect(() => {
     if (connected) {
-      timer(0, 1000).subscribe(() => client.running())
+      const sub = timer(0, 1000).subscribe(() => client.running())
-    }
-  }, [connected])
 
-  return (
+      return () => sub.unsubscribe()
-    <>{children}</>
+    }
-  )
+  }, [connected, client])
+
+  return null
 }
 
 export default SocketSubscriber

frontend/src/lib/rpcClient.ts

@@ -19,11 +19,13 @@ export class RPCClient {
   constructor(httpEndpoint: string, webSocketEndpoint: string) {
     this.seq = 0
     this.httpEndpoint = httpEndpoint
-    this._socket$ = webSocket<any>(webSocketEndpoint)
+    this._socket$ = webSocket<any>({
+      url: webSocketEndpoint
+    })
   }
 
   public get socket$(): Observable<RPCResponse<RPCResult[]>> {
-    return this._socket$.asObservable()
+    return this._socket$
   }
 
   private incrementSeq() {