Refactor props
This commit is contained in:
parent
be3fd13496
commit
2fe6621adb
|
@ -142,11 +142,7 @@ const App = ({ ui, navigation, tuneData }: { ui: UIState, navigation: Navigation
|
|||
return (
|
||||
<>
|
||||
<Layout>
|
||||
<TopBar
|
||||
tuneId={navigation.tuneId}
|
||||
hasLogs={tuneData && (tuneData.logFiles || []).length > 0}
|
||||
hasToothLogs={tuneData && (tuneData.toothLogFiles || []).length > 0}
|
||||
/>
|
||||
<TopBar tuneData={tuneData} />
|
||||
<ReactRoutes>
|
||||
<Route path={Routes.HUB} element={<ContentFor element={<Hub />} />} />
|
||||
<Route path={Routes.TUNE_ROOT} element={<ContentFor element={<Info />} />} />
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 }));
|
||||
|
|
|
@ -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 &&
|
||||
|
|
Loading…
Reference in New Issue