update/news detail

src/app/(main)/(home)/[id]/page.tsx

+'use client'
+
 //Core
 import dayjs from 'dayjs'
 
@@ -5,47 +7,36 @@ import dayjs from 'dayjs'
 import { Spinner } from '@/components/ui'
 import AppEditorContent from '@/components/shared/editor-content'
 import BASE_URLS from '@/links'
-// import { useGetNewsId } from '#/api/endpoints/news';
-import { NewsAdminItem } from '@/api/types/news';
+import { useGetNewsId } from '@/api/endpoints/news';
+import { GetNewsDetailResponseType } from './page.type';
 import { Link, CalendarFold, Book } from 'lucide-react';
+import { useEffect, useMemo } from 'react';
+import { useParams } from 'next/navigation'
 // import { t } from 'i18next'
 
 // Component
-const NewsDetailPage = (params: { id: string }) => {
+const NewsDetailPage = () => {
+  const { id } = useParams()
 
   // server
-  // const { data, isLoading, isError } = useGetNewsId<NewsAdminItem>(getIdFormUrl)
+  const { data, isLoading } = useGetNewsId<GetNewsDetailResponseType>(id as string)
 
   // const { t, i18n } = useTranslation('newsPage')
-  // const { routeParams, data } = usePageContext()
   // const { newsDetail, fallbackClient } = data as Data
   // const lang = i18n.language == 'vi' ? 'vi' : 'vi'
-
-  // const infoNews = useMemo(() => {
-  //   if (!fallbackClient) return newsDetail?.responseData
-  //   if (!getNewsIdQuery.data) return
-  //   return getNewsIdQuery.data.responseData
-  // }, [newsDetail?.responseData, fallbackClient, getNewsIdQuery.data])
-
-  // Effects
-  // useEffect(() => {
-  //   // Update document title
-  //   infoNews?.title && (document.title = infoNews.title)
-  // }, [infoNews])
-
-  const isLoading = false;
+  console.log('newsDetail', data);
 
   // Template
   return (
-    <div className='user-news-detail-page pb-10'>
+    <div className='pb-10'>
       {isLoading ? (
         <Spinner />
       ) : (
         <div>
           {/* Banner */}
-          <img src={`${BASE_URLS.imageEndpoint}${data?.responseData?.thumbnail}`} alt='Banner' />
+          <img className='w-full h-100' src={`${BASE_URLS.imageEndpoint}${data?.responseData?.thumbnail}`} alt='Banner' />
           {/* Breadcrumb  */}
-          <div className='app-container py-10'>
+          <div className='container py-10'>
             <div className='flex gap-4 items-stretch'>
               {/* <Breadcrumbs aria-label='breadcrumb'>
                 <Link
@@ -75,9 +66,9 @@ const NewsDetailPage = (params: { id: string }) => {
             </div>
           </div>
 
-          <div className='app-container bg-white rounded p-10 flex flex-col gap-10'>
+          <div className='container bg-gray-100 rounded p-10 flex flex-col gap-10'>
             {/* Heading */}
-            <div className='text-app-blue text-[32px] leading-normal font-medium text-center'>{data?.responseData?.title}</div>
+            <div className='text-blue-900 text-[32px] leading-normal font-medium text-center'>{data?.responseData?.title}</div>
 
             {/* body */}
             <div className='flex items-start gap-8 flex-col lg:flex-row'>

src/app/(main)/(home)/[id]/page.type.ts

+export interface NewsDetailItem {
+    id: string
+    title: string
+    thumbnail: string
+    external_link: string
+    description: string
+    release_at: string
+    is_active: boolean
+    created_at: string
+    created_by: string | null
+    updated_at: string
+    updated_by: string | null
+    mode: 'NOW' | string
+    category: string
+}
+
+export interface NewsDetailResponseData {
+    count: number
+    rows: NewsDetailItem[]
+    totalPages: number
+    currentPage: number
+}
+
+export interface GetNewsDetailResponseType {
+    message: string
+    message_en: string
+    responseData: NewsDetailItem
+    status: 'success' | 'error'
+    timeStamp: string
+    violations: any | null
+}
\ No newline at end of file

src/app/(main)/(home)/page.tsx

@@ -35,25 +35,11 @@ const Home = () => {
     filters: submitSearch ? `title @=${submitSearch}` : undefined,
   })
 
-  console.log(BASE_URL.imageEndpoint, allData?.responseData.rows[0]?.thumbnail)
-
-  // //tab filter
-  let data
-  if (tab === 'all') {
-    data = allData
-  } else {
-    // fillter by category
-    const filteredRows = allData?.responseData?.rows?.filter(
-      (news) => news.category === tab
-    )
-    data = {
-      ...allData,
-      responseData: {
-        ...allData?.responseData,
-        rows: filteredRows ?? []
-      }
-    }
-  }
+  //tab filter
+  const rows = allData?.responseData?.rows ?? [];
+  const filteredRows = tab === 'all'
+    ? rows
+    : rows.filter(news => news.category === tab);
 
   // update slidesPerView on resize to match the Swiper breakpoints
   useEffect(() => {
@@ -139,7 +125,7 @@ const Home = () => {
                   setCurrentIndex(typeof swiper.realIndex === 'number' ? swiper.realIndex : swiper.activeIndex)
                 }}
               >
-                {allData?.responseData.rows.map((news) => (
+                {allData?.responseData?.rows.map((news) => (
                   <SwiperSlide key={news.id}>
                     <a href={`/tin-tuc/${news.id}`} className='block bg-white shadow-md overflow-hidden relative'>
                       <img
@@ -205,7 +191,7 @@ const Home = () => {
 
                   {/* News list */}
                   <div className='pb-5 overflow-hidden'>
-                    {data?.responseData.rows.slice(0, 5).map((news) => (
+                    {allData?.responseData.rows.slice(0, 5).map((news) => (
                       <NewsContent key={news.id} news={news} />
                     ))}
                   </div>
@@ -249,7 +235,7 @@ const Home = () => {
                 </div>
                 {/* News list */}
                 <div className='w-[50%] pb-5 overflow-hidden'>
-                  {data?.responseData.rows.slice(0, 5).map((news) => (
+                  {allData?.responseData.rows.slice(0, 5).map((news) => (
                     <NewsContent key={news.id} news={news} />
                   ))}
                 </div>
@@ -287,7 +273,7 @@ const Home = () => {
               </div>
 
               <div className='pt-5'>
-                {data?.responseData.rows.slice(0, 5).map((news) => (
+                {allData?.responseData.rows.slice(0, 5).map((news) => (
                   <NewsContent key={news.id} news={news} />
                 ))}
               </div>
@@ -306,7 +292,7 @@ const Home = () => {
               </div>
 
               <div className='pt-5'>
-                {data?.responseData.rows.slice(0, 5).map((news) => (
+                {allData?.responseData.rows.slice(0, 5).map((news) => (
                   <NewsContent key={news.id} news={news} />
                 ))}
               </div>