diff --git a/src/pages/sign/Forget.tsx b/src/pages/sign/Forget.tsx index a307f2b..e9bf48a 100644 --- a/src/pages/sign/Forget.tsx +++ b/src/pages/sign/Forget.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useCallback } from 'react' import Icon from '@ant-design/icons' import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile' import { @@ -18,7 +18,27 @@ const Forget: React.FC = () => { const navigate = useNavigate() const [searchParams] = useSearchParams() const turnstileRef = useRef() + const turnstileRefCallback = useCallback( + (node: TurnstileInstance) => { + turnstileRef.current = node + + if (location.pathname === '/forget' && !searchParams.get('code')) { + turnstileRef.current?.execute() + } + }, + [location.pathname, searchParams] + ) const retrieveTurnstileRef = useRef() + const retrieveTurnstileRefCallback = useCallback( + (node: TurnstileInstance) => { + retrieveTurnstileRef.current = node + + if (location.pathname === '/forget' && searchParams.get('code')) { + retrieveTurnstileRef.current?.execute() + } + }, + [location.pathname, searchParams] + ) const [isSending, setIsSending] = useState(false) const [isSent, setIsSent] = useState(false) const [isChanging, setIsChanging] = useState(false) @@ -42,20 +62,6 @@ const Forget: React.FC = () => { } }, [isChanging]) - useUpdatedEffect(() => { - if (location.pathname !== '/forget') { - return - } - - setTimeout(() => { - if (!searchParams.get('code')) { - turnstileRef.current?.execute() - } else { - retrieveTurnstileRef.current?.execute() - } - }, 500) - }, [location.pathname]) - const handleOnSend = (forgetParam: ForgetParam) => { if (isSending) { return @@ -93,10 +99,6 @@ const Forget: React.FC = () => { const handleOnRetry = () => { setIsSent(false) - - setTimeout(() => { - turnstileRef.current?.execute() - }, 500) } const handleOnChange = (retrieveParam: RetrieveParam) => { @@ -162,7 +164,7 @@ const Forget: React.FC = () => { { { const navigate = useNavigate() const [searchParams] = useSearchParams() const turnstileRef = useRef() + const turnstileRefCallback = useCallback( + (node: TurnstileInstance) => { + turnstileRef.current = node + if (location.pathname === '/login') { + turnstileRef.current?.execute() + } + }, + [location.pathname] + ) const [isSigningIn, setIsSigningIn] = useState(false) const [captchaCode, setCaptchaCode] = useState('') @@ -33,15 +42,6 @@ const SignIn: React.FC = () => { } }, [isSigningIn]) - useUpdatedEffect(() => { - if (location.pathname !== '/login') { - return - } - setTimeout(() => { - turnstileRef.current?.execute() - }, 500) - }, [turnstileRef]) - const handleOnFinish = (loginParam: LoginParam) => { if (isSigningIn) { return @@ -165,7 +165,7 @@ const SignIn: React.FC = () => { { const location = useLocation() const navigate = useNavigate() const turnstileRef = useRef() + const turnstileRefCallback = useCallback( + (node: TurnstileInstance) => { + turnstileRef.current = node + + if (location.pathname === '/register') { + turnstileRef.current?.execute() + } + }, + [location.pathname] + ) const [isSigningUp, setIsSigningUp] = useState(false) const [isFinish, setIsFinish] = useState(false) const [isSending, setIsSending] = useState(false) @@ -39,9 +49,6 @@ const SignUp: React.FC = () => { replace: true }) } - setTimeout(() => { - turnstileRef.current?.execute() - }, 500) }, [location.pathname]) const handleOnFinish = (registerParam: RegisterParam) => { @@ -192,7 +199,7 @@ const SignUp: React.FC = () => {