"use client"; import React, { useState, useEffect, useRef } from "react"; import { Swiper } from "swiper@6.8.4/bundle"; import { xprApi } from "@/lib/xpr-api"; // Each faculty card is Deree - Section Specific Modules/Faculty Each, which the legacy element included once per // related article of each playlist article (XprElement with context.AID = the related article's Id; its datasource // read /articles/). Composed here from m-specific-1's component. // @compose SpecificFacultyEach // Deree - Section Specific Modules/Faculty Each — one faculty card (a swiper slide). Legacy includers // (Deree - Skins/Faculty, once per related article) passed context.AID = that article's Id and the // datasource read /articles/. `...rest` goes on the slide so a composing .map() keeps its // data-xpr-iter marker. function SpecificFacultyEach({ AID, ...rest }) { const [FacultyEach, setFacultyEach] = useState(null); // harness-datasource: FacultyEach = /api/articles/ useEffect(() => { let alive = true; const q = new URLSearchParams({ with: "Picture,CustomFields" }); // uri "/articles/": one article for an AID; with no AID the adapter queried the collection. xprApi(`/api/articles/${AID ?? ""}?${q}`).then((res) => { if (alive) setFacultyEach(AID ? res ?? null : res?._embedded?.Article ?? []); }); return () => { alive = false; }; }, [AID]); // The Handlebars FacultyEach block: an array repeats it, an object renders it once. const list = Array.isArray(FacultyEach) ? FacultyEach : FacultyEach ? [FacultyEach] : []; return list.map((article, i) => { const picture = article?._embedded?.Picture; const cf = article?._embedded?.CustomFields; return (

{/* Legacy placeholder portrait (literal path), shown when the faculty member has no picture. */}

)}

{article?.Title}

${article?.Description ?? ""}

` } } />

{cf?.ExtraTitle1}

{cf?.ExtraTitle2}

); }); } // @end-compose SpecificFacultyEach export default function Faculty({ playlist, section }) { const rootRef = useRef(null); const pl = playlist; const items = pl?._embedded?.PlaylistItems ?? []; const pcf = pl?._embedded?.CustomFields; const cardCount = items.reduce((n, item) => n + (item?._embedded?.Article?._embedded?.CustomFields?._embedded?.RelatedArticles?.length ?? 0), 0); useEffect(() => { const root = rootRef.current; const el = root?.querySelector(".facultySlider"); if (!el) return undefined; // Legacy settings (app-min.js: facultySlider), with the controls scoped to this skin (it has none, so they // resolve to null). observer: the cards fetch their own article and arrive after Swiper starts, where the // legacy page had them in the HTML already, so Swiper has to pick up slides added later. const swiper = new Swiper(el, { enabled: true, slidesPerView: "auto", spaceBetween: 14, centeredSlides: false, observer: true, pagination: { el: root.querySelector(".swiper-pagination-faculty"), type: "progressbar" }, navigation: { nextEl: root.querySelector(".ps-next-faculty"), prevEl: root.querySelector(".ps-prev-faculty"), }, breakpoints: { 768: { spaceBetween: 30 } }, }); return () => swiper?.destroy?.(true, true); }, [cardCount]); return (

{pcf?.Title}

{pcf?.Subtitle}

{items.map((item, i) => { const article = item?._embedded?.Article; if (!article) return null; return (article._embedded?.CustomFields?._embedded?.RelatedArticles ?? []).map((related, j) => ( )); })}

{pcf?.ButtonTitle ? {pcf.ButtonTitle} : View All}

); }

Deree - Official website

Graduate School of Professional Education