Fix Tune routing

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 <Loader />;