From a8c5dc79f08ddde39fbe00e5ed974a18ed887d7c Mon Sep 17 00:00:00 2001 From: Atash03 Date: Mon, 23 Jun 2025 14:15:10 +0500 Subject: [PATCH] fix: view count func --- api/queries.ts | 4 +- app/(main)/treasury/[video_id]/page.tsx | 22 +++++-- components/InfoBlock.tsx | 88 +++++-------------------- components/treasury/ReactionsBlock.tsx | 1 + components/view-count.tsx | 52 +++++++++++++++ 5 files changed, 87 insertions(+), 80 deletions(-) create mode 100644 components/view-count.tsx diff --git a/api/queries.ts b/api/queries.ts index 26980ca..6002f1a 100644 --- a/api/queries.ts +++ b/api/queries.ts @@ -90,7 +90,9 @@ export class Queries { } public static async getVideo(id: number): Promise { - 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) ); } diff --git a/app/(main)/treasury/[video_id]/page.tsx b/app/(main)/treasury/[video_id]/page.tsx index 5c97467..2f02a85 100644 --- a/app/(main)/treasury/[video_id]/page.tsx +++ b/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: { @@ -32,12 +34,12 @@ const VideoItem = async ({ params }: IParams) => { queryFn: ({ pageParam = 1 }) => Queries.getVideos( '?' + - String( - new URLSearchParams({ - page: pageParam, - per_page: '8', - }), - ), + String( + new URLSearchParams({ + page: pageParam, + per_page: '8', + }), + ), ), }); const dehydratedState = dehydrate(queryClient); @@ -48,7 +50,13 @@ const VideoItem = async ({ params }: IParams) => {
- + + +
+ }> + +
diff --git a/components/InfoBlock.tsx b/components/InfoBlock.tsx index 33c16c5..0025e81 100644 --- a/components/InfoBlock.tsx +++ b/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 axios from "axios"; +import ViewCount from "./view-count"; interface IProps { video_id: number; } -const InfoBlock = ({ video_id }: IProps) => { - const { data, isFetching, error } = useQuery({ - 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 ( -
- -
- ); - if (error) return

{JSON.stringify(error)}

; +const InfoBlock = async ({ video_id }: IProps) => { + const {data} = await Queries.getVideo(video_id); return (
@@ -71,20 +27,8 @@ const InfoBlock = ({ video_id }: IProps) => {
- -
- - - {view} - -
+ +
@@ -97,25 +41,25 @@ const InfoBlock = ({ video_id }: IProps) => {
- {data?.data.desc ? ( + {data.desc ? (

- {data!.data.desc} + {data.desc}

) : null} - {data?.data.aydym_com_url || - data?.data.horjun_content_url || - data?.data.belet_url ? ( + {data.aydym_com_url || + data.horjun_content_url || + data.belet_url ? (

Beýleki platformalarda seret:

- {data?.data.aydym_com_url ? ( + {data.aydym_com_url ? ( @@ -129,9 +73,9 @@ const InfoBlock = ({ video_id }: IProps) => {

Aydym.com

) : null} - {data?.data.horjun_content_url ? ( + {data.horjun_content_url ? ( @@ -145,9 +89,9 @@ const InfoBlock = ({ video_id }: IProps) => {

HorjunTv

) : null} - {data?.data.belet_url ? ( + {data.belet_url ? ( diff --git a/components/treasury/ReactionsBlock.tsx b/components/treasury/ReactionsBlock.tsx index 116b85c..4870b5f 100644 --- a/components/treasury/ReactionsBlock.tsx +++ b/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'; diff --git a/components/view-count.tsx b/components/view-count.tsx new file mode 100644 index 0000000..6c8abe0 --- /dev/null +++ b/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 ( +
+ + + {view} + +
+ ) +} + +export default ViewCount \ No newline at end of file