/* global React, SectionShell, Eyebrow, Icon */
/* Sección "Reflexión del día" (#reflexion).
Enseña la ÚLTIMA newsletter que David ha enviado y un contador hasta la siguiente. Es lo
único de la página que cambia a diario, así que da motivo para volver, y es la muestra
gratis del pilar de mentalidad: por eso enlaza a la newsletter, que es donde se capta. */
const { useState, useEffect, useRef } = React;
const ES_LOCAL = ['localhost', '127.0.0.1'].indexOf(window.location.hostname) !== -1;
function dosCifras(n) { return String(n).padStart(2, '0'); }
// Devuelve { h, m, s } o null si el instante ya pasó.
function restante(objetivoMs, ahoraMs) {
const ms = objetivoMs - ahoraMs;
if (!objetivoMs || ms <= 0) return null;
const total = Math.floor(ms / 1000);
return { h: Math.floor(total / 3600), m: Math.floor((total % 3600) / 60), s: total % 60 };
}
function Contador({ objetivoIso }) {
const [ahora, setAhora] = useState(Date.now());
useEffect(() => {
const t = setInterval(() => setAhora(Date.now()), 1000);
return () => clearInterval(t);
}, []);
const objetivoMs = objetivoIso ? new Date(objetivoIso).getTime() : 0;
const r = restante(objetivoMs, ahora);
// Sin instante al que apuntar (el endpoint no responde todavía) no se enseña contador:
// un "Publicándose…" eterno promete algo que no va a pasar y confunde más que no poner nada.
// "Publicándose…" queda para cuando SÍ había una hora y ya ha pasado.
if (!objetivoIso) return null;
return (
);
}
function Reflexion() {
const [datos, setDatos] = useState(null); // null = cargando
const [abierta, setAbierta] = useState(false);
const reintentado = useRef(false);
// "Leer entera" solo tiene sentido si el texto NO cabe: una reflexión corta se lee de
// una vez y el botón sobraba (parecía que faltaba texto cuando no faltaba nada).
const cuerpoRef = useRef(null);
const [recortada, setRecortada] = useState(false);
useEffect(() => {
let vivo = true;
// En local no hay endpoint desplegado: cualquier respuesta que no sea una reflexión
// buena cae en el ejemplo, pero SOLO en local. En producción, estado vacío.
const respaldo = () => (ES_LOCAL ? window.CDT_REFLEXION_DEMO : { ok: false });
fetch(window.CDT_REFLEXION_ENDPOINT, { method: 'GET' })
.then((r) => r.json())
.then((d) => { if (vivo) setDatos(d && d.ok ? d : respaldo()); })
.catch(() => { if (vivo) setDatos(respaldo()); });
return () => { vivo = false; };
}, []);
// Cuando el contador llega a cero, la nueva tarda un poco en aparecer: reintentamos UNA vez
// al minuto, no cada segundo.
useEffect(() => {
if (!datos || !datos.siguiente_en || reintentado.current) return;
const faltan = new Date(datos.siguiente_en).getTime() - Date.now();
if (faltan > 0 && faltan < 86400000) {
const t = setTimeout(() => { reintentado.current = true; location.reload(); }, faltan + 60000);
return () => clearTimeout(t);
}
}, [datos]);
// Se mide DESPUÉS de pintar el HTML, que es cuando se sabe el alto de verdad.
useEffect(() => {
const el = cuerpoRef.current;
if (!el) { setRecortada(false); return; }
setRecortada(el.scrollHeight > el.clientHeight + 4);
}, [datos]);
const cargando = datos === null;
const r = datos && datos.reflexion ? datos.reflexion : null;
return (
Reflexión del día
La reflexión de hoy
Cada día, un mensaje para que pares y te cuestiones. El mismo que reciben por correo los que están dentro.