Refactor props

src/App.tsx

@@ -142,11 +142,7 @@ const App = ({ ui, navigation, tuneData }: { ui: UIState, navigation: Navigation
   return (
     <>
       <Layout>
-        <TopBar
+        <TopBar tuneData={tuneData} />
-          tuneId={navigation.tuneId}
-          hasLogs={tuneData && (tuneData.logFiles || []).length > 0}
-          hasToothLogs={tuneData && (tuneData.toothLogFiles || []).length > 0}
-        />
         <ReactRoutes>
           <Route path={Routes.HUB} element={<ContentFor element={<Hub />} />} />
           <Route path={Routes.TUNE_ROOT} element={<ContentFor element={<Info />} />} />

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'}
           </Space>
         </Radio.Button>
-        <Radio.Button value={buildTuneUrl(Routes.TUNE_LOGS)} disabled={!hasLogs}>
+        <Radio.Button value={buildTuneUrl(Routes.TUNE_LOGS)} disabled={(tuneData?.logFiles || []).length === 0}>
           <Space>
             <FundOutlined />
             {lg && 'Logs'}
           </Space>
         </Radio.Button>
-        <Radio.Button value={buildTuneUrl(Routes.TUNE_DIAGNOSE)} disabled={!hasToothLogs}>
+        <Radio.Button value={buildTuneUrl(Routes.TUNE_DIAGNOSE)} disabled={(tuneData?.toothLogFiles || []).length === 0}>
           <Space>
             <SettingOutlined />
             {lg && 'Diagnose'}
@@ -134,9 +139,9 @@ const TopBar = ({ tuneId, hasLogs, hasToothLogs }: { tuneId: string | null; hasL
         </Radio.Button>
       </Radio.Group>
     </Col>
-  ), [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 (
     <Header className="app-top-bar" style={xs ? { padding: '0 5px' } : {}}>
       <Row>
-        {tuneId ? tabs : (
+        {tuneData?.tuneId ? tabs : (
           <Col span={10} md={14} sm={16}>
             <Link to={Routes.HUB}>
               <Button icon={<CarOutlined />} type={hubMatch ? 'primary' : 'default'}>Hub</Button>

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 }));

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 (
     <>
       <Sider {...(siderProps as any)} className="app-sidebar">
-        {!(loadedLogs.logs || []).length ?
+        {!(loadedLogs?.logs || []).length ?
           <Loader />
           :
           !ui.sidebarCollapsed &&