component for likes and dislikes added

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 ReactionsBlock from './treasury/ReactionsBlock';
-import axios from 'axios';
 
 interface IProps {
   video_id: number;
 }
 
 const InfoBlock = ({ video_id }: IProps) => {
-  const [isLikedId, setIsLikedId] = useLocalStorage<number[]>('isLiked', []) || [];
-  const [isDisLikedId, setIsDisLikedId] = useLocalStorage<number[]>('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 ? (
                     <p className="font-roboto text-lg w-full text-black">{data!.data.desc}</p>
                   ) : null}
-                  <div className="flex items-center  bg-slate-50  rounded-full overflow-hidden w-fit">
+
-                    <div
+                  <ReactionsBlock video_id={video_id} />
-                      className="flex items-center gap-4 cursor-pointer py-4 px-6 hover:bg-slate-100"
+
-                      onClick={() => onLikeHandler()}>
-                      <button>
-                        {isLikedId.includes(video_id) ? (
-                          <BiSolidLike size={30} />
-                        ) : (
-                          <BiLike size={30} />
-                        )}
-                      </button>
-                      <span className="block text-xl ">{data?.data.likes}</span>
-                    </div>
-                    <div
-                      className="flex items-center gap-4 cursor-pointer py-4 px-6 hover:bg-slate-100"
-                      onClick={() => onDisLikeHandler()}>
-                      <button>
-                        {isDisLikedId.includes(video_id) ? (
-                          <BiSolidDislike size={30} />
-                        ) : (
-                          <BiDislike size={30} />
-                        )}
-                      </button>
-                      <span className="block text-xl ">{data?.data.dislikes}</span>
-                    </div>
-                  </div>
                   {data?.data.aydym_com_url ||
                   data?.data.horjun_content_url ||
                   data?.data.belet_url ? (

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<number[]>('isLiked', []) || [];
+  const [isDisLikedId, setIsDisLikedId] = useLocalStorage<number[]>('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 <h1>{JSON.stringify(error)}</h1>;
+
+  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 (
+    <div className="flex items-center  bg-slate-50  rounded-full overflow-hidden w-fit">
+      <div
+        className="flex items-center gap-4 cursor-pointer py-4 px-6 hover:bg-slate-100"
+        onClick={() => onLikeHandler()}>
+        <button>
+          {isLikedId.includes(video_id) ? <BiSolidLike size={30} /> : <BiLike size={30} />}
+        </button>
+        <span className="block text-xl ">{data?.data.likes}</span>
+      </div>
+      <div
+        className="flex items-center gap-4 cursor-pointer py-4 px-6 hover:bg-slate-100"
+        onClick={() => onDisLikeHandler()}>
+        <button>
+          {isDisLikedId.includes(video_id) ? <BiSolidDislike size={30} /> : <BiDislike size={30} />}
+        </button>
+        <span className="block text-xl ">{data?.data.dislikes}</span>
+      </div>
+    </div>
+  );
+};
+
+export default ReactionsBlock;