import { useEffect, useState } from "react"; export const FetchedImageDrower = () => { const [urlState, setUrlState] = useState(''); const [show, setShow] = useState(false); const styleSheet = ` @keyframes spin { 0% { transform: rotate(0deg); } 99% { transform: rotate(360deg); } } `; const getLayout = (count) => { if (count <= 1) { return { cardHeight: 320, imageHeight: 270, cardWidth: 420 }; } if (count === 2) { return { cardHeight: 265, imageHeight: 215, cardWidth: 360 }; } if (count === 3) { return { cardHeight: 235, imageHeight: 185, cardWidth: 320 }; } return { cardHeight: 210, imageHeight: 160, cardWidth: 280 }; }; // Create or get #Parent useEffect(() => { if (typeof document === "undefined") return; // SSR-safe let parent = document.getElementById("Parent"); if (!parent) { parent = document.createElement("div"); parent.id = "Parent"; document.body.appendChild(parent); } // Remove old #Parent-child if it exists // const oldChild = document.getElementById("Parent-child"); //if (oldChild) parent.removeChild(oldChild); // Create new #Parent-child container const child = document.createElement("div"); child.id = "Parent-child"; child.style.width = "99.9%"; // Insert content inside child if (show && Array.isArray(urlState) && urlState.length) { const count = urlState.length; const { cardHeight, imageHeight, cardWidth } = getLayout(count); const cards = urlState .map((url) => { const safeUrl = String(url || ""); return `

Copied

`; }) .join(""); child.innerHTML = `

${cards}

`; } // Append new child parent.appendChild(child); const onClick = (e) => { const el = e.target?.closest?.("[data-action]"); if (!el) return; const action = el.getAttribute("data-action"); const url = el.getAttribute("data-url"); if (!url) return; if (action === "fullscreen") { window.open(url, "_blank"); return; } if (action === "download") { e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation?.(); fetch(url) .then((r) => r.blob()) .then((blob) => { const blobUrl = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = blobUrl; a.download = "picsart-image.png"; a.rel = "noopener"; a.style.display = "none"; document.body.appendChild(a); a.click(); document.body.removeChild(a); window.setTimeout(() => URL.revokeObjectURL(blobUrl), 1000); }) .catch((err) => { console.error("Download failed:", err); }); return; } if (action === "copy") { navigator.clipboard.writeText(url); const toast = el.querySelector?.('[data-toast="copy"]'); if (toast) { toast.style.visibility = "visible"; toast.style.opacity = "1"; window.clearTimeout(window.__picsartCopyToastTimeout); window.__picsartCopyToastTimeout = window.setTimeout(() => { toast.style.opacity = "0"; toast.style.visibility = "hidden"; }, 1000); } } }; child.addEventListener("click", onClick); // Cleanup on unmount return () => { child.removeEventListener("click", onClick); parent.removeChild(child); }; }, [show, urlState]); // Override fetch useEffect(() => { const originalFetch = window.fetch; setShow(false); window.fetch = async (...args) => { const [url] = args; const response = await originalFetch(...args); if (typeof url === "string" && (url.includes("https://api.picsart.io/tools") || url.includes("https://genai-api.picsart.io"))) { try { const cloned = response.clone(); const data = await cloned.json(); console.log('data', data) if (url.includes("https://api.picsart.io/tools")) { const nextUrl = data?.data?.url; if (nextUrl) { setUrlState([nextUrl]); setShow(true); } else { setShow(false); } } else if (url.includes("https://genai-api.picsart.io")) { const items = Array.isArray(data) ? data : data?.data; const urls = (Array.isArray(items) ? items : []) .map((item) => item?.url) .filter(Boolean); if (urls.length) { setUrlState((prev) => { const list = Array.isArray(prev) ? prev : []; const merged = [...list]; urls.forEach((u) => { if (!merged.includes(u)) merged.push(u); }); return merged; }); setShow(true); } else { setShow(false); } } } catch { setShow(false); } } return response; }; return () => { window.fetch = originalFetch; }; }, []); return null; // nothing rendered directly };

200Success.

202Requested successfully accepted when doing asynchronous transformation.

400Bad Request

401Unauthorized

402Payment Required

403Forbidden

404Not Found

405Method Not Allowed

413Request Entity Too Large

415Unsupported Media Type

422Unprocessable Entity

429Too Many Requests

431Request Header Fields Too Large

500Internal Server Error

503Service Unavailable