From c32203c759aedecff65c35ddc2605c5fe4f81a7f Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Fri, 4 Jul 2025 19:58:49 +0200
Subject: [PATCH] fix: search params editor conflicts with alias

---
 .../navigation-menu/useViewEditor.tsx         | 11 +++----
 .../view-params-editor/ViewParamsEditor.tsx   | 31 ++++++-------------
 .../viewParamsEditor.store.ts                 | 15 +++++++++
 3 files changed, 28 insertions(+), 29 deletions(-)
 create mode 100644 apps/client/src/common/components/view-params-editor/viewParamsEditor.store.ts

diff --git a/apps/client/src/common/components/navigation-menu/useViewEditor.tsx b/apps/client/src/common/components/navigation-menu/useViewEditor.tsx
index 2458a11c4..3e9db4045 100644
--- a/apps/client/src/common/components/navigation-menu/useViewEditor.tsx
+++ b/apps/client/src/common/components/navigation-menu/useViewEditor.tsx
@@ -1,19 +1,16 @@
-import { useCallback, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
 import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
+import { useViewParamsEditorStore } from '../view-params-editor/viewParamsEditor.store';
 
 interface EditorVisibilityOptions {
   isLockable?: boolean;
 }
 
 export default function useViewEditor({ isLockable }: EditorVisibilityOptions) {
-  const [searchParams, setSearchParams] = useSearchParams();
-
-  const showEditFormDrawer = useCallback(() => {
-    searchParams.set('edit', 'true');
-    setSearchParams(searchParams);
-  }, [searchParams, setSearchParams]);
+  const [searchParams] = useSearchParams();
+  const { open: showEditFormDrawer } = useViewParamsEditorStore();
 
   const isViewLocked = useMemo(() => {
     if (!isLockable) {
diff --git a/apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx b/apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx
index 4a37c9ad0..d317d7d6e 100644
--- a/apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx
+++ b/apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx
@@ -1,8 +1,6 @@
-import { FormEvent, memo, useEffect } from 'react';
+import { FormEvent, memo } from 'react';
 import { IoClose } from 'react-icons/io5';
-import { useSearchParams } from 'react-router-dom';
 import { Dialog } from '@base-ui-components/react/dialog';
-import { useDisclosure } from '@mantine/hooks';
 
 import useViewSettings from '../../hooks-query/useViewSettings';
 import Button from '../buttons/Button';
@@ -11,6 +9,7 @@ import Info from '../info/Info';
 
 import { ViewOption } from './viewParams.types';
 import { getURLSearchParamsFromObj } from './viewParams.utils';
+import { useViewParamsEditorStore } from './viewParamsEditor.store';
 import ViewParamsSection from './ViewParamsSection';
 
 import style from './ViewParamsEditor.module.scss';
@@ -22,30 +21,16 @@ interface EditFormDrawerProps {
 export default memo(ViewParamsEditor);
 
 function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) {
-  const [searchParams, setSearchParams] = useSearchParams();
   const { data: viewSettings } = useViewSettings();
-
-  const [isOpen, handlers] = useDisclosure(false);
-
-  // handle opening the drawer
-  useEffect(() => {
-    const isEditing = searchParams.get('edit');
-
-    if (isEditing === 'true') {
-      return handlers.open();
-    }
-  }, [searchParams, handlers]);
+  const { isOpen, close } = useViewParamsEditorStore();
 
   const handleClose = () => {
-    searchParams.delete('edit');
-    setSearchParams(searchParams);
-
-    handlers.close();
+    close();
   };
 
   const resetParams = () => {
-    setSearchParams();
-    handlers.close();
+    window.history.pushState(null, '', window.location.pathname);
+    close();
   };
 
   const onParamsFormSubmit = (formEvent: FormEvent<HTMLFormElement>) => {
@@ -53,7 +38,9 @@ function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) {
 
     const newParamsObject = Object.fromEntries(new FormData(formEvent.currentTarget));
     const newSearchParams = getURLSearchParamsFromObj(newParamsObject, viewOptions);
-    setSearchParams(newSearchParams);
+    const url = new URL(window.location.href);
+    url.search = newSearchParams.toString();
+    window.history.pushState(null, '', url);
   };
 
   return (
diff --git a/apps/client/src/common/components/view-params-editor/viewParamsEditor.store.ts b/apps/client/src/common/components/view-params-editor/viewParamsEditor.store.ts
new file mode 100644
index 000000000..0176f6e8e
--- /dev/null
+++ b/apps/client/src/common/components/view-params-editor/viewParamsEditor.store.ts
@@ -0,0 +1,15 @@
+import { create } from 'zustand';
+
+interface ViewParamsEditorStore {
+  isOpen: boolean;
+  open: () => void;
+  close: () => void;
+  toggle: () => void;
+}
+
+export const useViewParamsEditorStore = create<ViewParamsEditorStore>((set) => ({
+  isOpen: false,
+  open: () => set({ isOpen: true }),
+  close: () => set({ isOpen: false }),
+  toggle: () => set((state) => ({ isOpen: !state.isOpen })),
+}));