fix: view count func

api/queries.ts

@@ -90,7 +90,9 @@ export class Queries {
   }
 
   public static async getVideo(id: number): Promise<VideoModel> {
-    return await fetch(`${baseUrl.MATERIALS_SRC}${routes.video(id)}`).then(
+    return await fetch(`${baseUrl.MATERIALS_SRC}${routes.video(id)}`, {
+      cache: "no-store",
+    }).then(
       (res) => res.json().then((res) => res as VideoModel)
     );
   }

app/(main)/treasury/[video_id]/page.tsx

@@ -6,6 +6,8 @@ import { Queries } from '@/api/queries';
 import Hydrate from '@/utils/HydrateClient';
 import { dehydrate, useMutation } from '@tanstack/react-query';
 import SectionTitle from '@/components/SectionTitle';
+import { Suspense } from 'react';
+import Loader from '@/components/Loader';
 
 interface IParams {
   params: {
@@ -48,7 +50,13 @@ const VideoItem = async ({ params }: IParams) => {
         <Hydrate state={dehydratedState}>
           <div className="video-item-inner">
             <div className="video-item-wrapper flex flex-col gap-10  relative pb-14">
+              <Suspense fallback={
+                <div className="w-full h-[500px] sm:h-[667px] md:h-[600px] lg:h-[700px] flex items-center justify-center">
+                  <Loader height={700} />
+                </div>
+              }>
                 <InfoBlock video_id={params.video_id} />
+              </Suspense>
 
               <div className="video-item-inner w-full flex flex-col gap-4">
                 <SectionTitle title={'Beylekiler'} />

components/InfoBlock.tsx

@@ -1,69 +1,25 @@
-"use client";
 // NextJs components
 import Image from "next/image";
 import Link from "next/link";
 // React query
-import { useQuery } from "@tanstack/react-query";
 import { Queries } from "@/api/queries";
 // Components
-import Loader from "./Loader";
 import VideoPlayer from "./VideoPlayer";
 import SectionTitle from "./SectionTitle";
 // Images and cions
-import { SlEye } from "react-icons/sl";
 import aydym from "@/public/aydym-com.webp";
 import horjun from "@/public/horjun.png";
 import belet from "@/public/belet.jpg";
 
 import ReactionsBlock from "./treasury/ReactionsBlock";
-import { useCallback, useEffect, useState } from "react";
+import ViewCount from "./view-count";
-import axios from "axios";
 
 interface IProps {
   video_id: number;
 }
 
-const InfoBlock = ({ video_id }: IProps) => {
+const InfoBlock = async ({ video_id }: IProps) => {
-  const { data, isFetching, error } = useQuery({
+  const {data} = await Queries.getVideo(video_id);
-    queryKey: ["video", `video:${video_id}`],
-    queryFn: () => Queries.getVideo(video_id),
-  });
-  const [view, setView] = useState(data?.data?.view || 0);
-
-  const addView = useCallback(async () => {
-    const materials = localStorage.getItem('MHB_MATERIALS_ID');
-    if (materials) {
-      const materialsArray = materials.split(',');
-      if (!materialsArray.includes(video_id.toString())) {
-        const res = await axios.post(`https://turkmentv.gov.tm/v2/api/material/${video_id}/views/increment`);
-        if (res.status === 200) {
-          materialsArray.push(video_id.toString());
-          setView(res.data.view);
-        }
-      }
-      localStorage.setItem('MHB_MATERIALS_ID', materialsArray.join(','));
-    } else {
-      const res = await axios.post(`https://turkmentv.gov.tm/v2/api/material/${video_id}/views/increment`);
-      if (res.status === 200) {
-        localStorage.setItem('MHB_MATERIALS_ID', [video_id.toString()].join(','));
-        setView(res.data.view);
-      }
-    }
-
-  }, [video_id])
-
-  useEffect(() => {
-    addView();
-  }, []);
-
-
-  if (isFetching)
-    return (
-      <div className="w-full h-[500px] sm:h-[667px] md:h-[600px] l flex items-center justify-center">
-        <Loader height={700} />
-      </div>
-    );
-  if (error) return <h1>{JSON.stringify(error)}</h1>;
 
   return (
     <div className="flex gap-6 max-w-[1220px] w-full justify-between h-full">
@@ -71,20 +27,8 @@ const InfoBlock = ({ video_id }: IProps) => {
         <div className="flex justify-between gap-[32px] w-full h-full">
           <div className="w-full flex flex-col gap-6 h-full">
             <div className=" flex flex-col gap-2">
-              <SectionTitle title={data!.data.title} />
+              <SectionTitle title={data.title} />
-              <div className="flex gap-2 items-center">
+              <ViewCount video_id={video_id} viewCount={data.view} />
-                <SlEye
-                  style={{
-                    transition: "150ms all cubic-bezier(0.4, 0, 0.2, 1)",
-                  }}
-                  width={30}
-                  height={18}
-                  className="w-[30px] h-[18px]"
-                />
-                <span className="font-roboto text-lg font-normal text-[#494949] transition-all dark:text-white">
-                  {view}
-                </span>
-              </div>
             </div>
             <div className="flex flex-col gap-[40px] h-full  w-full">
               <div className="flex gap-[40px] md:flex-row flex-col  h-full  w-full">
@@ -97,25 +41,25 @@ const InfoBlock = ({ video_id }: IProps) => {
                 </div>
 
                 <div className="flex flex-col gap-6">
-                  {data?.data.desc ? (
+                  {data.desc ? (
                     <p className="font-roboto text-lg w-full text-black">
-                      {data!.data.desc}
+                      {data.desc}
                     </p>
                   ) : null}
 
                   <ReactionsBlock video_id={video_id} />
 
-                  {data?.data.aydym_com_url ||
+                  {data.aydym_com_url ||
-                    data?.data.horjun_content_url ||
+                    data.horjun_content_url ||
-                    data?.data.belet_url ? (
+                    data.belet_url ? (
                     <div className="flex flex-col gap-6">
                       <h2 className="text-2xl font-semibold">
                         Beýleki platformalarda seret:
                       </h2>
                       <div className="flex gap-11 items-center">
-                        {data?.data.aydym_com_url ? (
+                        {data.aydym_com_url ? (
                           <Link
-                            href={data?.data.aydym_com_url}
+                            href={data.aydym_com_url}
                             target="_blank"
                             className="flex flex-col items-center justify-center gap-2"
                           >
@@ -129,9 +73,9 @@ const InfoBlock = ({ video_id }: IProps) => {
                             <h3>Aydym.com</h3>
                           </Link>
                         ) : null}
-                        {data?.data.horjun_content_url ? (
+                        {data.horjun_content_url ? (
                           <Link
-                            href={data?.data.horjun_content_url}
+                            href={data.horjun_content_url}
                             target="_blank"
                             className="flex flex-col items-center justify-center gap-2"
                           >
@@ -145,9 +89,9 @@ const InfoBlock = ({ video_id }: IProps) => {
                             <h3>HorjunTv</h3>
                           </Link>
                         ) : null}
-                        {data?.data.belet_url ? (
+                        {data.belet_url ? (
                           <Link
-                            href={data.data.belet_url}
+                            href={data.belet_url}
                             target="_blank"
                             className="flex flex-col items-center justify-center gap-2"
                           >

components/treasury/ReactionsBlock.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { Queries } from '@/api/queries';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import axios from 'axios';

components/view-count.tsx

@@ -0,0 +1,52 @@
+'use client';
+import axios from 'axios';
+import React, { useCallback, useEffect, useState } from 'react'
+import { SlEye } from 'react-icons/sl'
+
+function ViewCount({ video_id, viewCount }: { video_id: number, viewCount: number }) {
+    const [view, setView] = useState(viewCount);
+
+    const addView = useCallback(async () => {
+      const materials = localStorage.getItem('MHB_MATERIALS_ID');
+      if (materials) {
+        const materialsArray = materials.split(',');
+        if (!materialsArray.includes(video_id.toString())) {
+          const res = await axios.post(`https://turkmentv.gov.tm/v2/api/material/${video_id}/views/increment`);
+          if (res.status === 200) {
+            materialsArray.push(video_id.toString());
+            setView(res.data.view);
+          }
+        }
+        localStorage.setItem('MHB_MATERIALS_ID', materialsArray.join(','));
+      } else {
+        const res = await axios.post(`https://turkmentv.gov.tm/v2/api/material/${video_id}/views/increment`);
+        if (res.status === 200) {
+          localStorage.setItem('MHB_MATERIALS_ID', [video_id.toString()].join(','));
+          setView(res.data.view);
+        }
+      }
+  
+    }, [video_id])
+  
+    useEffect(() => {
+      addView();
+    }, []);
+  
+    return (
+        <div className="flex gap-2 items-center">
+            <SlEye
+                style={{
+                    transition: "150ms all cubic-bezier(0.4, 0, 0.2, 1)",
+                }}
+                width={30}
+                height={18}
+                className="w-[30px] h-[18px]"
+            />
+            <span className="font-roboto text-lg font-normal text-[#494949] transition-all dark:text-white">
+                {view}
+            </span>
+        </div>
+    )
+}
+
+export default ViewCount