From b287069d302a5af6c16cc65566ee5cf11d81b0eb Mon Sep 17 00:00:00 2001
From: Anang Yusman <anangyusman23@gmail.com>
Date: Tue, 13 Jan 2026 17:52:13 +0800
Subject: [PATCH] update

---
 components/details/details-content.tsx        | 85 +++++++++++--------
 components/form/article/edit-article-form.tsx | 68 ++++++++++-----
 components/ui/input.tsx                       |  8 +-
 service/article.ts                            |  7 ++
 4 files changed, 105 insertions(+), 63 deletions(-)

diff --git a/components/details/details-content.tsx b/components/details/details-content.tsx
index 0bac399..38f1737 100644
--- a/components/details/details-content.tsx
+++ b/components/details/details-content.tsx
@@ -6,6 +6,7 @@ import Link from "next/link";
 import {
   getArticleById,
   getArticleBySlug,
+  getArticleFiles,
   getListArticle,
 } from "@/service/article";
 import { close, error, loading } from "@/config/swal";
@@ -77,7 +78,9 @@ export default function DetailContent() {
     startDate: null,
     endDate: null,
   });
-  const [detailfiles, setDetailFiles] = useState<any>([]);
+  // const [detailfiles, setDetailFiles] = useState<any>([]);
+  const [detailFiles, setDetailFiles] = useState<any[]>([]);
+
   const [mainImage, setMainImage] = useState(0);
   const [thumbnail, setThumbnail] = useState("-");
   const [diseId, setDiseId] = useState(0);
@@ -299,25 +302,40 @@ export default function DetailContent() {
     initStateData();
   }, [listCategory]);
 
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [detailFiles]);
+
   async function initStateData() {
     loading();
-    const res = await getArticleBySlug(slug);
-    const data = res?.data?.data;
+    try {
+      // 1️⃣ Ambil artikel by slug
+      const res = await getArticleBySlug(slug);
+      const data = res?.data?.data;
 
-    setThumbnail(data?.thumbnailUrl);
-    setDiseId(data?.aiArticleId);
-    setDetailFiles(data?.files);
-    setArticleDetail(data); // <-- Add this
-    close();
+      if (!data?.id) return;
+
+      setArticleDetail(data);
+      setThumbnail(data.thumbnailUrl);
+      setDiseId(data.aiArticleId);
+
+      // 2️⃣ Ambil SEMUA article files
+      const filesRes = await getArticleFiles();
+      const allFiles = filesRes?.data?.data ?? [];
+
+      // 3️⃣ FILTER sesuai articleId
+      const filteredFiles = allFiles.filter(
+        (file: any) => file.articleId === data.id
+      );
+
+      setDetailFiles(filteredFiles);
+    } catch (error) {
+      console.error("Init state detail error:", error);
+    } finally {
+      close();
+    }
   }
 
-  // if (!articleDetail?.files || articleDetail?.files?.length === 0) {
-  //   return (
-  //     <div className="w-full h-[400px] bg-gray-100 flex items-center justify-center rounded-lg">
-  //       <p className="text-gray-400 text-sm">Gambar tidak tersedia</p>
-  //     </div>
-  //   );
-  // }
   function decodeHtmlString(raw: string = "") {
     if (!raw) return "";
 
@@ -395,36 +413,30 @@ export default function DetailContent() {
 
           <div className="w-full h-auto mb-6">
             {/* Gambar utama */}
-            {articleDetail?.files && articleDetail.files.length > 0 ? (
+            {detailFiles.length > 0 ? (
               <>
-                {/* Gambar utama */}
-                <div className="w-full">
-                  <Image
-                    src={articleDetail.files[selectedIndex]?.fileUrl}
-                    alt={
-                      articleDetail.files[selectedIndex]?.fileAlt || "Berita"
-                    }
-                    width={800}
-                    height={400}
-                    className="rounded-lg w-full object-cover"
-                  />
-                </div>
+                <Image
+                  src={detailFiles[selectedIndex]?.fileUrl}
+                  alt={detailFiles[selectedIndex]?.fileAlt || "Berita"}
+                  width={800}
+                  height={400}
+                  className="rounded-lg w-full object-cover"
+                />
 
-                {/* Thumbnail */}
                 <div className="flex gap-2 mt-3 overflow-x-auto">
-                  {articleDetail.files.map((file: any, index: number) => (
+                  {detailFiles.map((file, index) => (
                     <button
-                      key={file?.id || index}
+                      key={file.id}
                       onClick={() => setSelectedIndex(index)}
-                      className={`border-2 rounded-lg overflow-hidden ${
+                      className={`border-2 rounded-lg ${
                         selectedIndex === index
                           ? "border-red-500"
                           : "border-transparent"
                       }`}
                     >
                       <Image
-                        src={file?.fileUrl}
-                        alt={file?.fileAlt || "Thumbnail"}
+                        src={file.fileUrl}
+                        alt={file.fileAlt || "Thumbnail"}
                         width={100}
                         height={80}
                         className="object-cover"
@@ -434,9 +446,8 @@ export default function DetailContent() {
                 </div>
               </>
             ) : (
-              // Jika file kosong/null tapi tetap render data lainnya
-              <div className="w-full h-[400px] bg-gray-100 flex items-center justify-center rounded-lg">
-                <p className="text-gray-400 text-sm">Gambar tidak tersedia</p>
+              <div className="h-[400px] flex items-center justify-center bg-gray-100 rounded-lg">
+                <p className="text-gray-400">Gambar tidak tersedia</p>
               </div>
             )}
 
diff --git a/components/form/article/edit-article-form.tsx b/components/form/article/edit-article-form.tsx
index b28e391..7e1c271 100644
--- a/components/form/article/edit-article-form.tsx
+++ b/components/form/article/edit-article-form.tsx
@@ -23,6 +23,7 @@ import {
   deleteArticleFiles,
   getArticleByCategory,
   getArticleById,
+  getArticleFiles,
   submitApproval,
   unPublishArticle,
   updateArticle,
@@ -196,27 +197,49 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
 
   async function initState() {
     loading();
-    const res = await getArticleById(id);
-    const data = res.data?.data;
-    setDetailData(data);
-    setValue("title", data?.title);
-    setValue("customCreatorName", data?.customCreatorName);
-    setValue("slug", data?.slug);
-    setValue("source", data?.source);
-    const cleanDescription = data?.htmlDescription
-      ? data.htmlDescription
-          .replace(/\\"/g, '"')
-          .replace(/\\n/g, "\n", "\\")
-          .trim()
-      : "";
-    setValue("description", cleanDescription);
-    setValue("tags", data?.tags ? data.tags.split(",") : []);
-    setThumbnail(data?.thumbnailUrl);
-    setDiseId(data?.aiArticleId);
-    setDetailFiles(data?.files);
+    try {
+      // 1️⃣ Ambil ARTICLE
+      const articleRes = await getArticleById(id);
+      const articleData = articleRes.data?.data;
 
-    setupInitCategory(data?.categories);
-    close();
+      if (!articleData) return;
+
+      // ===== ARTICLE DATA =====
+      setDetailData(articleData);
+      setValue("title", articleData.title);
+      setValue("customCreatorName", articleData.customCreatorName);
+      setValue("slug", articleData.slug);
+      setValue("source", articleData.source);
+
+      const cleanDescription = articleData.htmlDescription
+        ? articleData.htmlDescription
+            .replace(/\\"/g, '"')
+            .replace(/\\n/g, "\n")
+            .trim()
+        : "";
+
+      setValue("description", cleanDescription);
+      setValue("tags", articleData.tags ? articleData.tags.split(",") : []);
+
+      setThumbnail(articleData.thumbnailUrl);
+      setDiseId(articleData.aiArticleId);
+      setupInitCategory(articleData.categories);
+
+      // 2️⃣ Ambil SEMUA article files
+      const filesRes = await getArticleFiles();
+      const allFiles = filesRes.data?.data ?? [];
+
+      // 3️⃣ FILTER berdasarkan ARTICLE ID yang sedang dibuka
+      const filteredFiles = allFiles.filter(
+        (file: any) => file.articleId === articleData.id
+      );
+
+      setDetailFiles(filteredFiles);
+    } catch (error) {
+      console.error("Init state error:", error);
+    } finally {
+      close();
+    }
   }
 
   const setupInitCategory = (data: any) => {
@@ -667,9 +690,10 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
           name="title"
           render={({ field: { onChange, value } }) => (
             <div className="w-full">
-              <label htmlFor="title" className="block text-sm font-medium mb-1">
+              <label htmlFor="title" className="block text-xl font-medium mb-2">
                 Judul
               </label>
+
               <Input
                 type="text"
                 id="title"
@@ -677,7 +701,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
                 value={value ?? ""}
                 readOnly={isDetail}
                 onChange={onChange}
-                className="w-full border rounded-lg"
+                className="h-16 px-4  text-2xl leading-tight"
               />
             </div>
           )}
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
index 03295ca..0316cc4 100644
--- a/components/ui/input.tsx
+++ b/components/ui/input.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (
@@ -15,7 +15,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Input }
+export { Input };
diff --git a/service/article.ts b/service/article.ts
index 4f338cd..9184c6c 100644
--- a/service/article.ts
+++ b/service/article.ts
@@ -136,6 +136,13 @@ export async function uploadArticleFile(id: string, data: any) {
   return await httpPostInterceptor(`/article-files/${id}`, data, headers);
 }
 
+export async function getArticleFiles() {
+  const headers = {
+    "content-type": "application/json",
+  };
+  return await httpGet(`/article-files`, headers);
+}
+
 export async function uploadArticleThumbnail(id: string, data: any) {
   const headers = {
     "content-type": "multipart/form-data",