{catLabel(featured.cat)}
{fmtDate(featured.iso, lang)}
{featured.title}
{featured.excerpt}
{t.heroEyebrow}
{t.heroTitle[0]}{t.heroTitle[1]}{t.heroTitle[2]}
{t.heroLead}
{t.heroStats.map((s, i) => (
))}
{s.num}
{s.label}
); return; } const props = { key }; for (const attr of RICH_ATTRS[tag] || []) { const v = n.getAttribute(attr); if (v != null && (attr !== "href" && attr !== "src" || safeUrl(v))) props[attr] = v; } if (tag === "a") { props.rel = "noopener noreferrer"; props.target = "_blank"; } if (tag === "img") { out.push(React.createElement(tag, props)); return; } // void element out.push(React.createElement(tag, props, kids)); }); return out; } function SanitizedHtml({ html }) { const nodes = useMemo(() => { try { const doc = new DOMParser().parseFromString(html, "text/html"); return richChildren(doc.body, "b"); } catch (e) { return []; } }, [html]); return
{nodes}
;
}
/* ╔═══════════════════════════════════════════════════════════════════════════╗
║ DYNAMIC · CMS — ARTICLE READER (modal) ║
║ Live body: GET /noticies/{id}?lang={lang} (D6 detail, sanitized HTML). ║
║ Until it arrives — or if it never does (INT-1/INT-2) — the seed ║
║ paragraphs (NEWS_BODIES) or just title+excerpt are shown instead. ║
╚═══════════════════════════════════════════════════════════════════════════╝ */
function NewsModal({ t, item, lang, categories, onClose }) {
const seedBody = (NEWS_BODIES[lang] && NEWS_BODIES[lang][item.id]) || [];
const [html, setHtml] = useState(null);
useEffect(() => {
let cancelled = false;
setHtml(null);
window.EsbartData.fetchJson(`noticies/${encodeURIComponent(item.id)}?lang=${lang}`)
.then((json) => { if (!cancelled && typeof json.body === "string" && json.body) setHtml(json.body); })
.catch((err) => { console.warn("[cms-data]", err); }); // keep the seed body
return () => { cancelled = true; };
}, [item.id, lang]);
const catLabel = (id) => (categories.find((c) => c.id === id) || {}).label || id;
useEffect(() => {
const onKey = (e) => { if (e.key === "Escape") onClose(); };
document.addEventListener("keydown", onKey);
const prev = document.body.style.overflow;
document.body.style.overflow = "hidden";
return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = prev; };
}, []);
return (
{ if (e.target === e.currentTarget) onClose(); }}>
);
}
/* ╔═══════════════════════════════════════════════════════════════════════════╗
║ DYNAMIC · CMS — NEWS FEED (live since F1) ║
║ Endpoint : GET /noticies?lang={lang}&cat={categoryId}&year={year} ║
║ Item : { id, iso:'YYYY-MM-DD', cat, title, excerpt, img? } ║
║ Detail : each card opens the reader modal (GET /noticies/{id}) ║
╚═══════════════════════════════════════════════════════════════════════════╝ */
const PAGE_SIZE = 10; // lot de 10: la destacada + una graella de 3×3, mai un scroll infinit
function LatestSection({ t, lang, cat, setCat, year, setYear, categories, onOpen }) {
// cat/year travel in the path so the SERVER filters the whole hemeroteca
// (469+ items), not just the page we already have. Path = cache key (D3).
// The list grows in PAGE_SIZE batches («Carrega'n més»); meta carries the
// envelope total so every count on screen stays honest.
const path = `noticies?lang=${lang}&size=${PAGE_SIZE}`
+ (cat !== "all" ? `&cat=${encodeURIComponent(cat)}` : "")
+ (year ? `&year=${year}` : "");
const { items: news, live, meta } = window.EsbartData.useCollection(path, t.news, {
meta: (j) => ({ total: j.total, pages: j.pages }),
});
// Pages 2+ accumulate here; changing filters or language starts afresh.
const [extra, setExtra] = useState([]);
const [page, setPage] = useState(1);
const [loading, setLoading] = useState(false);
useEffect(() => { setExtra([]); setPage(1); setLoading(false); }, [path]);
// Dedup by id: if something is published mid-browse, page boundaries
// shift and an item could arrive twice (duplicate React keys = console
// noise the E2E gate treats as a failure).
const all = useMemo(() => {
if (!extra.length) return news;
const seen = new Set();
return [...news, ...extra].filter((n) => !seen.has(n.id) && seen.add(n.id));
}, [news, extra]);
// The client-side filter stays: a no-op on server-filtered live data, the
// real filter while the seeds are showing (API down or not yet arrived).
const filtered = useMemo(() => {
let list = all;
if (cat !== "all") list = list.filter((n) => n.cat === cat);
if (year) list = list.filter((n) => n.iso.slice(0, 4) === String(year));
// Ties return 0 so the API order (publication desc) is preserved.
return [...list].sort((a, b) => (a.iso < b.iso ? 1 : a.iso > b.iso ? -1 : 0));
}, [all, cat, year]);
const total = live && meta ? meta.total : filtered.length;
const hasMore = live && meta && page < meta.pages;
const loadMore = () => {
if (loading) return;
setLoading(true);
const next = page + 1;
window.EsbartData.loadEnvelope(`${path}&page=${next}`)
.then(({ items }) => { setExtra((xs) => [...xs, ...items]); setPage(next); })
.catch((err) => console.warn("[cms-data]", err)) // INT-2: cap error tècnic al visitant
.finally(() => setLoading(false));
};
const catLabel = (id) => (categories.find((c) => c.id === id) || {}).label || id;
const featured = filtered[0];
const rest = filtered.slice(1);
return (
{item.img && 
}
{catLabel(item.cat)}
{fmtDate(item.iso, lang)}
{item.title}
{item.excerpt}
{html ?{p}
)}{t.latestEyebrow}
{t.latestTitle[0]}{t.latestTitle[1]}
{total} {t.newsCount}
{categories.map((c) => (
))}
{(cat !== "all" || year) && (
{cat !== "all" && (
{catLabel(cat)}
)}
{year && (
{t.filterYear} {year}
)}
)}
{filtered.length === 0 ? (
{t.emptyMsg}
) : (
<>
{featured && (
{rest.map((n) => (
))}
)}
{hasMore && (
{catLabel(n.cat)}
{fmtDate(n.iso, lang)}
{n.title}
{n.excerpt}
{t.showingOf.replace("{shown}", filtered.length).replace("{total}", total)}
)}
)}
{t.archiveEyebrow}
{t.archiveTitle[0]}{t.archiveTitle[1]}
{t.archiveSub}
{t.archiveByYear}
{years.map((y, i) => (
))}
{t.archiveByCat}
{/* Same live category set as the feed, so every entry filters it. */}- {categories.map((c) => (
- ))}
{t.pressEyebrow}
{t.pressTitle[0]}{t.pressTitle[1]}
{t.pressSub}
-
{sorted.map((c) => (
- {fmtDate(c.iso, lang)} {c.title} ))}
{/* Shows the full press feed by filtering the news list above to «premsa». */}
{t.nlEyebrow}
{t.nlTitle[0]}{t.nlTitle[1]}
{t.nlBody}
{status === "success" ? ({t.nlSuccess}
) : status === "error" ? (
{t.nlError}
) : (
)}
{t.nlNote}