diff --git a/src/pages/Tune.tsx b/src/pages/Tune.tsx index 2775924..1b91a1d 100644 --- a/src/pages/Tune.tsx +++ b/src/pages/Tune.tsx @@ -4,19 +4,13 @@ import { useNavigate, } from 'react-router-dom'; import { connect } from 'react-redux'; -import { - useEffect, - useMemo, -} from 'react'; +import { useEffect } from 'react'; import { Config as ConfigType } from '@speedy-tuner/types'; import Dialog from '../components/Tune/Dialog'; import SideBar from '../components/Tune/SideBar'; import { Routes } from '../routes'; import useConfig from '../hooks/useConfig'; -import { - AppState, - NavigationState, -} from '../types/state'; +import { AppState } from '../types/state'; import Loader from '../components/Loader'; const mapStateToProps = (state: AppState) => ({ @@ -25,7 +19,7 @@ const mapStateToProps = (state: AppState) => ({ config: state.config, }); -const Tune = ({ navigation, config }: { navigation: NavigationState, config: ConfigType }) => { +const Tune = ({ config }: { config: ConfigType }) => { const dialogMatch = useMatch(Routes.TUNE_DIALOG); const tuneRootMatch = useMatch(Routes.TUNE_TUNE); // const { storageGetSync } = useBrowserStorage(); @@ -33,26 +27,23 @@ const Tune = ({ navigation, config }: { navigation: NavigationState, config: Con const { isConfigReady } = useConfig(config); const navigate = useNavigate(); - const firstDialogPath = useMemo(() => { - if (!isConfigReady) { - return null; - } - - const firstCategory = Object.keys(config.menus)[0]; - const firstDialog = Object.keys(config.menus[firstCategory].subMenus)[0]; - - return generatePath(Routes.TUNE_DIALOG, { - tuneId: navigation.tuneId!, - category: firstCategory, - dialog: firstDialog, - }); - }, [config.menus, isConfigReady, navigation.tuneId]); + const tunePathMatch = useMatch(`${Routes.TUNE_ROOT}/*`); + const tuneId = tunePathMatch?.params.tuneId; useEffect(() => { - if (tuneRootMatch && firstDialogPath) { + if (isConfigReady && tuneRootMatch) { + const firstCategory = Object.keys(config.menus)[0]; + const firstDialog = Object.keys(config.menus[firstCategory].subMenus)[0]; + + const firstDialogPath = generatePath(Routes.TUNE_DIALOG, { + tuneId, + category: firstCategory, + dialog: firstDialog, + }); + navigate(firstDialogPath, { replace: true }); } - }, [firstDialogPath, navigate, tuneRootMatch, isConfigReady]); + }, [navigate, tuneRootMatch, isConfigReady, config.menus, tuneId]); if (!isConfigReady || !dialogMatch) { return ;