[tag]0.1-vcci

src/api/types/news.ts

@@ -17,6 +17,7 @@ export interface NewsItem {
     name: string
     static_link: string
     static_link_en: string
+    code: string
   }
 }
 

src/app/(main)/(home)/components/card-news/index.tsx

@@ -6,7 +6,7 @@ import AppEditorContent from "@/components/shared/editor-content";
 function CardNews({ news }: { news: NewsItem }) {
   return (
     <a
-      href={`${news.page_config.static_link}/${news.id}`}
+      href={`${news.external_link}`}
       className="flex flex-row gap-2 mb-2 sm:gap-3 sm:mb-3"
     >
       <img

src/app/(main)/[...slug]/components/event-detail/index.tsx

+"use client";
+
+import parse from "html-react-parser";
+import dayjs from "dayjs";
+import { Spinner } from "@/components/ui";
+import { useGetNewsId } from "@/api/endpoints/news";
+import { GetNewsDetailResponseType } from "./../../page.type";
+
+interface EventDetailProps {
+  id?: string;
+}
+
+export default function EventDetail({ id }: EventDetailProps) {
+  if (!id) return null;
+
+  const { data: eventDetail, isLoading } = useGetNewsId<GetNewsDetailResponseType>(id);
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center py-6">
+        <Spinner />
+      </div>
+    );
+  }
+
+  const event = eventDetail?.responseData;
+  if (!event) return null;
+
+  return (
+    <div>
+      <h1 className="text-2xl font-medium text-primary">{event.title}</h1>
+      <div className="text-sm text-blue-700 mb-4">
+        {dayjs(event.created_at).format("DD/MM/YYYY")}
+      </div>
+      <div className="prose tiptap">{parse(event.description ?? "")}</div>
+    </div>
+  );
+}

src/app/(main)/[...slug]/components/news-detail/index.tsx

+"use client";
+
+import parse from "html-react-parser";
+import dayjs from "dayjs";
+import { GetNewsResponseType } from "@/api/types/news";
+
+interface NewsDetailProps {
+  data: GetNewsResponseType;
+}
+
+export default function NewsDetail({ data }: NewsDetailProps) {
+  const news = data?.responseData?.rows?.[0];
+  if (!news) return null;
+
+  return (
+    <div>
+      <h1 className="text-2xl font-medium text-primary">{news.title}</h1>
+      <div className="text-sm text-blue-700 mb-4">
+        {dayjs(news.created_at).format("DD/MM/YYYY")}
+      </div>
+      <div className="prose tiptap">{parse(news.description ?? "")}</div>
+    </div>
+  );
+}

src/app/(main)/[...slug]/page.tsx

@@ -8,17 +8,17 @@ import { ListFilter } from "@/components/base/list-filter";
 import EventCalendar from "@/components/base/event-calendar";
 import ListCategory from "@/components/base/list-category";
 import CardNews from "@/components/base/card-news";
-import Image from "next/image";
-import parse from "html-react-parser";
-import dayjs from "dayjs";
 
 // API hooks
-import { useGetNews, useGetNewsId } from "@/api/endpoints/news";
+import { useGetNews } from "@/api/endpoints/news";
 import { GetNewsResponseType } from "@/api/types/news";
-import { GetNewsDetailResponseType } from "./page.type";
 import { useGetNewsPageConfigGetHierarchical } from "@/api/endpoints/news-page-config";
 import { GetNewsPageConfigResponseType } from "@/api/types/news-page-config";
 
+// Component con
+import NewsDetail from "./components/news-detail";
+import EventDetail from "./components/event-detail";
+
 export default function DynamicPage() {
   const params = useParams();
   const slugArray = Array.isArray(params.slug) ? params.slug : [params.slug];
@@ -30,19 +30,19 @@ export default function DynamicPage() {
   const [page, setPage] = useState(1);
   const pageSize = 5;
 
-  // query
+  // queries
   const { data: categoriesPage } = useGetNewsPageConfigGetHierarchical<GetNewsPageConfigResponseType>({
-    code: `${slugArray[0]}`,
+    code: slugArray[0],
   });
 
   const { data: newsDetail, isLoading: isLoadingDetail } = useGetNews<GetNewsResponseType>({
-    filters: `page_config.static_link==/${url}` + `,external_link@=${lastPart}`,
+    filters: `page_config.static_link==/${url},external_link@=${lastPart}`,
   });
 
   const { data: news, isLoading } = useGetNews<GetNewsResponseType>({
     pageSize: String(pageSize),
     currentPage: String(page),
-    filters: `page_config.static_link==/${url}` + (submitSearch ? `,title@=${submitSearch}` : ""),
+    filters: `page_config.static_link==/${url}${submitSearch ? `,title@=${submitSearch}` : ""}`,
   });
 
   if (isLoadingDetail) {
@@ -53,29 +53,23 @@ export default function DynamicPage() {
     );
   }
 
-  // detail news page
+  // check UUID
+  const isUUID = /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/.test(
+    lastPart as string
+  );
+  const id = isUUID ? lastPart : undefined;
+
+  // detail page condition
   const isDetailPage = newsDetail?.responseData?.rows?.length === 1;
-  if (isDetailPage) {
+
+  if (isDetailPage || id) {
     return (
-      <div className='container w-full flex justify-center items-center pb-10'>
-        <div className='flex flex-col gap-5 w-full'>
+      <div className="container w-full flex justify-center items-center pb-10">
+        <div className="flex flex-col gap-5 w-full">
           <ListCategory categories={categoriesPage?.responseData?.children} />
           <div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
             <main className="lg:col-span-2 bg-white border rounded-md p-8">
-              <div className='pb-5 text-primary text-2xl leading-normal font-medium'>
-                {newsDetail?.responseData?.rows[0].title}
-              </div>
-              <div className='flex items-center gap-2 text-sm mb-4'>
-                <span className='text-base text-blue-700'>
-                  {dayjs(newsDetail?.responseData?.rows[0].created_at).format('DD/MM/YYYY')}
-                </span>
-              </div>
-              <hr className="my-5" />
-              <div className='flex-1 text-app-grey text-base overflow-hidden'>
-                <div className="prose tiptap overflow-hidden">
-                  {parse(newsDetail?.responseData?.rows[0].description ?? '')}
-                </div>
-              </div>
+              {isDetailPage ? <NewsDetail data={newsDetail} /> : <EventDetail id={id} />}
             </main>
             <aside className="space-y-6">
               <EventCalendar />
@@ -104,11 +98,7 @@ export default function DynamicPage() {
               ) : (
                 <>
                   {news?.responseData.rows.map((item) => (
-                    <CardNews
-                      key={item.id}
-                      news={item}
-                      link={`${item.external_link}`}
-                    />
+                    <CardNews key={item.id} news={item} link={`${item.external_link}`} />
                   ))}
                   <div className="w-full flex justify-center mt-4">
                     <Pagination
@@ -138,4 +128,4 @@ export default function DynamicPage() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}