fix: media update section
This commit is contained in:
parent
fa36954d32
commit
ff2bdebb03
|
|
@ -37,9 +37,9 @@ function formatTanggal(dateString: string) {
|
|||
|
||||
export default function MediaUpdate() {
|
||||
const [tab, setTab] = useState<"latest" | "popular">("latest");
|
||||
const [contentType, setContentType] = useState<
|
||||
"audiovisual" | "audio" | "foto" | "text" | "all"
|
||||
>("foto");
|
||||
const [contentType, setContentType] = useState<
|
||||
"audiovisual" | "audio" | "foto" | "text" | "all"
|
||||
>("foto");
|
||||
const [dataToRender, setDataToRender] = useState<any[]>([]);
|
||||
const [filteredData, setFilteredData] = useState<any[]>([]);
|
||||
const [bookmarkedIds, setBookmarkedIds] = useState<Set<number>>(new Set());
|
||||
|
|
@ -128,7 +128,8 @@ const [contentType, setContentType] = useState<
|
|||
// Determine content type based on item properties
|
||||
const hasVideo = item.videoUrl || item.videoPath;
|
||||
const hasAudio = item.audioUrl || item.audioPath;
|
||||
const hasImage = item.smallThumbnailLink || item.thumbnailUrl || item.imageUrl;
|
||||
const hasImage =
|
||||
item.smallThumbnailLink || item.thumbnailUrl || item.imageUrl;
|
||||
const hasText = item.content || item.description;
|
||||
|
||||
switch (contentType) {
|
||||
|
|
@ -152,15 +153,15 @@ const [contentType, setContentType] = useState<
|
|||
try {
|
||||
setLoading(true);
|
||||
|
||||
// Determine typeId based on contentType
|
||||
// Tentukan typeId dari contentType
|
||||
const typeId = parseInt(getTypeIdByContentType(contentType));
|
||||
setCurrentTypeId(typeId.toString());
|
||||
|
||||
// 🔹 Ambil data artikel
|
||||
// 🔹 Ambil data artikel dari API
|
||||
const response = await listArticles(
|
||||
1,
|
||||
10,
|
||||
typeId, // Dynamic typeId based on content type
|
||||
typeId,
|
||||
undefined,
|
||||
undefined,
|
||||
section === "latest" ? "createdAt" : "viewCount",
|
||||
|
|
@ -177,18 +178,18 @@ const [contentType, setContentType] = useState<
|
|||
"",
|
||||
20,
|
||||
0,
|
||||
// urutan === "latest" ? "createdAt" : "clickCount",
|
||||
"",
|
||||
"",
|
||||
""
|
||||
);
|
||||
// hasil = fallback?.data?.data?.content || [];
|
||||
hasil = fallbackRes?.data?.data?.content || [];
|
||||
} else {
|
||||
// ✅ Perhatikan: API kamu mengembalikan `data.data` sebagai array
|
||||
hasil = response?.data?.data || [];
|
||||
}
|
||||
|
||||
// 🔹 Normalisasi struktur data
|
||||
let transformedData = hasil.map((article: any) => ({
|
||||
const transformedData = hasil.map((article: any) => ({
|
||||
id: article.id,
|
||||
title: article.title,
|
||||
category:
|
||||
|
|
@ -198,10 +199,13 @@ const [contentType, setContentType] = useState<
|
|||
createdAt: article.createdAt,
|
||||
smallThumbnailLink: article.thumbnailUrl,
|
||||
label: article.categoryName,
|
||||
clientName: article.clientName,
|
||||
typeId: article.typeId,
|
||||
...article,
|
||||
}));
|
||||
|
||||
// setDataKonten(dataBaru);
|
||||
// ✅ INI WAJIB: simpan hasil mapping ke state
|
||||
setDataToRender(transformedData);
|
||||
|
||||
// 🔹 Sinkronisasi data bookmark
|
||||
const roleId = Number(getCookiesDecrypt("urie"));
|
||||
|
|
@ -302,8 +306,8 @@ const [contentType, setContentType] = useState<
|
|||
<button
|
||||
onClick={() => setTab("latest")}
|
||||
className={`px-6 py-3 rounded-lg text-sm font-semibold transition-all duration-200 ${
|
||||
tab === "latest"
|
||||
? "bg-[#C6A455] text-white shadow-sm"
|
||||
tab === "latest"
|
||||
? "bg-[#C6A455] text-white shadow-sm"
|
||||
: "text-[#C6A455] hover:bg-[#C6A455]/10"
|
||||
}`}
|
||||
>
|
||||
|
|
@ -312,8 +316,8 @@ const [contentType, setContentType] = useState<
|
|||
<button
|
||||
onClick={() => setTab("popular")}
|
||||
className={`px-6 py-3 rounded-lg text-sm font-semibold transition-all duration-200 ${
|
||||
tab === "popular"
|
||||
? "bg-[#C6A455] text-white shadow-sm"
|
||||
tab === "popular"
|
||||
? "bg-[#C6A455] text-white shadow-sm"
|
||||
: "text-[#C6A455] hover:bg-[#C6A455]/10"
|
||||
}`}
|
||||
>
|
||||
|
|
@ -336,12 +340,12 @@ const [contentType, setContentType] = useState<
|
|||
>
|
||||
📋 Semua
|
||||
</button> */}
|
||||
|
||||
|
||||
<button
|
||||
onClick={() => setContentType("foto")}
|
||||
className={`px-4 py-2 rounded-full text-xs font-semibold transition-all duration-300 transform hover:scale-105 ${
|
||||
contentType === "foto"
|
||||
? "bg-gradient-to-r from-orange-500 to-red-600 text-white shadow-lg ring-2 ring-orange-300"
|
||||
contentType === "foto"
|
||||
? "bg-gradient-to-r from-orange-500 to-red-600 text-white shadow-lg ring-2 ring-orange-300"
|
||||
: "bg-white text-orange-600 border-2 border-orange-200 hover:border-orange-400 hover:shadow-md"
|
||||
}`}
|
||||
>
|
||||
|
|
@ -350,8 +354,8 @@ const [contentType, setContentType] = useState<
|
|||
<button
|
||||
onClick={() => setContentType("audiovisual")}
|
||||
className={`px-4 py-2 rounded-full text-xs font-semibold transition-all duration-300 transform hover:scale-105 ${
|
||||
contentType === "audiovisual"
|
||||
? "bg-gradient-to-r from-purple-500 to-pink-600 text-white shadow-lg ring-2 ring-purple-300"
|
||||
contentType === "audiovisual"
|
||||
? "bg-gradient-to-r from-purple-500 to-pink-600 text-white shadow-lg ring-2 ring-purple-300"
|
||||
: "bg-white text-purple-600 border-2 border-purple-200 hover:border-purple-400 hover:shadow-md"
|
||||
}`}
|
||||
>
|
||||
|
|
@ -360,8 +364,8 @@ const [contentType, setContentType] = useState<
|
|||
<button
|
||||
onClick={() => setContentType("audio")}
|
||||
className={`px-4 py-2 rounded-full text-xs font-semibold transition-all duration-300 transform hover:scale-105 ${
|
||||
contentType === "audio"
|
||||
? "bg-gradient-to-r from-green-500 to-emerald-600 text-white shadow-lg ring-2 ring-green-300"
|
||||
contentType === "audio"
|
||||
? "bg-gradient-to-r from-green-500 to-emerald-600 text-white shadow-lg ring-2 ring-green-300"
|
||||
: "bg-white text-green-600 border-2 border-green-200 hover:border-green-400 hover:shadow-md"
|
||||
}`}
|
||||
>
|
||||
|
|
@ -370,8 +374,8 @@ const [contentType, setContentType] = useState<
|
|||
<button
|
||||
onClick={() => setContentType("text")}
|
||||
className={`px-4 py-2 rounded-full text-xs font-semibold transition-all duration-300 transform hover:scale-105 ${
|
||||
contentType === "text"
|
||||
? "bg-gradient-to-r from-gray-500 to-slate-600 text-white shadow-lg ring-2 ring-gray-300"
|
||||
contentType === "text"
|
||||
? "bg-gradient-to-r from-gray-500 to-slate-600 text-white shadow-lg ring-2 ring-gray-300"
|
||||
: "bg-white text-gray-600 border-2 border-gray-200 hover:border-gray-400 hover:shadow-md"
|
||||
}`}
|
||||
>
|
||||
|
|
@ -457,9 +461,7 @@ const [contentType, setContentType] = useState<
|
|||
{/* Lihat lebih banyak - hanya muncul jika ada data */}
|
||||
{filteredData.length > 0 && (
|
||||
<div className="text-center mt-10">
|
||||
<Link
|
||||
href={getContentTypeLink()}
|
||||
>
|
||||
<Link href={getContentTypeLink()}>
|
||||
<Button
|
||||
size={"lg"}
|
||||
className="text-[#b3882e] bg-transparent border border-[#b3882e] px-6 py-2 rounded-s-sm text-sm font-medium hover:bg-[#b3882e]/10 transition"
|
||||
|
|
@ -469,7 +471,7 @@ const [contentType, setContentType] = useState<
|
|||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue