fix:deleted article detail

app/news/detail/[id]/page.tsx

@@ -13,15 +13,27 @@ export async function generateMetadata({ params }: any): Promise<Metadata> {
 
   const res = await getArticleById(id?.split("-")[0]);
   const article = res?.data?.data;
-  return {
-    title: article.title,
-    description: article.description,
-    openGraph: {
+  if (article) {
+    return {
       title: article.title,
       description: article.description,
-      images: [`${article.thumbnailUrl}`],
-    },
-  };
+      openGraph: {
+        title: article.title,
+        description: article.description,
+        images: [`${article.thumbnailUrl}`],
+      },
+    };
+  } else {
+    return {
+      title: "",
+      description: "",
+      openGraph: {
+        title: "",
+        description: "",
+        images: [``],
+      },
+    };
+  }
 }
 
 export default async function NewsPage({ params }: any) {

components/editor/custom-editor.js

@@ -1,6 +1,6 @@
 // components/custom-editor.js
 
-import React from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { CKEditor } from "@ckeditor/ckeditor5-react";
 import Editor from "ckeditor5-custom-build";
 

components/main/detail/new-detail.tsx

@@ -62,7 +62,13 @@ export default function NewsDetailPage(props: { datas: any }) {
             <p className=" text-lg">Berita</p>
           </div>
           <div className=" lg:flex lg:justify-around  gap-4 lg:gap-16 w-full">
-            <DetailNews data={props.datas} listArticle={articles} />
+            {!props.datas || props.datas.isActive == false ? (
+              <div className="flex justify-center items-center">
+                <p className="text-3xl text-center">Article Tidak Ditemukan</p>
+              </div>
+            ) : (
+              <DetailNews data={props.datas} listArticle={articles} />
+            )}
             <div className="w-auto lg:w-[25%] hidden lg:block">
               <SidebarDetail />
             </div>

components/page/detail-news.tsx

@@ -166,7 +166,7 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
         </p>
       </div>
       <div className="flex justify-center my-2 lg:my-5">
-        {data.files.length > 0 ? (
+        {data?.files?.length > 0 ? (
           data.files[0]?.file_name.split(".")[1].includes("doc") ||
           data.files[0]?.file_name.split(".")[1].includes("pdf") ? (
             <Image
@@ -195,7 +195,7 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
           ""
         )}
       </div>
-      {data.files?.length > 0 &&
+      {data?.files?.length > 0 &&
         (data.files[0].file_name.split(".")[1].includes("doc") ||
         data.files[0].file_name.split(".")[1].includes("pdf") ? (
           data.files?.map((file: any, index: number) => (

package.json

@@ -10,7 +10,6 @@
   },
   "dependencies": {
     "@ckeditor/ckeditor5-react": "^6.2.0",
-    "@ckeditor/ckeditor5-watchdog": "^45.0.0",
     "@heroui/breadcrumbs": "^2.2.6",
     "@heroui/button": "^2.2.10",
     "@heroui/code": "2.2.7",

styles/ckeditor.css

@@ -29,7 +29,7 @@
   padding: 1.5em 2em !important;
   min-height: 400px;
   line-height: 1.6;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   font-size: 14px;
   color: #333;
 }
@@ -63,12 +63,24 @@
   line-height: 1.4;
 }
 
-.ck.ck-editor__editable h1 { font-size: 1.75em; }
-.ck.ck-editor__editable h2 { font-size: 1.5em; }
-.ck.ck-editor__editable h3 { font-size: 1.25em; }
-.ck.ck-editor__editable h4 { font-size: 1.1em; }
-.ck.ck-editor__editable h5 { font-size: 1em; }
-.ck.ck-editor__editable h6 { font-size: 0.9em; }
+.ck.ck-editor__editable h1 {
+  font-size: 1.75em;
+}
+.ck.ck-editor__editable h2 {
+  font-size: 1.5em;
+}
+.ck.ck-editor__editable h3 {
+  font-size: 1.25em;
+}
+.ck.ck-editor__editable h4 {
+  font-size: 1.1em;
+}
+.ck.ck-editor__editable h5 {
+  font-size: 1em;
+}
+.ck.ck-editor__editable h6 {
+  font-size: 0.9em;
+}
 
 /* Lists */
 .ck.ck-editor__editable ul,
@@ -130,7 +142,7 @@
   padding: 1em;
   margin: 1em 0;
   overflow-x: auto;
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
   font-size: 13px;
   line-height: 1.4;
 }
@@ -139,7 +151,7 @@
   background-color: #f1f5f9;
   padding: 0.2em 0.4em;
   border-radius: 3px;
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
   font-size: 0.9em;
 }
 
@@ -171,11 +183,11 @@
     padding: 1em 1.5em !important;
     font-size: 16px; /* Better for mobile */
   }
-  
+
   .ck.ck-toolbar {
     padding: 6px;
   }
-  
+
   .ck.ck-toolbar .ck-toolbar__items {
     gap: 2px;
   }
@@ -188,7 +200,7 @@
     color: #f9fafb;
     border-color: #4b5563;
   }
-  
+
   .ck.ck-editor__editable h1,
   .ck.ck-editor__editable h2,
   .ck.ck-editor__editable h3,
@@ -197,18 +209,18 @@
   .ck.ck-editor__editable h6 {
     color: #f9fafb;
   }
-  
+
   .ck.ck-editor__editable blockquote {
     background-color: #374151;
     border-left-color: #1a9aef;
     color: #d1d5db;
   }
-  
+
   .ck.ck-editor__editable pre {
     background-color: #374151;
     border-color: #4b5563;
   }
-  
+
   .ck.ck-editor__editable code {
     background-color: #4b5563;
   }

styles/globals.css

@@ -28,9 +28,9 @@
   display: none;
 }
 
-.ck-editor__editable_inline {
+/* .ck-editor__editable_inline {
   min-height: 200px;
-}
+} */
 
 .sidebar-scrollbar {
   --scroll-shadow-size: 40px;
@@ -86,10 +86,10 @@
   }
 }
 
-.ck-editor__editable_inline:not(.ck-comment__input *) {
+/* .ck-editor__editable_inline:not(.ck-comment__input *) {
   height: 300px;
   overflow-y: auto;
-}
+} */
 
 body {
   height: 100%;