update

components/details/details-content.tsx

@@ -294,7 +294,7 @@ export default function DetailContent() {
   async function initStateData() {
     loading();
     const res = await getArticleById(id);
-    const data = res.data?.data;
+    const data = res?.data?.data;
 
     setThumbnail(data?.thumbnailUrl);
     setDiseId(data?.aiArticleId);
@@ -303,13 +303,13 @@ export default function DetailContent() {
     close();
   }
 
-  if (!articleDetail?.files || articleDetail.files.length === 0) {
+  // if (!articleDetail?.files || articleDetail?.files?.length === 0) {
-    return (
+  //   return (
-      <div className="w-full h-[400px] bg-gray-100 flex items-center justify-center rounded-lg">
+  //     <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>
+  //       <p className="text-gray-400 text-sm">Gambar tidak tersedia</p>
-      </div>
+  //     </div>
-    );
+  //   );
-  }
+  // }
 
   return (
     <>
@@ -372,38 +372,50 @@ export default function DetailContent() {
 
           <div className="w-full h-auto mb-6">
             {/* Gambar utama */}
-            <div className="w-full">
+            {articleDetail?.files && articleDetail.files.length > 0 ? (
-              <Image
+              <>
-                src={articleDetail.files[selectedIndex].fileUrl}
+                {/* Gambar utama */}
-                alt={articleDetail.files[selectedIndex].fileAlt || "Berita"}
+                <div className="w-full">
-                width={800}
-                height={400}
-                className="rounded-lg w-full object-cover"
-              />
-            </div>
-
-            {/* Thumbnail */}
-            <div className="flex gap-2 mt-3 overflow-x-auto">
-              {articleDetail.files.map((file: any, index: number) => (
-                <button
-                  key={file.id || index}
-                  onClick={() => setSelectedIndex(index)}
-                  className={`border-2 rounded-lg overflow-hidden ${
-                    selectedIndex === index
-                      ? "border-red-500"
-                      : "border-transparent"
-                  }`}
-                >
                   <Image
-                    src={file.fileUrl}
+                    src={articleDetail.files[selectedIndex]?.fileUrl}
-                    alt={file.fileAlt || "Thumbnail"}
+                    alt={
-                    width={100}
+                      articleDetail.files[selectedIndex]?.fileAlt || "Berita"
-                    height={80}
+                    }
-                    className="object-cover"
+                    width={800}
+                    height={400}
+                    className="rounded-lg w-full object-cover"
                   />
-                </button>
+                </div>
-              ))}
+
-            </div>
+                {/* Thumbnail */}
+                <div className="flex gap-2 mt-3 overflow-x-auto">
+                  {articleDetail.files.map((file: any, index: number) => (
+                    <button
+                      key={file?.id || index}
+                      onClick={() => setSelectedIndex(index)}
+                      className={`border-2 rounded-lg overflow-hidden ${
+                        selectedIndex === index
+                          ? "border-red-500"
+                          : "border-transparent"
+                      }`}
+                    >
+                      <Image
+                        src={file?.fileUrl}
+                        alt={file?.fileAlt || "Thumbnail"}
+                        width={100}
+                        height={80}
+                        className="object-cover"
+                      />
+                    </button>
+                  ))}
+                </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>
+            )}
 
             {/* Slug */}
             <p className="text-sm text-gray-500 mt-2 text-end">
@@ -575,20 +587,20 @@ export default function DetailContent() {
             </p>
             <div>
               <h3 className="text-lg font-semibold border-b pb-2">Komentar</h3>
-              {commentList.length === 0 ? (
+              {commentList?.length === 0 ? (
                 <p className="text-sm text-gray-500">Belum ada komentar.</p>
               ) : (
-                commentList.map((comment: any) => (
+                commentList?.map((comment: any) => (
                   <div
-                    key={comment.id}
+                    key={comment?.id}
                     className="border rounded-lg p-3 bg-gray-50 shadow-sm"
                   >
                     <p className="text-sm text-gray-800 whitespace-pre-line">
-                      {comment.message}
+                      {comment?.message}
                     </p>
                     <p className="text-xs text-gray-500 mt-1">
-                      {comment.commentFromName || "Anonim"} •{" "}
+                      {comment?.commentFromName || "Anonim"} •{" "}
-                      {new Date(comment.createdAt).toLocaleString("id-ID", {
+                      {new Date(comment?.createdAt).toLocaleString("id-ID", {
                         dateStyle: "short",
                         timeStyle: "short",
                       })}