diff --git a/frontend/package.json b/frontend/package.json index eb9f3d4..ecba605 100644 --- a/frontend/package.json +++ b/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" diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index d8a534d..d595633 100644 --- a/frontend/pnpm-lock.yaml +++ b/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: diff --git a/frontend/src/Layout.tsx b/frontend/src/Layout.tsx index 837a3e9..2801122 100644 --- a/frontend/src/Layout.tsx +++ b/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 ( - - - {settings.appTitle} - - diff --git a/frontend/src/atoms/rpc.ts b/frontend/src/atoms/rpc.ts index 9015edb..55a9aa6 100644 --- a/frontend/src/atoms/rpc.ts +++ b/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, }) diff --git a/frontend/src/atoms/status.ts b/frontend/src/atoms/status.ts index db0bbff..4c59ba1 100644 --- a/frontend/src/atoms/status.ts +++ b/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 } }) \ No newline at end of file diff --git a/frontend/src/components/SocketSubscriber.tsx b/frontend/src/components/SocketSubscriber.tsx index 488a4bf..155363a 100644 --- a/frontend/src/components/SocketSubscriber.tsx +++ b/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 { } -const SocketSubscriber: React.FC = ({ children }) => { +const SocketSubscriber: React.FC = () => { const [connected, setIsConnected] = useRecoilState(connectedState) const [, setDownloads] = useRecoilState(downloadsState) @@ -23,19 +23,22 @@ const SocketSubscriber: React.FC = ({ 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 = ({ children }) => { ) ) } - setDownloads(O.none) }, err => { @@ -64,13 +66,13 @@ const SocketSubscriber: React.FC = ({ 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 \ No newline at end of file diff --git a/frontend/src/lib/rpcClient.ts b/frontend/src/lib/rpcClient.ts index ee70edc..5002c6f 100644 --- a/frontend/src/lib/rpcClient.ts +++ b/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(webSocketEndpoint) + this._socket$ = webSocket({ + url: webSocketEndpoint + }) } public get socket$(): Observable> { - return this._socket$.asObservable() + return this._socket$ } private incrementSeq() {