From 558efba23d4a0f1f1e7d53967c854f674e99b73f Mon Sep 17 00:00:00 2001 From: Pontus Dreij Date: Fri, 29 Nov 2024 09:38:49 +0100 Subject: [PATCH] Reset the error and refresh the page when the search params change, to support the booking widget that is using router.push to navigate to the booking flow page --- app/[lang]/(live)/error.tsx | 32 ++++++++++++++++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) diff --git a/app/[lang]/(live)/error.tsx b/app/[lang]/(live)/error.tsx index 1b1970475..a39495eb7 100644 --- a/app/[lang]/(live)/error.tsx +++ b/app/[lang]/(live)/error.tsx @@ -1,7 +1,12 @@ "use client" // Error components must be Client Components -import { useParams, usePathname } from "next/navigation" -import { useEffect } from "react" +import { + useParams, + usePathname, + useRouter, + useSearchParams, +} from "next/navigation" +import { startTransition, useEffect, useRef } from "react" import { useIntl } from "react-intl" import { login } from "@/constants/routes/handleAuth" @@ -15,11 +20,17 @@ import { LangParams } from "@/types/params" export default function Error({ error, + reset, }: { error: Error & { digest?: string } + reset: () => void }) { const intl = useIntl() const params = useParams() + const router = useRouter() + const searchParams = useSearchParams() + const currentSearchParamsRef = useRef() + const isFirstLoadRef = useRef(true) useEffect(() => { // Log the error to an error reporting service @@ -31,6 +42,23 @@ export default function Error({ } }, [error, params.lang]) + useEffect(() => { + // This is to reset the error and refresh the page when the search params change, to support the booking widget that is using router.push to navigate to the booking flow page + const currentSearchParams = searchParams.toString() + + if ( + currentSearchParamsRef.current !== currentSearchParams && + !isFirstLoadRef.current + ) { + startTransition(() => { + reset() + router.refresh() + }) + } + isFirstLoadRef.current = false + currentSearchParamsRef.current = currentSearchParams + }, [searchParams, reset, router]) + const pathname = usePathname() const lang = findLang(pathname)