"use client";
import { useEffect, useState } from "react";
type ContentPixelProps = {
type: "page" | "blog" | "event";
id: number;
};
export default function ContentPixel({
type,
id,
}: ContentPixelProps) {
const [enabled, setEnabled] = useState(false);
const [pixelId, setPixelId] = useState("");
const [loading, setLoading] = useState(true);
const [saving, setSaving] = useState(false);
const [message, setMessage] = useState("");
useEffect(() => {
fetch(`/api/cms/content-pixel?type=${type}&id=${id}`)
.then((res) => res.json())
.then((data) => {
if (data.success) {
setEnabled(Boolean(data.data.enabled));
setPixelId(data.data.pixelId || "");
}
})
.catch(() => {
setMessage("Gagal mengambil pengaturan Pixel.");
})
.finally(() => setLoading(false));
}, [type, id]);
async function save() {
setSaving(true);
setMessage("");
try {
const res = await fetch("/api/cms/content-pixel", {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
type,
id,
enabled,
pixelId: pixelId.trim(),
}),
});
const data = await res.json();
if (!res.ok || !data.success) {
throw new Error(data.error || "Gagal menyimpan Pixel.");
}
setMessage("Pixel berhasil disimpan.");
} catch (error) {
setMessage(
error instanceof Error
? error.message
: "Gagal menyimpan Pixel."
);
} finally {
setSaving(false);
}
}
if (loading) {
return (
Memuat pengaturan Pixel...
);
}
return (
);
}