diff --git a/components/InfoBlock.tsx b/components/InfoBlock.tsx index 67529b8..147c736 100644 --- a/components/InfoBlock.tsx +++ b/components/InfoBlock.tsx @@ -3,74 +3,27 @@ import Image from 'next/image'; import Link from 'next/link'; // React query -import { useMutation, useQuery } from '@tanstack/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 { BiLike, BiSolidDislike, BiSolidLike, BiDislike } from 'react-icons/bi'; 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 { useState } from 'react'; -import { useLocalStorage } from 'usehooks-ts'; -import axios from 'axios'; + +import ReactionsBlock from './treasury/ReactionsBlock'; interface IProps { video_id: number; } const InfoBlock = ({ video_id }: IProps) => { - const [isLikedId, setIsLikedId] = useLocalStorage('isLiked', []) || []; - const [isDisLikedId, setIsDisLikedId] = useLocalStorage('isDisliked', []) || []; - - async function addLikes() { - return axios.post(`https://turkmentv.gov.tm/v2/api/material/${video_id}/likes`, { - like: isLikedId.includes(video_id) ? true : false, - }); - } - async function addDisLikes() { - return axios.post(`https://turkmentv.gov.tm/v2/api/material/${video_id}/dislikes`, { - dislike: isDisLikedId.includes(video_id) ? true : false, - }); - } - - const mutationLikes = useMutation(() => addLikes()); - const mutationDisLikes = useMutation(() => addDisLikes()); - - const onLikeHandler = () => { - if (isLikedId.includes(video_id)) { - setIsLikedId(isLikedId.filter((id) => id !== video_id)); - } else { - if (isDisLikedId.includes(video_id)) { - setIsDisLikedId(isDisLikedId.filter((id) => id !== video_id)); - mutationDisLikes.mutate(); - } - setIsLikedId([...isLikedId, video_id]); - } - - mutationLikes.mutate(); - }; - - const onDisLikeHandler = () => { - if (isDisLikedId.includes(video_id)) { - setIsDisLikedId(isDisLikedId.filter((id) => id !== video_id)); - } else { - if (isLikedId.includes(video_id)) { - setIsLikedId(isLikedId.filter((id) => id !== video_id)); - mutationLikes.mutate(); - } - setIsDisLikedId([...isDisLikedId, video_id]); - } - - mutationDisLikes.mutate(); - }; - const { data, isFetching, error } = useQuery({ - queryKey: ['video', video_id, mutationLikes, mutationDisLikes], + queryKey: ['video', video_id], queryFn: () => Queries.getVideo(video_id), }); @@ -106,32 +59,9 @@ const InfoBlock = ({ video_id }: IProps) => { {data?.data.desc ? (

{data!.data.desc}

) : null} -
-
onLikeHandler()}> - - {data?.data.likes} -
-
onDisLikeHandler()}> - - {data?.data.dislikes} -
-
+ + + {data?.data.aydym_com_url || data?.data.horjun_content_url || data?.data.belet_url ? ( diff --git a/components/treasury/ReactionsBlock.tsx b/components/treasury/ReactionsBlock.tsx new file mode 100644 index 0000000..44b65d2 --- /dev/null +++ b/components/treasury/ReactionsBlock.tsx @@ -0,0 +1,90 @@ +import { Queries } from '@/api/queries'; +import { useMutation, useQuery } from '@tanstack/react-query'; +import { data } from 'autoprefixer'; +import axios from 'axios'; +import { Loader } from 'lucide-react'; +import React from 'react'; +import { BiSolidLike, BiLike, BiSolidDislike, BiDislike } from 'react-icons/bi'; +import { useLocalStorage } from 'usehooks-ts'; + +interface IProps { + video_id: number; +} + +const ReactionsBlock = ({ video_id }: IProps) => { + const [isLikedId, setIsLikedId] = useLocalStorage('isLiked', []) || []; + const [isDisLikedId, setIsDisLikedId] = useLocalStorage('isDisliked', []) || []; + + async function addLikes() { + return axios.post(`https://turkmentv.gov.tm/v2/api/material/${video_id}/likes`, { + like: isLikedId.includes(video_id) ? true : false, + }); + } + async function addDisLikes() { + return axios.post(`https://turkmentv.gov.tm/v2/api/material/${video_id}/dislikes`, { + dislike: isDisLikedId.includes(video_id) ? true : false, + }); + } + + const mutationLikes = useMutation(() => addLikes()); + const mutationDisLikes = useMutation(() => addDisLikes()); + + const { data, error } = useQuery({ + queryKey: ['video', video_id, mutationLikes, mutationDisLikes], + queryFn: () => Queries.getVideo(video_id), + keepPreviousData: true, + }); + + if (error) return

{JSON.stringify(error)}

; + + const onLikeHandler = () => { + if (isLikedId.includes(video_id)) { + setIsLikedId(isLikedId.filter((id) => id !== video_id)); + } else { + if (isDisLikedId.includes(video_id)) { + setIsDisLikedId(isDisLikedId.filter((id) => id !== video_id)); + mutationDisLikes.mutate(); + } + setIsLikedId([...isLikedId, video_id]); + } + + mutationLikes.mutate(); + }; + + const onDisLikeHandler = () => { + if (isDisLikedId.includes(video_id)) { + setIsDisLikedId(isDisLikedId.filter((id) => id !== video_id)); + } else { + if (isLikedId.includes(video_id)) { + setIsLikedId(isLikedId.filter((id) => id !== video_id)); + mutationLikes.mutate(); + } + setIsDisLikedId([...isDisLikedId, video_id]); + } + + mutationDisLikes.mutate(); + }; + + return ( +
+
onLikeHandler()}> + + {data?.data.likes} +
+
onDisLikeHandler()}> + + {data?.data.dislikes} +
+
+ ); +}; + +export default ReactionsBlock;