diff --git a/src/pages/onboarding/Onboarding.tsx b/src/pages/onboarding/Onboarding.tsx index f5bf1758..525ed7df 100644 --- a/src/pages/onboarding/Onboarding.tsx +++ b/src/pages/onboarding/Onboarding.tsx @@ -1,6 +1,5 @@ import classNames from "classnames"; import { Trans, useTranslation } from "react-i18next"; -import { useNavigate } from "react-router-dom"; import { Button } from "@/components/buttons/Button"; import { Stepper } from "@/components/layout/Stepper"; @@ -8,7 +7,10 @@ import { CenterContainer } from "@/components/layout/ThinContainer"; import { Modal, ModalCard, useModal } from "@/components/overlays/Modal"; import { Heading1, Heading2, Paragraph } from "@/components/utils/Text"; import { MinimalPageLayout } from "@/pages/layouts/MinimalPageLayout"; -import { useRedirectBack } from "@/pages/onboarding/onboardingHooks"; +import { + useNavigateOnboarding, + useRedirectBack, +} from "@/pages/onboarding/onboardingHooks"; import { Card, CardContent, Link } from "@/pages/onboarding/utils"; import { PageTitle } from "@/pages/parts/util/PageTitle"; @@ -21,7 +23,7 @@ function VerticalLine(props: { className?: string }) { } export function OnboardingPage() { - const navigate = useNavigate(); + const navigate = useNavigateOnboarding(); const skipModal = useModal("skip"); const { completeAndRedirect } = useRedirectBack(); const { t } = useTranslation(); diff --git a/src/pages/onboarding/OnboardingExtension.tsx b/src/pages/onboarding/OnboardingExtension.tsx index 75408f28..70472a1a 100644 --- a/src/pages/onboarding/OnboardingExtension.tsx +++ b/src/pages/onboarding/OnboardingExtension.tsx @@ -1,6 +1,5 @@ import { ReactNode } from "react"; import { Trans, useTranslation } from "react-i18next"; -import { useNavigate } from "react-router-dom"; import { useAsyncFn, useInterval } from "react-use"; import { isAllowedExtensionVersion } from "@/backend/extension/compatibility"; @@ -12,7 +11,10 @@ import { Stepper } from "@/components/layout/Stepper"; import { CenterContainer } from "@/components/layout/ThinContainer"; import { Heading2, Paragraph } from "@/components/utils/Text"; import { MinimalPageLayout } from "@/pages/layouts/MinimalPageLayout"; -import { useRedirectBack } from "@/pages/onboarding/onboardingHooks"; +import { + useNavigateOnboarding, + useRedirectBack, +} from "@/pages/onboarding/onboardingHooks"; import { Card, Link } from "@/pages/onboarding/utils"; import { PageTitle } from "@/pages/parts/util/PageTitle"; @@ -104,7 +106,7 @@ export function ExtensionStatus(props: { export function OnboardingExtensionPage() { const { t } = useTranslation(); - const navigate = useNavigate(); + const navigate = useNavigateOnboarding(); const { completeAndRedirect } = useRedirectBack(); const [{ loading, value }, exec] = useAsyncFn( diff --git a/src/pages/onboarding/OnboardingProxy.tsx b/src/pages/onboarding/OnboardingProxy.tsx index 1d3b6b7c..e576779c 100644 --- a/src/pages/onboarding/OnboardingProxy.tsx +++ b/src/pages/onboarding/OnboardingProxy.tsx @@ -1,6 +1,5 @@ import { useState } from "react"; import { useTranslation } from "react-i18next"; -import { useNavigate } from "react-router-dom"; import { useAsyncFn } from "react-use"; import { singularProxiedFetch } from "@/backend/helpers/fetch"; @@ -12,7 +11,10 @@ import { Divider } from "@/components/utils/Divider"; import { ErrorLine } from "@/components/utils/ErrorLine"; import { Heading2, Paragraph } from "@/components/utils/Text"; import { MinimalPageLayout } from "@/pages/layouts/MinimalPageLayout"; -import { useRedirectBack } from "@/pages/onboarding/onboardingHooks"; +import { + useNavigateOnboarding, + useRedirectBack, +} from "@/pages/onboarding/onboardingHooks"; import { Link } from "@/pages/onboarding/utils"; import { PageTitle } from "@/pages/parts/util/PageTitle"; import { useAuthStore } from "@/stores/auth"; @@ -21,7 +23,7 @@ const testUrl = "https://postman-echo.com/get"; export function OnboardingProxyPage() { const { t } = useTranslation(); - const navigate = useNavigate(); + const navigate = useNavigateOnboarding(); const { completeAndRedirect } = useRedirectBack(); const [url, setUrl] = useState(""); const setProxySet = useAuthStore((s) => s.setProxySet); diff --git a/src/pages/onboarding/onboardingHooks.ts b/src/pages/onboarding/onboardingHooks.ts index bcbbea48..cccf8825 100644 --- a/src/pages/onboarding/onboardingHooks.ts +++ b/src/pages/onboarding/onboardingHooks.ts @@ -1,5 +1,5 @@ import { useCallback } from "react"; -import { useNavigate } from "react-router-dom"; +import { useLocation, useNavigate } from "react-router-dom"; import { useQueryParam } from "@/hooks/useQueryParams"; import { useOnboardingStore } from "@/stores/onboarding"; @@ -20,3 +20,18 @@ export function useRedirectBack() { return { completeAndRedirect }; } + +export function useNavigateOnboarding() { + const navigate = useNavigate(); + const loc = useLocation(); + const nav = useCallback( + (path: string) => { + navigate({ + pathname: path, + search: loc.search, + }); + }, + [navigate, loc], + ); + return nav; +}