kontenhumas
/
kontenhumas-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: media update section

This commit is contained in:
Sabda Yagra 2025-10-12 23:46:38 +07:00
parent fa36954d32
commit ff2bdebb03
1 changed files with 30 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
components/landing-page/media-update.tsx
View File

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