From ff2bdebb03eca69f5b17aa6d49fcf52663e090d1 Mon Sep 17 00:00:00 2001
From: Sabda Yagra <msabdayagra@gmail.com>
Date: Sun, 12 Oct 2025 23:46:38 +0700
Subject: [PATCH] fix: media update section

---
 components/landing-page/media-update.tsx | 58 ++++++++++++------------
 1 file changed, 30 insertions(+), 28 deletions(-)

diff --git a/components/landing-page/media-update.tsx b/components/landing-page/media-update.tsx
index f7ebaca..6a8e481 100644
--- a/components/landing-page/media-update.tsx
+++ b/components/landing-page/media-update.tsx
@@ -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>
   );
 }