Merge branch 'dev' into listen-to-feature

Author: corwintines

src/components/Simulator/index.tsx

@@ -1,5 +1,5 @@
 import { type ReactNode, useEffect, useMemo, useState } from "react"
-import { useRouter } from "next/router"
+import { useSearchParams } from "next/navigation"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
@@ -18,9 +18,9 @@ import { Phone } from "./Phone"
 import { SimulatorModal } from "./SimulatorModal"
 import { Template } from "./Template"
 import type { PathId, SimulatorData } from "./types"
-import { getValidPathId } from "./utils"
+import { getValidPathId, isValidPathId } from "./utils"
 
-import { usePathname } from "@/i18n/routing"
+import { usePathname, useRouter } from "@/i18n/routing"
 
 type SimulatorProps = {
   children: ReactNode
@@ -29,21 +29,21 @@ type SimulatorProps = {
 export const Simulator = ({ children, data }: SimulatorProps) => {
   const router = useRouter()
   const pathname = usePathname()
+  const searchParams = useSearchParams()
 
   // Track step
   const [step, setStep] = useState(0) // 0-indexed to use as array index
 
   // Track pathID
-  const pathId = getValidPathId(router.query.sim as string)
+  const pathId = getValidPathId(searchParams.get(PATH_ID_QUERY_PARAM))
   const simulator: SimulatorDetails | null = pathId ? data[pathId] : null
   const totalSteps: number = simulator ? simulator.explanations.length : 0
 
   // If pathId present, modal is open, else closed
   const isOpen = !!pathId
 
   const clearUrlParams = () => {
-    const pathWithoutParams = pathname.replace(/\?[^#]*/, "")
-    router.replace(pathWithoutParams)
+    router.replace(pathname, { scroll: false })
   }
 
   // When simulator closed: log event, clear URL params and close modal
@@ -62,7 +62,9 @@ export const Simulator = ({ children, data }: SimulatorProps) => {
   // Remove URL search param if invalid pathId
   useEffect(() => {
     setStep(0)
-    if (!pathId) clearUrlParams()
+    if (pathId && !isValidPathId(pathId)) {
+      clearUrlParams()
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pathId])
 
@@ -91,10 +93,15 @@ export const Simulator = ({ children, data }: SimulatorProps) => {
 
   const openPath = (id: PathId): void => {
     // Set new pathId in navigation
-    const params = new URLSearchParams()
-    params.set(PATH_ID_QUERY_PARAM, id)
-    const url = `?${params.toString()}#${SIMULATOR_ID}`
-    router.replace(url)
+    router.replace(
+      {
+        pathname,
+        query: {
+          [PATH_ID_QUERY_PARAM]: id,
+        },
+      },
+      { scroll: false }
+    )
   }
 
   // Navigation object passed to child components

src/components/Simulator/utils.ts

@@ -6,7 +6,9 @@ export const getValidPathId = (pathIdString: string | null): PathId | null => {
   return pathIdString
 }
 
-const isValidPathId = (pathIdString: string | null): pathIdString is PathId => {
+export const isValidPathId = (
+  pathIdString: string | null
+): pathIdString is PathId => {
   return PATH_IDS.includes(pathIdString as PathId)
 }