diff --git a/src/routes/onboarding/index.tsx b/src/routes/onboarding/index.tsx index 08f9a88e..ecbfe181 100644 --- a/src/routes/onboarding/index.tsx +++ b/src/routes/onboarding/index.tsx @@ -13,6 +13,11 @@ import WelcomePage from "./steps/welcome-page"; import WhoCanSignUp from "./steps/who-can-sign-up"; import SelectLanguage from "../../components/Language"; import { useGetAutoTunnelInfoQuery } from "@/app/services/server"; +import { useAppSelector } from "@/app/store"; +import { compareVersion } from "@/utils"; +import { shallowEqual } from "react-redux"; + +const TUNNEL_MIN_VERSION = "0.5.19"; const Navigator = ({ showTunnelStep }: { showTunnelStep: boolean }) => { const { activeStep, goToStep } = useWizard(); @@ -54,8 +59,10 @@ const Navigator = ({ showTunnelStep }: { showTunnelStep: boolean }) => { export default function OnboardingPage() { const { t } = useTranslation("welcome"); const [serverName, setServerName] = useState(""); - const { data: autoInfo } = useGetAutoTunnelInfoQuery(); - const showTunnelStep = autoInfo ? !autoInfo.auto_cftunnel : false; + const currentVersion = useAppSelector((store) => store.server.version, shallowEqual); + const versionOk = !!currentVersion && compareVersion(currentVersion, TUNNEL_MIN_VERSION) >= 0; + const { data: autoInfo } = useGetAutoTunnelInfoQuery(undefined, { skip: !versionOk }); + const showTunnelStep = versionOk && (autoInfo ? !autoInfo.auto_cftunnel : false); return ( <> diff --git a/src/routes/onboarding/steps/done-page.tsx b/src/routes/onboarding/steps/done-page.tsx index 5981aa7e..92b40c86 100644 --- a/src/routes/onboarding/steps/done-page.tsx +++ b/src/routes/onboarding/steps/done-page.tsx @@ -1,14 +1,21 @@ import { Trans, useTranslation } from "react-i18next"; import { useNavigate } from "react-router-dom"; +import { shallowEqual } from "react-redux"; import StyledButton from "@/components/styled/Button"; import PlayIcon from "@/assets/icons/play.svg?url"; import { useGetAutoTunnelInfoQuery } from "@/app/services/server"; +import { useAppSelector } from "@/app/store"; +import { compareVersion } from "@/utils"; + +const TUNNEL_MIN_VERSION = "0.5.19"; export default function DonePage({ serverName }: { serverName: string }) { const { t } = useTranslation("welcome", { keyPrefix: "onboarding" }); const navigate = useNavigate(); - const { data: autoInfo } = useGetAutoTunnelInfoQuery(); + const currentVersion = useAppSelector((store) => store.server.version, shallowEqual); + const versionOk = !!currentVersion && compareVersion(currentVersion, TUNNEL_MIN_VERSION) >= 0; + const { data: autoInfo } = useGetAutoTunnelInfoQuery(undefined, { skip: !versionOk }); const tunnelUrl = autoInfo?.tunnel_status.status === "running" ? autoInfo.tunnel_status.url : null; diff --git a/src/routes/setting/Cloudflared/index.tsx b/src/routes/setting/Cloudflared/index.tsx index 643f5aa5..d45832e9 100644 --- a/src/routes/setting/Cloudflared/index.tsx +++ b/src/routes/setting/Cloudflared/index.tsx @@ -1,12 +1,16 @@ import { useEffect, useRef, useState } from "react"; import toast from "react-hot-toast"; import { useTranslation } from "react-i18next"; +import { shallowEqual } from "react-redux"; import { BASE_ORIGIN, tokenHeader } from "@/app/config"; import { useLazyGetCloudflaredStatusQuery, useStopCloudflaredMutation } from "@/app/services/server"; import ServerVersionChecker from "@/components/ServerVersionChecker"; import Button from "@/components/styled/Button"; -import { getLocalAuthData } from "@/utils"; +import { getLocalAuthData, compareVersion } from "@/utils"; +import { useAppSelector } from "@/app/store"; + +const TUNNEL_MIN_VERSION = "0.5.19"; type TunnelStatus = "idle" | "downloading" | "starting" | "running" | "error"; @@ -19,6 +23,8 @@ interface SseEvent { export default function Cloudflared() { const { t } = useTranslation("setting", { keyPrefix: "cloudflared" }); + const currentVersion = useAppSelector((store) => store.server.version, shallowEqual); + const versionOk = !!currentVersion && compareVersion(currentVersion, TUNNEL_MIN_VERSION) >= 0; const [status, setStatus] = useState("idle"); const [tunnelUrl, setTunnelUrl] = useState(null); const [errorMsg, setErrorMsg] = useState(null); @@ -31,6 +37,7 @@ export default function Cloudflared() { const [stopCloudflared, { isLoading: isStopping }] = useStopCloudflaredMutation(); useEffect(() => { + if (!versionOk) return; getStatus().then((res) => { if (res.data) { setStatus(res.data.status); @@ -38,7 +45,7 @@ export default function Cloudflared() { setErrorMsg(res.data.error); } }); - }, []); + }, [versionOk]); const addLog = (msg: string) => setLogs((prev) => [...prev.slice(-29), msg]);