component for likes and dislikes added
This commit is contained in:
Kakabay
parent
817b1da34d
commit
2241232456
|
|
@ -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<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
|
||||
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>
|
||||
|
||||
<ReactionsBlock video_id={video_id} />
|
||||
|
||||
{data?.data.aydym_com_url ||
|
||||
data?.data.horjun_content_url ||
|
||||
data?.data.belet_url ? (
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
Loading…
Reference in New Issue