handling brochure rehydratation

src/format-types/brochure/brochure-front.js

@@ -1,6 +1,4 @@
-// import downloadBrochureIcon from "../img/icon_brochure_download.svg";
+function buildDownloadIcons() {
-
-window.addEventListener("DOMContentLoaded", (event) => {
 	let brochureLinks = document.querySelectorAll(".brochure-link-format");
 
 	const iconSrc = img_path_datas.downloadIconPath;
@@ -12,4 +10,38 @@ window.addEventListener("DOMContentLoaded", (event) => {
 
 		brochureLink.appendChild(brochureLinkIcon);
 	});
+}
+
+async function fetchBrochureSourcePost(brochurePostId) {
+	const response = await fetch(`/wp-json/wp/v2/brochures/${brochurePostId.toString()}`);
+	return await response.json();
+}
+
+async function fetchRelatedPdfUrl(brochureId) {
+	const response = await fetch(`/wp-json/wp/v2/media/${brochureId.toString()}`);
+	return await response.json();
+}
+
+async function hydrateBrochuresLinks() {
+	const brochureLinks = Array.from(document.querySelectorAll(".brochure-link-format"));
+	if (!brochureLinks.length) return;
+
+	for (const brochureLink of brochureLinks) {
+		const brochurePostId = brochureLink.getAttribute("brochure-post-id");
+		const brochureOrigHref = brochureLink.getAttribute("href");
+		console.log(brochureOrigHref);
+
+		brochurePostSource = await fetchBrochureSourcePost(brochurePostId);
+		if (!brochurePostSource.acf || !brochurePostSource.acf.brochure_pdf) continue;
+
+		brochureAttachedMedia = await fetchRelatedPdfUrl(brochurePostSource.acf.brochure_pdf);
+		if (brochureAttachedMedia.source_url) {
+			brochureLink.setAttribute("href", brochureAttachedMedia.source_url);
+		}
+	}
+}
+
+window.addEventListener("DOMContentLoaded", (event) => {
+	buildDownloadIcons();
+	hydrateBrochuresLinks();
 });

src/format-types/brochure/brochure.js

@@ -7,39 +7,75 @@ import { ToolbarGroup, ToolbarButton, TextareaControl } from "@wordpress/compone
 import { check, trash } from "@wordpress/icons";
 
 import { useState } from "@wordpress/element";
+import { useSelect } from "@wordpress/data"; // pour les querry
 
 const formatName = "homegrade-format/brochure-format";
 
 const BrochureLinkFormatButton = (props) => {
 	const { isActive, value, onChange } = props;
 	const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-	const [linkValue, setLinkValue] = useState("");
+	const [relatedPost, setRelatedPost] = useState("");
+	const [pendingBrochure, setPendingBrochure] = useState(false);
 
 	const activeFormat = getActiveFormats(value).filter((format) => format.type === formatName)[0];
 
-	function setFormat() {
+	const brochurePost = useSelect((select) => {
+		if (activeFormat && activeFormat.attributes.brochurePostID) {
+			return select("core").getEntityRecord(
+				"postType",
+				"brochures",
+				activeFormat.attributes.brochurePostID
+			);
+		}
+	});
+
+	const brochureAttachedMedia = useSelect((select) => {
+		if (brochurePost && brochurePost.acf && brochurePost.acf.brochure_pdf) {
+			return select("core").getEntityRecord("postType", "attachment", brochurePost.acf.brochure_pdf);
+		}
+	});
+
+	function setFormat(postDatas) {
 		setIsPopoverOpen(!isPopoverOpen);
+		setPendingBrochure(true);
 		onChange(
 			applyFormat(value, {
 				type: formatName,
 				attributes: {
-					href: linkValue.url,
+					href: "",
+					brochurePostID: postDatas.id.toString(),
 					target: "_blank",
-					dataId: linkValue.id.toString(),
 					style: "text-decoration: underline;",
 				},
 			})
 		);
 	}
+
 	function removeFormat() {
 		setIsPopoverOpen(false);
-		setLinkValue("");
 		onChange(
 			toggleFormat(value, {
 				type: formatName,
 			})
 		);
 	}
+	console.log(brochurePost);
+	console.log(brochureAttachedMedia);
+	if (brochurePost && brochureAttachedMedia && pendingBrochure) {
+		onChange(
+			applyFormat(value, {
+				type: formatName,
+				attributes: {
+					target: "_blank",
+					brochurePostID: brochurePost.id.toString(),
+					brochureID: brochureAttachedMedia.id.toString(),
+					href: brochureAttachedMedia.source_url,
+					style: "text-decoration: underline;",
+				},
+			})
+		);
+		setPendingBrochure(false);
+	}
 
 	return (
 		<>
@@ -50,24 +86,14 @@ const BrochureLinkFormatButton = (props) => {
 						className='popover_tooltip_field'>
 						<LinkControl
 							suggestionsQuery={{
-								type: "attachment",
+								type: "post",
+								subtype: "brochures",
 								// subtype: "application/pdf", // Not working
 								// mime_type: "application/pdf", // Not working
 							}}
-							value={linkValue}
+							value={relatedPost}
-							onChange={(value) => {
+							onChange={setFormat}
-								setLinkValue(value);
-							}}
 						/>
-						<Button
-							icon={check}
-							variant='primary'
-							onClick={() => {
-								setIsPopoverOpen(!isPopoverOpen);
-								setFormat();
-							}}>
-							Valider
-						</Button>
 					</Popover>
 				)}
 
@@ -93,6 +119,10 @@ const BrochureLinkFormatButton = (props) => {
 registerFormatType("homegrade-format/brochure-format", {
 	title: "Lien Brochure",
 	tagName: "a",
+	attributes: {
+		brochureID: "brochure-id",
+		brochurePostID: "brochure-post-id",
+	},
 	className: "brochure-link-format",
 	edit: BrochureLinkFormatButton,
 });