Inna
2c78489e4d
Salieron al pasar el lint por todo el proyecto. De 47 a 0 (quedan 15 avisos: <img> vs <Image /> y el <link> del tema, los dos deliberados). - Footer y Video (42 de los 47, que en realidad eran 7 enlaces: el plugin repite cada uno 6 veces): usaban `<a href="/terms-and-conditions">` SIN el idioma delante. No estaba roto de milagro: el middleware lo salvaba mirando la cookie NEXT_LOCALE. Pero cada clic se comía un 307 y recargaba la página entera en vez de navegar en cliente, y el idioma lo decidía la cookie en vez de la URL en la que estás. Ahora van con el `Link` de i18n, que ya existía. - Turnstile: escribía una ref (`cb.current = onVerify`) DURANTE el render. Es el patrón de "callback fresca", pero no está permitido: React puede descartar ese render y dejarla mal. Pasa a un efecto. - ActivateClient y ConfirmClient: ponían el estado de error con setState dentro del efecto cuando NO hay hash. Eso se sabe ya al renderizar (es un prop), así que se deriva del estado inicial y se ahorra un render. - BattlepayList: `window.location.href = …` -> `.assign()`, igual que en la tienda. - CookieConsent: aquí el efecto es correcto y la regla no aplica, así que se silencia explicando por qué: el consentimiento vive en una cookie del navegador, en el servidor no existe, y leerlo al renderizar rompería la hidratación (le saldría el banner a quien ya había decidido). Verificado: desde /es/ el pie enlaza a /es/terms-and-conditions y desde /en/ a /en/terms-and-conditions; portada, cookies, tienda y mi-cuenta siguen dando 200. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
84 lines
2.2 KiB
TypeScript
84 lines
2.2 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useRef } from 'react'
|
|
|
|
interface TurnstileApi {
|
|
render: (
|
|
el: HTMLElement,
|
|
opts: {
|
|
sitekey: string
|
|
theme?: 'auto' | 'light' | 'dark'
|
|
callback?: (token: string) => void
|
|
'error-callback'?: () => void
|
|
'expired-callback'?: () => void
|
|
},
|
|
) => string
|
|
}
|
|
|
|
declare global {
|
|
interface Window {
|
|
turnstile?: TurnstileApi
|
|
}
|
|
}
|
|
|
|
const SCRIPT_ID = 'cf-turnstile-script'
|
|
|
|
/** Widget de Cloudflare Turnstile. Llama onVerify(token) cuando se resuelve. */
|
|
export function Turnstile({ onVerify }: { onVerify: (token: string) => void }) {
|
|
const ref = useRef<HTMLDivElement>(null)
|
|
const rendered = useRef(false)
|
|
// Callback siempre fresca sin re-crear el widget. Se actualiza en un efecto y
|
|
// NO durante el render: escribir una ref mientras se renderiza no está
|
|
// permitido (React puede descartar ese render y dejarla mal).
|
|
const cb = useRef(onVerify)
|
|
useEffect(() => {
|
|
cb.current = onVerify
|
|
})
|
|
const siteKey = process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY
|
|
|
|
useEffect(() => {
|
|
if (!siteKey) return
|
|
let cancelled = false
|
|
|
|
function render() {
|
|
if (cancelled || rendered.current || !ref.current || !window.turnstile) return
|
|
rendered.current = true
|
|
window.turnstile.render(ref.current, {
|
|
sitekey: siteKey!,
|
|
theme: 'dark',
|
|
callback: (t) => cb.current(t),
|
|
'error-callback': () => cb.current(''),
|
|
'expired-callback': () => cb.current(''),
|
|
})
|
|
}
|
|
|
|
if (window.turnstile) {
|
|
render()
|
|
return () => {
|
|
cancelled = true
|
|
}
|
|
}
|
|
if (!document.getElementById(SCRIPT_ID)) {
|
|
const s = document.createElement('script')
|
|
s.id = SCRIPT_ID
|
|
s.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js'
|
|
s.async = true
|
|
s.defer = true
|
|
document.head.appendChild(s)
|
|
}
|
|
const iv = window.setInterval(() => {
|
|
if (window.turnstile) {
|
|
window.clearInterval(iv)
|
|
render()
|
|
}
|
|
}, 200)
|
|
return () => {
|
|
cancelled = true
|
|
window.clearInterval(iv)
|
|
}
|
|
}, [siteKey])
|
|
|
|
if (!siteKey) return null
|
|
return <div ref={ref} style={{ display: 'flex', justifyContent: 'center', margin: '12px 0' }} />
|
|
}
|