From 2fe6621adb7df6f9e341f0d6739cac8d468fbcf1 Mon Sep 17 00:00:00 2001 From: Piotr Rogowski Date: Wed, 19 Oct 2022 23:24:45 +0200 Subject: [PATCH] Refactor props --- src/App.tsx | 6 +----- src/components/TopBar.tsx | 19 ++++++++++++------- src/pages/Diagnose.tsx | 6 +++--- src/pages/Logs.tsx | 10 +++++----- 4 files changed, 21 insertions(+), 20 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 32e57fe..15a459f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -142,11 +142,7 @@ const App = ({ ui, navigation, tuneData }: { ui: UIState, navigation: Navigation return ( <> - 0} - hasToothLogs={tuneData && (tuneData.toothLogFiles || []).length > 0} - /> + } />} /> } />} /> diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx index b3ebed4..45826d0 100644 --- a/src/components/TopBar.tsx +++ b/src/components/TopBar.tsx @@ -52,18 +52,23 @@ import { isToggleSidebar } from '../utils/keyboard/shortcuts'; import { Routes } from '../routes'; import { useAuth } from '../contexts/AuthContext'; import { logOutSuccessful } from '../pages/auth/notifications'; +import { TuneDataState } from '../types/state'; const { Header } = Layout; const { useBreakpoint } = Grid; const { SubMenu } = Menu; -const TopBar = ({ tuneId, hasLogs, hasToothLogs }: { tuneId: string | null; hasLogs: boolean; hasToothLogs: boolean }) => { +const TopBar = ({ + tuneData, +}: { + tuneData: TuneDataState | null; +}) => { const { xs, sm, lg } = useBreakpoint(); const { pathname } = useLocation(); const { currentUser, logout } = useAuth(); const navigate = useNavigate(); const { query } = useKBar(); - const buildTuneUrl = useCallback((route: string) => tuneId ? generatePath(route, { tuneId }) : null, [tuneId]); + const buildTuneUrl = useCallback((route: string) => tuneData?.tuneId ? generatePath(route, { tuneId: tuneData.tuneId }) : null, [tuneData?.tuneId]); const hubPathMatch = useMatch(Routes.HUB); const tuneRootMatch = useMatch(`${Routes.TUNE_ROOT}/*`); const tuneTuneMatch = useMatch(`${Routes.TUNE_TUNE}/*`); @@ -120,13 +125,13 @@ const TopBar = ({ tuneId, hasLogs, hasToothLogs }: { tuneId: string | null; hasL {lg && 'Tune'} - + {lg && 'Logs'} - + {lg && 'Diagnose'} @@ -134,9 +139,9 @@ const TopBar = ({ tuneId, hasLogs, hasToothLogs }: { tuneId: string | null; hasL - ), [pathname, tuneLogMatch?.pathnameBase, toothLogMatch?.pathnameBase, tuneTuneMatch?.pathnameBase, tabMatch?.pathname, tuneRootMatch?.pathname, hubPathMatch?.pathname, buildTuneUrl, lg, hasLogs, hasToothLogs, navigate]); + ), [pathname, tuneLogMatch?.pathnameBase, toothLogMatch?.pathnameBase, tuneTuneMatch?.pathnameBase, tabMatch?.pathname, tuneRootMatch?.pathname, hubPathMatch?.pathname, buildTuneUrl, lg, tuneData?.logFiles, tuneData?.toothLogFiles, navigate]); - const rightMenuColProps = tuneId ? { + const rightMenuColProps = tuneData?.tuneId ? { span: 8, md: 8, sm: 8, @@ -185,7 +190,7 @@ const TopBar = ({ tuneId, hasLogs, hasToothLogs }: { tuneId: string | null; hasL return (
- {tuneId ? tabs : ( + {tuneData?.tuneId ? tabs : ( diff --git a/src/pages/Diagnose.tsx b/src/pages/Diagnose.tsx index 6fddee5..f3d8df0 100644 --- a/src/pages/Diagnose.tsx +++ b/src/pages/Diagnose.tsx @@ -75,7 +75,7 @@ const Diagnose = ({ }: { ui: UIState; loadedToothLogs: ToothLogsState; - tuneData: TuneDataState; + tuneData: TuneDataState | null; }) => { const { lg } = useBreakpoint(); const { Sider } = Layout; @@ -129,7 +129,7 @@ const Diagnose = ({ } try { - const raw = await fetchLogFileWithProgress(tuneData.id, logFileName, (percent, total, edge) => { + const raw = await fetchLogFileWithProgress(tuneData!.id, logFileName, (percent, total, edge) => { setProgress(percent); setFileSize(formatBytes(total)); setEdgeLocation(edge || edgeUnknown); @@ -185,7 +185,7 @@ const Diagnose = ({ } // user navigated to logs root page - if (!routeMatch?.params.fileName && tuneData.toothLogFiles?.length) { + if (!routeMatch?.params.fileName && tuneData && tuneData.toothLogFiles?.length) { // either redirect to the first log or to the latest selected if (loadedToothLogs.fileName) { navigate(generatePath(Routes.TUNE_DIAGNOSE_FILE, { tuneId: tuneData.tuneId, fileName: loadedToothLogs.fileName })); diff --git a/src/pages/Logs.tsx b/src/pages/Logs.tsx index a0ed669..5a52c78 100644 --- a/src/pages/Logs.tsx +++ b/src/pages/Logs.tsx @@ -89,7 +89,7 @@ const Logs = ({ ui: UIState; config: ConfigState; loadedLogs: LogsState; - tuneData: TuneDataState; + tuneData: TuneDataState | null; }) => { const { lg } = useBreakpoint(); const { Sider } = Layout; @@ -182,7 +182,7 @@ const Logs = ({ } try { - const raw = await fetchLogFileWithProgress(tuneData.id, logFileName, (percent, total, edge) => { + const raw = await fetchLogFileWithProgress(tuneData!.id, logFileName, (percent, total, edge) => { setProgress(percent); setFileSize(formatBytes(total)); setEdgeLocation(edge || edgeUnknown); @@ -231,7 +231,7 @@ const Logs = ({ }; // user navigated to logs root page - if (!routeMatch?.params.fileName && tuneData.logFiles?.length) { + if (!routeMatch?.params.fileName && tuneData && tuneData.logFiles?.length) { // either redirect to the first log or to the latest selected if (loadedLogs.fileName) { navigate(generatePath(Routes.TUNE_LOGS_FILE, { tuneId: tuneData.tuneId, fileName: loadedLogs.fileName })); @@ -244,7 +244,7 @@ const Logs = ({ } // first visit, logs are not loaded yet - if (!(loadedLogs.logs || []).length && tuneData.tuneId) { + if (!(loadedLogs.logs || []).length && tuneData?.tuneId) { loadData(); } @@ -274,7 +274,7 @@ const Logs = ({ return ( <> - {!(loadedLogs.logs || []).length ? + {!(loadedLogs?.logs || []).length ? : !ui.sidebarCollapsed &&