From 85de72d0b87ce0d518a448664c0ff695b54507bd Mon Sep 17 00:00:00 2001
From: jacovinus <jacovinus@gmail.com>
Date: Thu, 7 Dec 2023 19:39:40 +0100
Subject: [PATCH] fix: hash router

---
 .../helpers/UpdateStateFromQueryParams.ts     |   4 +-
 .../main/plugins/settingsmenu/MainMenu.tsx    |  16 ++-
 packages/main/src/main.tsx                    | 111 +++++++++---------
 3 files changed, 67 insertions(+), 64 deletions(-)

diff --git a/packages/main/helpers/UpdateStateFromQueryParams.ts b/packages/main/helpers/UpdateStateFromQueryParams.ts
index f267a7fa..e3743ed3 100644
--- a/packages/main/helpers/UpdateStateFromQueryParams.ts
+++ b/packages/main/helpers/UpdateStateFromQueryParams.ts
@@ -214,7 +214,7 @@ export function UpdateStateFromQueryParams() {
                     }
                 }
             });
-            (window as any).location.hash = urlFromHash;
+            (window as any).location.hash = `/search/#${urlFromHash}`;
         }
     }, []);
 
@@ -283,7 +283,7 @@ export function UpdateStateFromQueryParams() {
                 }
             });
 
-            (window as any).location.hash = paramsFromHash;
+            (window as any).location.hash =  `/search/#${paramsFromHash}`;
         }
     }, [STORE_KEYS]);
 }
diff --git a/packages/main/plugins/settingsmenu/MainMenu.tsx b/packages/main/plugins/settingsmenu/MainMenu.tsx
index b57c166b..fe9ea108 100644
--- a/packages/main/plugins/settingsmenu/MainMenu.tsx
+++ b/packages/main/plugins/settingsmenu/MainMenu.tsx
@@ -11,7 +11,7 @@ import ExtensionIcon from "@mui/icons-material/Extension";
 import useTheme from "@ui/theme/useTheme";
 import { useDispatch, useSelector } from "react-redux";
 
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import PersonOutlineOutlinedIcon from "@mui/icons-material/PersonOutlineOutlined";
 import StorageIcon from "@mui/icons-material/Storage";
 import CopyButton from "./CopyButton/CopyButton";
@@ -39,6 +39,7 @@ export const ButtonMenuStyles = (theme: QrynTheme) => ({
 });
 
 export default function MainMenu() {
+    const {key} = useLocation()
     const showDs = useSelector((store: any) => store.showDataSourceSetting);
     const currentUserRole = useSelector((store: any) => store.currentUser.role);
     const dispatch: any = useDispatch();
@@ -51,17 +52,22 @@ export default function MainMenu() {
         setUserType(currentUserRole);
     }, [currentUserRole]);
 
+    useEffect(()=>{
+        handleClose()
+
+    },[key])
+
     const handleClick = (event: React.MouseEvent<HTMLElement>) => {
         setAnchorEl(() => event.currentTarget);
     };
 
-    const handleClose = (e?: any) => {
-        e.stopPropagation();
+    const handleClose = () => {
+       
         setAnchorEl(() => undefined);
     };
 
-    const handleSettingsOpen = (e: any) => {
-        handleClose(e);
+    const handleSettingsOpen = () => {
+        handleClose();
         dispatch(setSettingsDialogOpen(true));
     };
 
diff --git a/packages/main/src/main.tsx b/packages/main/src/main.tsx
index c7b3e270..91349e0d 100644
--- a/packages/main/src/main.tsx
+++ b/packages/main/src/main.tsx
@@ -1,74 +1,71 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
 
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-
-import axios from 'axios'
+import axios from "axios";
 import "./scss/app.scss";
-import errorInterceptor from '@ui/helpers/error.interceptor'
-
-import { Notification } from '@ui/qrynui/notifications'
+import errorInterceptor from "@ui/helpers/error.interceptor";
 
-import {CookiesProvider } from 'react-cookie'
+import { Notification } from "@ui/qrynui/notifications";
 
-import { BrowserRouter, Routes, Route } from 'react-router-dom'
-import { lazy, Suspense } from 'react'
-import  ScreenLoader  from '@ui/views/ScreenLoader'
+import { CookiesProvider } from "react-cookie";
 
+import { Routes, Route, HashRouter } from "react-router-dom";
+import { lazy, Suspense } from "react";
+import ScreenLoader from "@ui/views/ScreenLoader";
 
-import store from '@ui/store/store'
-import { Provider } from 'react-redux'
-import ProtectedRoute from './providers/ProtectedRoute'
+import store from "@ui/store/store";
+import { Provider } from "react-redux";
+import ProtectedRoute from "./providers/ProtectedRoute";
 
-const AppRoute = lazy(()=> import('./App'))
+const AppRoute = lazy(() => import("./App"));
 
-const DataSourcesRoute = lazy(()=> import ('@ui/views/DataSources/DataSources'))
+const DataSourcesRoute = lazy(
+    () => import("@ui/views/DataSources/DataSources")
+);
 
-const MainRoute = lazy(()=> import ("../views/Main"))
+const MainRoute = lazy(() => import("../views/Main"));
 
 const PluginsRoute = lazy(() => import("../plugins/Plugins"));
 
-const UserRoles = lazy(()=> import("../views/User/UserRoles"))
+const UserRoles = lazy(() => import("../views/User/UserRoles"));
 
 errorInterceptor(axios);
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-<React.StrictMode>
-<CookiesProvider>
-    <Provider store={store}>
-        <BrowserRouter>
-            <Suspense fallback={<ScreenLoader />}>
-                <Routes>
-                    <Route path="/" element={<AppRoute />}>
-                        <Route index element={<MainRoute />} />
-                        <Route
-                            path="/search/*"
-                            index
-                            element={<MainRoute />}
-                        />
-                        <Route
-                            path="/plugins"
-                            element={<PluginsRoute />}
-                        />
-                           <Route
-                            path="/users"
-                            element={<UserRoles />}
-                        />
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+    <React.StrictMode>
+        <CookiesProvider>
+            <Provider store={store}>
+                <HashRouter basename="/">
+                    <Suspense fallback={<ScreenLoader />}>
+                        <Routes>
+                            <Route path="/" element={<AppRoute />}>
+                                <Route index element={<MainRoute />} />
+                                <Route
+                                    path="/search/*"
+                                    index
+                                    element={<MainRoute />}
+                                />
+                                <Route
+                                    path="/plugins"
+                                    element={<PluginsRoute />}
+                                />
+                                <Route path="/users" element={<UserRoles />} />
 
-                        <Route
-                            path="/datasources/*"
-                            element={
-                                <ProtectedRoute>
-                                    {" "}
-                                    <DataSourcesRoute />
-                                </ProtectedRoute>
-                            }
-                        />
-                    </Route>
-                </Routes>
-            </Suspense>
-        </BrowserRouter>
-        <Notification />
-    </Provider>
-</CookiesProvider>
-</React.StrictMode>
+                                <Route
+                                    path="/datasources/*"
+                                    element={
+                                        <ProtectedRoute>
+                                            {" "}
+                                            <DataSourcesRoute />
+                                        </ProtectedRoute>
+                                    }
+                                />
+                            </Route>
+                        </Routes>
+                    </Suspense>
+                </HashRouter>
+                <Notification />
+            </Provider>
+        </CookiesProvider>
+    </React.StrictMode>
 );