refactor: updated navigation logic

web/core/components/pages/editor/header/options-dropdown.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { observer } from "mobx-react";
-import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { ArchiveRestoreIcon, Clipboard, Copy, History, Link, Lock, LockOpen } from "lucide-react";
 // document editor
 import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
@@ -11,6 +11,7 @@ import { ArchiveIcon, CustomMenu, TOAST_TYPE, ToggleSwitch, setToast } from "@pl
 import { copyTextToClipboard, copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
 import { usePageFilters } from "@/hooks/use-page-filters";
+import { useQueryParams } from "@/hooks/use-query-params";
 // store
 import { IPage } from "@/store/pages/page";
 
@@ -25,8 +26,6 @@ export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
   const { editorRef, handleDuplicatePage, page, handleSaveDescription } = props;
   // router
   const router = useRouter();
-  const pathname = usePathname();
-  const currentSearchParams = useSearchParams();
   // store values
   const {
     archived_at,
@@ -44,6 +43,8 @@ export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
   const { workspaceSlug, projectId } = useParams();
   // page filters
   const { isFullWidth, handleFullWidth } = usePageFilters();
+  // update query params
+  const { updateQueryParams } = useQueryParams();
 
   const handleArchivePage = async () =>
     await archive().catch(() =>
@@ -153,9 +154,10 @@ export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
       key: "version-history",
       action: () => {
         // add query param, version=current to the route
-        const updatedSearchParams = new URLSearchParams(currentSearchParams.toString());
-        updatedSearchParams.set("version", "current");
-        router.push(pathname + "?" + updatedSearchParams.toString());
+        const updatedRoute = updateQueryParams({
+          paramsToAdd: { version: "current" },
+        });
+        router.push(updatedRoute);
       },
       label: "Version history",
       icon: History,

web/core/components/pages/editor/page-root.tsx

@@ -13,6 +13,7 @@ import { PageEditorHeaderRoot, PageEditorBody, PageVersionsOverlay } from "@/com
 import { useProjectPages } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { usePageDescription } from "@/hooks/use-page-description";
+import { useQueryParams } from "@/hooks/use-query-params";
 // services
 import { ProjectPageVersionService } from "@/services/page";
 const projectPageVersionService = new ProjectPageVersionService();
@@ -58,6 +59,8 @@ export const PageRoot = observer((props: TPageRootProps) => {
     projectId,
     workspaceSlug,
   });
+  // update query params
+  const { updateQueryParams } = useQueryParams();
 
   const handleCreatePage = async (payload: Partial<TPage>) => await createPage(payload);
 
@@ -89,8 +92,10 @@ export const PageRoot = observer((props: TPageRootProps) => {
   }, [version]);
 
   const handleCloseVersionsOverlay = () => {
-    setIsVersionsOverlayOpen(false);
-    router.push(`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`);
+    const updatedRoute = updateQueryParams({
+      paramsToRemove: ["version"],
+    });
+    router.push(updatedRoute);
   };
 
   return (

web/core/components/pages/version/sidebar.tsx

@@ -1,5 +1,4 @@
 import Link from "next/link";
-import { usePathname, useSearchParams } from "next/navigation";
 import { X } from "lucide-react";
 // plane types
 import { TPageVersion } from "@plane/types";
@@ -9,6 +8,8 @@ import { Loader } from "@plane/ui";
 import { PlaneVersionsSidebarListItem } from "@/components/pages";
 // helpers
 import { cn } from "@/helpers/common.helper";
+// hooks
+import { useQueryParams } from "@/hooks/use-query-params";
 
 type Props = {
   activeVersion: string | null;
@@ -18,16 +19,13 @@ type Props = {
 
 export const PageVersionsSidebar: React.FC<Props> = (props) => {
   const { activeVersion, handleClose, versions } = props;
-  // params
-  const pathname = usePathname();
-  const currentSearchParams = useSearchParams();
+  // update query params
+  const { updateQueryParams } = useQueryParams();
 
-  const getVersionLink = (versionID: string) => {
-    // add query param, version=current to the route
-    const updatedSearchParams = new URLSearchParams(currentSearchParams.toString());
-    updatedSearchParams.set("version", versionID);
-    return pathname + "?" + updatedSearchParams.toString();
-  };
+  const getVersionLink = (versionID: string) =>
+    updateQueryParams({
+      paramsToAdd: { version: versionID },
+    });
 
   return (
     <div className="flex-shrink-0 py-4 border-l border-custom-border-200 flex flex-col">

web/core/hooks/use-query-params.ts

@@ -0,0 +1,39 @@
+import { useSearchParams, usePathname } from "next/navigation";
+
+type TParamsToAdd = {
+  [key: string]: string;
+};
+
+export const useQueryParams = () => {
+  // next navigation
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+
+  const updateQueryParams = ({
+    paramsToAdd = {},
+    paramsToRemove = [],
+  }: {
+    paramsToAdd?: TParamsToAdd;
+    paramsToRemove?: string[];
+  }) => {
+    const currentParams = new URLSearchParams(searchParams.toString());
+
+    // add or update query parameters
+    Object.keys(paramsToAdd).forEach((key) => {
+      currentParams.set(key, paramsToAdd[key]);
+    });
+
+    // remove specified query parameters
+    paramsToRemove.forEach((key) => {
+      currentParams.delete(key);
+    });
+
+    // construct the new route with the updated query parameters
+    const newRoute = `${pathname}?${currentParams.toString()}`;
+    return newRoute;
+  };
+
+  return {
+    updateQueryParams,
+  };
+};