From f49f0729633977596931ed0cf2a8b87368e981d6 Mon Sep 17 00:00:00 2001 From: marcobaobao Date: Thu, 2 Nov 2023 10:18:32 +0100 Subject: [PATCH] code refactoring --- frontend/src/Layout.tsx | 7 +++-- frontend/src/assets/i18n.yaml | 11 +++++++ frontend/src/atoms/status.ts | 14 ++++----- frontend/src/components/DownloadDialog.tsx | 11 ++++--- .../src/components/FreeSpaceIndicator.tsx | 15 ++++------ frontend/src/components/HomeActions.tsx | 30 ++++++++++--------- 6 files changed, 49 insertions(+), 39 deletions(-) diff --git a/frontend/src/Layout.tsx b/frontend/src/Layout.tsx index 8461f58..a7fce7d 100644 --- a/frontend/src/Layout.tsx +++ b/frontend/src/Layout.tsx @@ -16,7 +16,7 @@ import ListItemText from '@mui/material/ListItemText' import Toolbar from '@mui/material/Toolbar' import Typography from '@mui/material/Typography' import { grey } from '@mui/material/colors' -import { useMemo, useState } from 'react' +import { Suspense, useMemo, useState } from 'react' import { Helmet } from 'react-helmet' import { Link, Outlet } from 'react-router-dom' import { useRecoilValue } from 'recoil' @@ -86,11 +86,14 @@ export default function Layout() { > {settings.appTitle} - + + +
diff --git a/frontend/src/assets/i18n.yaml b/frontend/src/assets/i18n.yaml index dc54998..c673764 100644 --- a/frontend/src/assets/i18n.yaml +++ b/frontend/src/assets/i18n.yaml @@ -41,6 +41,7 @@ languages: settingsButtonLabel: Settings rpcAuthenticationLabel: RPC authentication themeTogglerLabel: Theme toggler + loadingLabel: Loading... appTitle: App title savedTemplates: Saved templates templatesEditor: Templates editor @@ -89,6 +90,7 @@ languages: settingsButtonLabel: Settings rpcAuthenticationLabel: RPC authentication themeTogglerLabel: Theme toggler + loadingLabel: Loading... appTitle: Nom de l'application savedTemplates: Saved templates templatesEditor: Templates editor @@ -134,6 +136,7 @@ languages: settingsButtonLabel: Settings rpcAuthenticationLabel: RPC authentication themeTogglerLabel: Theme toggler + loadingLabel: Loading... appTitle: Titolo applicazione savedTemplates: Template salvati templatesEditor: Editor template @@ -180,6 +183,7 @@ languages: settingsButtonLabel: Settings rpcAuthenticationLabel: RPC authentication themeTogglerLabel: Theme toggler + loadingLabel: Loading... appTitle: App 标题 savedTemplates: Saved templates templatesEditor: Templates editor @@ -224,6 +228,7 @@ languages: settingsButtonLabel: Settings rpcAuthenticationLabel: RPC authentication themeTogglerLabel: Theme toggler + loadingLabel: Loading... appTitle: App title savedTemplates: Saved templates templatesEditor: Templates editor @@ -268,6 +273,7 @@ languages: settingsButtonLabel: Settings rpcAuthenticationLabel: RPC authentication themeTogglerLabel: Theme toggler + loadingLabel: Loading... appTitle: App title savedTemplates: Saved templates templatesEditor: Templates editor @@ -312,6 +318,7 @@ languages: settingsButtonLabel: Settings rpcAuthenticationLabel: RPC authentication themeTogglerLabel: Theme toggler + loadingLabel: Loading... appTitle: App title savedTemplates: Saved templates templatesEditor: Templates editor @@ -357,6 +364,7 @@ languages: settingsButtonLabel: Settings rpcAuthenticationLabel: RPC authentication themeTogglerLabel: Theme toggler + loadingLabel: Loading... appTitle: App title savedTemplates: Saved templates templatesEditor: Templates editor @@ -401,6 +409,7 @@ languages: settingsButtonLabel: Settings rpcAuthenticationLabel: RPC authentication themeTogglerLabel: Theme toggler + loadingLabel: Loading... appTitle: App title savedTemplates: Saved templates templatesEditor: Templates editor @@ -445,6 +454,7 @@ languages: settingsButtonLabel: Settings rpcAuthenticationLabel: RPC authentication themeTogglerLabel: Theme toggler + loadingLabel: Loading... appTitle: App title savedTemplates: Saved templates templatesEditor: Templates editor @@ -489,6 +499,7 @@ languages: settingsButtonLabel: Settings rpcAuthenticationLabel: RPC authentication themeTogglerLabel: Theme toggler + loadingLabel: Loading... appTitle: App title savedTemplates: Saved templates templatesEditor: Templates editor diff --git a/frontend/src/atoms/status.ts b/frontend/src/atoms/status.ts index 33d676c..1892959 100644 --- a/frontend/src/atoms/status.ts +++ b/frontend/src/atoms/status.ts @@ -23,13 +23,13 @@ export const isDownloadingState = atom({ default: false }) -// export const freeSpaceBytesState = selector({ -// key: 'freeSpaceBytesState', -// get: async ({ get }) => { -// const res = await get(rpcClientState).freeSpace() -// return res.result -// } -// }) +export const freeSpaceBytesState = selector({ + key: 'freeSpaceBytesState', + get: async ({ get }) => { + const res = await get(rpcClientState).freeSpace() + return res.result + } +}) export const availableDownloadPathsState = selector({ key: 'availableDownloadPathsState', diff --git a/frontend/src/components/DownloadDialog.tsx b/frontend/src/components/DownloadDialog.tsx index 766d02c..34d8aed 100644 --- a/frontend/src/components/DownloadDialog.tsx +++ b/frontend/src/components/DownloadDialog.tsx @@ -22,6 +22,7 @@ import Toolbar from '@mui/material/Toolbar' import Typography from '@mui/material/Typography' import { TransitionProps } from '@mui/material/transitions' import { + FC, forwardRef, useMemo, useRef, @@ -55,11 +56,7 @@ type Props = { onDownloadStart: (url: string) => void } -export default function DownloadDialog({ - open, - onClose, - onDownloadStart -}: Props) { +const DownloadDialog: FC = ({ open, onClose, onDownloadStart }) => { const settings = useRecoilValue(settingsState) const isConnected = useRecoilValue(connectedState) const availableDownloadPaths = useRecoilValue(availableDownloadPathsState) @@ -368,4 +365,6 @@ export default function DownloadDialog({ ) -} \ No newline at end of file +} + +export default DownloadDialog \ No newline at end of file diff --git a/frontend/src/components/FreeSpaceIndicator.tsx b/frontend/src/components/FreeSpaceIndicator.tsx index d9bcb34..1426ef2 100644 --- a/frontend/src/components/FreeSpaceIndicator.tsx +++ b/frontend/src/components/FreeSpaceIndicator.tsx @@ -1,26 +1,21 @@ import StorageIcon from '@mui/icons-material/Storage' -import { useEffect, useState } from 'react' +import { useRecoilValue } from 'recoil' +import { freeSpaceBytesState } from '../atoms/status' import { formatGiB } from '../utils' -import { useRPC } from '../hooks/useRPC' const FreeSpaceIndicator = () => { - const [freeSpace, setFreeSpace] = useState(0) - - const { client } = useRPC() - - useEffect(() => { - client.freeSpace().then(r => setFreeSpace(r.result)) - }, [client]) + const freeSpace = useRecoilValue(freeSpaceBytesState) return (
-  {formatGiB(freeSpace)}  + {formatGiB(freeSpace)}
) diff --git a/frontend/src/components/HomeActions.tsx b/frontend/src/components/HomeActions.tsx index 22d6414..f5130fb 100644 --- a/frontend/src/components/HomeActions.tsx +++ b/frontend/src/components/HomeActions.tsx @@ -1,9 +1,9 @@ -import { useState } from 'react' +import { Suspense, useState } from 'react' import { useRecoilState } from 'recoil' import { loadingAtom } from '../atoms/ui' +import { useToast } from '../hooks/toast' import DownloadDialog from './DownloadDialog' import HomeSpeedDial from './HomeSpeedDial' -import { useToast } from '../hooks/toast' import TemplatesEditor from './TemplatesEditor' const HomeActions: React.FC = () => { @@ -20,18 +20,20 @@ const HomeActions: React.FC = () => { onDownloadOpen={() => setOpenDownload(true)} onEditorOpen={() => setOpenEditor(true)} /> - { - setOpenDownload(false) - setIsLoading(true) - }} - onDownloadStart={(url) => { - pushMessage(`Requested ${url}`, 'info') - setOpenDownload(false) - setIsLoading(true) - }} - /> + + { + setOpenDownload(false) + setIsLoading(true) + }} + onDownloadStart={(url) => { + pushMessage(`Requested ${url}`, 'info') + setOpenDownload(false) + setIsLoading(true) + }} + /> + setOpenEditor(false)}