commit

api/queries.ts

@@ -48,6 +48,12 @@ export class Queries {
     }).then((res) => res.json().then((res) => res as NewsType));
   }
 
+  public static async getHomeBannerSingle3(id: string): Promise<NewsType> {
+    return await fetch(`https://turkmentv.gov.tm/v2/api/slider?type=small3/${id}`, {
+      next: { revalidate: 3600 },
+    }).then((res) => res.json().then((res) => res as NewsType));
+  }
+
   public static async getNewsItem(id: string): Promise<NewsItemModel> {
     return await fetch(`${baseUrl.NEWS_SRC}${routes.newsItem(id)}?locale=tm`, {
       next: { revalidate: 3600 },

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

@@ -1,11 +1,11 @@
-import { Queries } from "@/api/queries";
+import { Queries } from '@/api/queries';
-import PageTitle from "@/components/PageTitle";
+import PageTitle from '@/components/PageTitle';
-import MainNews from "@/components/news/MainNews";
+import MainNews from '@/components/news/MainNews';
-import NewsGrid from "@/components/news/NewsGrid";
+import NewsGrid from '@/components/news/NewsGrid';
-import Item from "@/components/news/NewsItem";
+import Item from '@/components/news/NewsItem';
-import Hydrate from "@/utils/HydrateClient";
+import Hydrate from '@/utils/HydrateClient';
-import getQueryClient from "@/utils/getQueryClient";
+import getQueryClient from '@/utils/getQueryClient';
-import { dehydrate } from "@tanstack/react-query";
+import { dehydrate } from '@tanstack/react-query';
 
 export async function generateStaticParams() {
   const news = await Queries.getNews(1, { perPage: 20 });
@@ -24,11 +24,11 @@ interface IParams {
 const NewsItem = async ({ params }: IParams) => {
   const queryClient = getQueryClient();
   await queryClient.prefetchQuery({
-    queryKey: ["news_item", params.slug],
+    queryKey: ['news_item', params.slug],
     queryFn: () => Queries.getNewsItem(params.slug),
   });
   await queryClient.prefetchInfiniteQuery({
-    queryKey: ["news", "infinite"],
+    queryKey: ['news', 'infinite'],
     queryFn: ({ pageParam = 1 }) => Queries.getNews(pageParam, {}),
   });
 

components/home/SmallSwiperNews.tsx

@@ -19,6 +19,8 @@ const SmallSwiperNews = () => {
   if (isFetching) return <Loader height={'100%'} />;
   if (error) return <h1>{JSON.stringify(error)}</h1>;
 
+  console.log(!!null);
+
   return (
     <div className="small-swiper flex-1">
       <Swiper
@@ -39,7 +41,9 @@ const SmallSwiperNews = () => {
         </SwiperSlide> */}
         {data?.data.map((item, index) => (
           <SwiperSlide key={v4()} className="">
-            <Link href={item ? `news/${item.id}` : ''} className="relative ">
+            <Link
+              href={item.page_id ? `news/${item.page_id}` : item.url || ''}
+              className="relative ">
               <div className="relative w-full h-full">
                 <Image
                   src={item.image}

components/news/NewsItem.tsx

@@ -17,17 +17,52 @@ const Item = ({ id }: IProps) => {
     queryFn: () => Queries.getNewsItem(id),
   });
 
+  const { data: bannerData } = useQuery({
+    queryKey: ['banner_item', id],
+    queryFn: () => Queries.getHomeBannerSingle3(id),
+  });
+
   if (isFetching) return <Loader />;
   if (error) return <h1>{JSON.stringify(error)}</h1>;
 
   return (
     <div className="flex flex-col gap-8">
-      <NextSeo title={data!.data.title} description={data!.data.excerpt} />
+      {/* <NextSeo title={data!.data.title} description={data!.data.excerpt} />
       <div className="flex flex-col gap-2">
         <PageTitle title={data!.data.title} />
         <p className="text-lg">{data?.data.published_at}</p>
       </div>
 
+      <div className="main-news flex flex-col gap-6">
+        <div className="w-full lg:h-[600px] md:h-[400px] h-[250px] relative">
+          {data?.data.featured_images && data.data.featured_images[0].path ? (
+            <Image
+              src={data!.data.featured_images[0].path}
+              alt={data!.data.slug ? data!.data.slug : data!.data.title}
+              unoptimized
+              unselectable="off"
+              fill
+              priority
+              className="w-full object-contain h-[600px]"
+            />
+          ) : null}
+        </div>
+        <div className="flex flex-col gap-3 text-black text-lg">
+          {/* <h2 className="font-mw_sans font-bold">{data!.data.title}</h2> */}
+      {/* <p
+            className="font-roboto font-normal flex flex-col gap-4"
+            dangerouslySetInnerHTML={{ __html: data!.data.content_html }}></p>
+        </div>
+      </div> */}
+      <NextSeo
+        title={bannerData?.data[0] ? bannerData?.data[0].title : ''}
+        description={data!.data.excerpt}
+      />
+      <div className="flex flex-col gap-2">
+        <PageTitle title={bannerData?.data[0] ? bannerData?.data[0].title : ''} />
+        <p className="text-lg">{data?.data.published_at}</p>
+      </div>
+
       <div className="main-news flex flex-col gap-6">
         <div className="w-full lg:h-[600px] md:h-[400px] h-[250px] relative">
           {data?.data.featured_images && data.data.featured_images[0].path ? (