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/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(() => sharedSocket$.pipe(take(1)), [])
+  const socketOnce$ = useMemo(() => client.socket$.pipe(take(1)), [])
 
-  useSubscription(socketOnce$, () => {
-    setIsConnected(true)
-    pushMessage(
-      `${i18n.t('toastConnected')} (${serverAddressAndPort})`,
-      "success"
-    )
-  })
+  useEffect(() => {
+    if (!connected) {
+      socketOnce$.subscribe(() => {
+        setIsConnected(true)
+        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())
+
+      return () => sub.unsubscribe()
     }
-  }, [connected])
+  }, [connected, client])
 
-  return (
-    <>{children}</>
-  )
+  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() {