update/dynamic page

src/app/(main)/(home)/components/video-and-patners/index.tsx

@@ -76,9 +76,9 @@ const VideoAndPartners = () => {
             slidesPerView={3}
             spaceBetween={16}
             breakpoints={{
-              0: { slidesPerView: 3, spaceBetween: 10, grid: { rows: 1 } },
-              640: { slidesPerView: 3, spaceBetween: 16 },
-              1024: { slidesPerView: 3, spaceBetween: 24 },
+              0: { slidesPerView: 3, spaceBetween: 10, grid: { rows: 2 } },
+              640: { slidesPerView: 3, spaceBetween: 16, grid: { rows: 2 } },
+              1024: { slidesPerView: 3, spaceBetween: 24, grid: { rows: 2 } },
             }}
             className="partner-swiper"
           >

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

@@ -12,20 +12,25 @@ import ArticleDetailPage from "./templates/ArticleDetailPage";
 import EventPage from "./templates/EventPage";
 import EventDetailPage from "./templates/EventDetailPage";
 import { Spinner } from "@/components/ui";
+import { GetNewsResponseType } from "@/api/types/news";
+import { useGetNews } from "@/api/endpoints/news";
 
 export default function DynamicPage() {
   const params = useParams();
-  const router = useRouter();
   const slug = Array.isArray(params.slug) ? params.slug : [params.slug];
   const path = slug.join("/");
+  const router = useRouter();
 
   // query
+  const { data: news } = useGetNews<GetNewsResponseType>(
+    { filters: `external_link==/${path}` }
+  );
   const { data: category, isLoading, isError } = useGetNewsPageConfigGetHierarchical<GetNewsPageConfigResponseType>({
     static_link: `/${path}`,
   });
 
-  const children = category?.responseData?.children || [];
   // redirect to first child if has children
+  const children = category?.responseData?.children || [];
   useEffect(() => {
     if (!category) return;
     if (slug.length === 1 && children.length > 0) {
@@ -37,25 +42,12 @@ export default function DynamicPage() {
   }, [slug, category, children, router]);
 
   //template
-  if (slug.length === 1 && children.length > 0) {
-    return null;
-  }
-
   if (slug[0] === "hoat-dong" && slug[1] === "su-kien") {
-    if (slug.length === 2) return <EventPage isError={isError} isLoading={isLoading} />;
+    if (slug.length === 2) return <EventPage />;
     if (slug.length === 3) return <EventDetailPage />;
   }
 
-  if (slug.length === 2) {
-    return category?.responseData?.is_article ? <ArticlePage isError={isError} isLoading={isLoading} /> : <InformationPage isError={isError} isLoading={isLoading} />;
-  }
-
-  if (slug.length === 3) {
-    return <ArticleDetailPage />;
-  }
-
-  // not found page
-  if (isLoading) {
+  if (news?.responseData?.count == 0 && isLoading) {
     return (
       <div className="flex justify-center items-center w-full h-64">
         <Spinner />
@@ -63,7 +55,19 @@ export default function DynamicPage() {
     );
   }
 
-  if (isError) {
+  if (news && news?.responseData.rows.length !== 0) {
+    return <ArticleDetailPage data={news} />;
+  }
+
+  else if (category?.responseData.is_article == true) {
+    return <ArticlePage />;
+  }
+
+  else if (category?.responseData.is_article == false) {
+    return <InformationPage />;
+  }
+
+  else if (isError) {
     return notFound();
   }
-}
+}
\ No newline at end of file

src/app/(main)/[...slug]/templates/ArticleDetailPage.tsx

@@ -4,64 +4,52 @@ import { GetNewsPageConfigResponseType } from "@/api/types/news-page-config";
 import { useGetNewsPageConfigGetHierarchical } from "@/api/endpoints/news-page-config";
 import ListCategory from "@/components/base/list-category";
 import { useParams } from "next/dist/client/components/navigation";
-import { useGetNews } from "@/api/endpoints/news";
 import { GetNewsResponseType } from "@/api/types/news";
 import EventCalendar from "@/components/base/event-calendar";
 import dayjs from "dayjs";
 import parse from "html-react-parser";
-import { Spinner } from "@/components/ui";
-import { notFound } from "next/navigation";
 
-export default function ArticleDetailPage() {
-  // get url
+export default function ArticleDetailPage({ data }: { data: GetNewsResponseType }) {
   const params = useParams();
   const slug = Array.isArray(params.slug) ? params.slug : [params.slug];
-  const path = slug.join("/");
 
   //query
-  const { data: categoriesPage } = useGetNewsPageConfigGetHierarchical<GetNewsPageConfigResponseType>({
+  const { data: category } = useGetNewsPageConfigGetHierarchical<GetNewsPageConfigResponseType>({
     code: slug[0],
   });
-  const { data, isLoading } = useGetNews<GetNewsResponseType>({
-    filters: `external_link==/${path}`,
-  });
 
+  const children = category?.responseData?.children ?? [];
   // template
-  if (!isLoading && (!data?.responseData?.rows || data.responseData.rows.length === 0)) {
-    return notFound();
-  }
   return (
     <div className='container w-full flex justify-center items-center pb-10'>
-      {isLoading ? (
-        <div className='flex justify-center items-center w-full h-64'>
-          <Spinner />
-        </div>
-      ) : (
-        <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'>
-                {data?.responseData?.rows[0]?.title}
-              </div>
-              <div className='flex items-center gap-2 text-sm mb-4'>
-                <span className='text-base text-blue-700'>
-                  {dayjs(data?.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(data?.responseData?.rows[0]?.description ?? '')}
-                </div>
+      <div className='flex flex-col gap-5 w-full'>
+        {children.length !== 0 ? (
+          <ListCategory categories={children} />
+        ) : (
+          <br />
+        )}
+        <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'>
+              {data?.responseData?.rows[0]?.title}
+            </div>
+            <div className='flex items-center gap-2 text-sm mb-4'>
+              <span className='text-base text-blue-700'>
+                {dayjs(data?.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(data?.responseData?.rows[0]?.description ?? '')}
               </div>
-            </main>
-            <aside className="space-y-6">
-              <EventCalendar />
-            </aside>
-          </div>
+            </div>
+          </main>
+          <aside className="space-y-6">
+            <EventCalendar />
+          </aside>
         </div>
-      )}
+      </div>
     </div>
   );
 }
\ No newline at end of file

src/app/(main)/[...slug]/templates/ArticlePage.tsx

@@ -3,7 +3,7 @@
 import { GetNewsPageConfigResponseType } from "@/api/types/news-page-config";
 import { useGetNewsPageConfigGetHierarchical } from "@/api/endpoints/news-page-config";
 import ListCategory from "@/components/base/list-category";
-import { useParams, useSearchParams, useRouter, usePathname, notFound } from "next/navigation";
+import { useParams, useSearchParams, useRouter, usePathname } from "next/navigation";
 import { useGetNews } from "@/api/endpoints/news";
 import { GetNewsResponseType } from "@/api/types/news";
 import CardNews from "@/components/base/card-news";
@@ -13,7 +13,7 @@ import EventCalendar from "@/components/base/event-calendar";
 import { useState, useEffect } from "react";
 import { Spinner } from "@/components/ui";
 
-export default function ArticlePage({ isError, isLoading }: { isError: boolean, isLoading: boolean }) {
+export default function ArticlePage() {
   // get url
   const params = useParams();
   const slug = Array.isArray(params.slug) ? params.slug : [params.slug];
@@ -41,7 +41,7 @@ export default function ArticlePage({ isError, isLoading }: { isError: boolean,
   }, [page]);
 
   // query
-  const { data: categoriesPage } = useGetNewsPageConfigGetHierarchical<GetNewsPageConfigResponseType>({
+  const { data: category } = useGetNewsPageConfigGetHierarchical<GetNewsPageConfigResponseType>({
     code: slug[0],
   });
 
@@ -51,14 +51,8 @@ export default function ArticlePage({ isError, isLoading }: { isError: boolean,
     currentPage: String(page),
   });
 
+  const children = category?.responseData?.children ?? [];
   //template
-  if (isLoading) return (
-    <div className="flex justify-center items-center w-full h-64">
-      <Spinner />
-    </div>
-  );
-  if (isError) return notFound();
-
   return (
     <div className="min-h-screen container mx-auto">
       {articlesLoading ? (
@@ -67,7 +61,11 @@ export default function ArticlePage({ isError, isLoading }: { isError: boolean,
         </div>
       ) : (
         <div className="w-full flex flex-col gap-5">
-          <ListCategory categories={categoriesPage?.responseData?.children} />
+          {children.length !== 0 ? (
+            <ListCategory categories={children} />
+          ) : (
+            <br />
+          )}
           <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
             <main className="lg:col-span-2 bg-background">
               <div className="pb-5 overflow-hidden">

src/app/(main)/[...slug]/templates/EventDetailPage.tsx

@@ -19,13 +19,12 @@ import EventCalendar from "@/components/base/event-calendar";
 import { CreditCard, MapPin, Clock } from "lucide-react";
 
 export default function EventDetailPage() {
-  // get url
   const params = useParams();
   const slug = Array.isArray(params.slug) ? params.slug : [params.slug];
   const lastpath = slug[slug.length - 1];
 
   // query
-  const { data: categoriesPage } = useGetNewsPageConfigGetHierarchical<GetNewsPageConfigResponseType>({
+  const { data: category } = useGetNewsPageConfigGetHierarchical<GetNewsPageConfigResponseType>({
     code: `${slug[0]}`,
   });
 
@@ -45,7 +44,7 @@ export default function EventDetailPage() {
         </div>
       ) : (
         <div className='flex flex-col gap-5 w-full'>
-          <ListCategory categories={categoriesPage?.responseData?.children} />
+          <ListCategory categories={category?.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 py-10 px-5 md:px-20">
               <div className='pb-5 text-primary text-2xl leading-normal font-medium'>

src/app/(main)/[...slug]/templates/EventPage.tsx

@@ -15,7 +15,7 @@ import { Pagination } from "@/components/base/pagination";
 import ListFilter from "@/components/base/list-filter";
 import EventCalendar from "@/components/base/event-calendar";
 
-export default function EventPage({ isError, isLoading }: { isError: boolean, isLoading: boolean }) {
+export default function EventPage() {
   // get url
   const params = useParams();
   const slug = Array.isArray(params.slug) ? params.slug : [params.slug];
@@ -53,13 +53,6 @@ export default function EventPage({ isError, isLoading }: { isError: boolean, is
   });
 
   //template
-  if (isLoading) return (
-    <div className="flex justify-center items-center w-full h-64">
-      <Spinner />
-    </div>
-  );
-  if (isError) return notFound();
-
   return (
     <>
       <div className="min-h-screen container mx-auto">

src/app/(main)/[...slug]/templates/InformationPage.tsx

@@ -7,19 +7,16 @@ import { useParams } from "next/dist/client/components/navigation";
 import { Spinner } from "@/components/ui/spinner";
 import { GetNewsResponseType } from "@/api/types/news";
 import { useGetNews } from "@/api/endpoints/news";
-import dayjs from "dayjs";
 import parse from "html-react-parser";
-import { notFound } from "next/navigation";
-import { is } from "date-fns/locale";
 
-export default function InformationPage({ isError, isLoading }: { isError: boolean, isLoading: boolean }) {
+export default function InformationPage() {
   // get url
   const params = useParams();
   const slug = Array.isArray(params.slug) ? params.slug : [params.slug];
   const path = slug.join("/");
 
   // query
-  const { data: categoryPage } = useGetNewsPageConfigGetHierarchical<GetNewsPageConfigResponseType>({
+  const { data: category } = useGetNewsPageConfigGetHierarchical<GetNewsPageConfigResponseType>({
     static_link: `/${slug[0]}`,
   });
 
@@ -27,14 +24,8 @@ export default function InformationPage({ isError, isLoading }: { isError: boole
     filters: `page_config.static_link==/${path}`,
   });
 
+  const children = category?.responseData?.children ?? [];
   //template
-  if (isLoading) return (
-    <div className="flex justify-center items-center w-full h-64">
-      <Spinner />
-    </div>
-  );
-  if (isError) return notFound();
-
   return (
     <div className='container w-full flex justify-center items-center pb-10'>
       {informationLoading ? (
@@ -43,7 +34,11 @@ export default function InformationPage({ isError, isLoading }: { isError: boole
         </div>
       ) : (
         <div className='flex flex-col gap-5 w-full'>
-          <ListCategory categories={categoryPage?.responseData?.children} />
+          {children.length !== 0 ? (
+            <ListCategory categories={children} />
+          ) : (
+            <br />
+          )}
           <main className=" bg-white border rounded-md py-10 px-5 md:px-20 lg:px-20">
             <div className='text-primary text-2xl leading-normal font-bold'>
               {information?.responseData?.rows[0]?.title}