add prettier formatter to all file
This commit is contained in:
Ehsan
+170
-146
@@ -9,155 +9,179 @@ import DisLikeComment from "@/components/icons/DisLikeComment";
|
||||
import ArrowUpComment from "@/components/icons/ArrowUpComment";
|
||||
import LikeComment from "@/components/icons/LikeComment";
|
||||
|
||||
function ItemUser({ update, setUpdate, isReply, list, setList, data, loading }) {
|
||||
|
||||
const handleLike = (lengthLike, data, nameLike, nameIsLike) => {
|
||||
if (nameIsLike === 'is_like' && data.is_dislike) {
|
||||
data.is_dislike = false;
|
||||
data.dislike--;
|
||||
} else if (nameIsLike === 'is_dislike' && data.is_like) {
|
||||
data.is_like = false;
|
||||
data.like--;
|
||||
}
|
||||
data[nameLike] = lengthLike;
|
||||
data[nameIsLike] = !data[nameIsLike];
|
||||
setUpdate(!update);
|
||||
function ItemUser({
|
||||
update,
|
||||
setUpdate,
|
||||
isReply,
|
||||
list,
|
||||
setList,
|
||||
data,
|
||||
loading,
|
||||
}) {
|
||||
const handleLike = (lengthLike, data, nameLike, nameIsLike) => {
|
||||
if (nameIsLike === "is_like" && data.is_dislike) {
|
||||
data.is_dislike = false;
|
||||
data.dislike--;
|
||||
} else if (nameIsLike === "is_dislike" && data.is_like) {
|
||||
data.is_like = false;
|
||||
data.like--;
|
||||
}
|
||||
data[nameLike] = lengthLike;
|
||||
data[nameIsLike] = !data[nameIsLike];
|
||||
setUpdate(!update);
|
||||
};
|
||||
|
||||
return (
|
||||
<li className="w-full">
|
||||
<div className="flex items-center justify-start gap-2">
|
||||
{loading ? (
|
||||
<Skeleton variant="circular" className="!min-w-[40px] !min-h-[40px]" />
|
||||
) : (
|
||||
<Image
|
||||
className="!w-[32px] !h-[32px] sm:!w-[35px] sm:!h-[35px] md:!h-[37px] md:!w-[37px] lg:!w-[40px] lg:!h-[40px]"
|
||||
src={data.profile}
|
||||
width={40}
|
||||
height={40}
|
||||
alt="profile"
|
||||
/>
|
||||
)}
|
||||
<div className="flex flex-col items-start justify-center gap-[8px]">
|
||||
{loading ? (
|
||||
<Skeleton variant="text" className="!min-w-[70px]" />
|
||||
) : (
|
||||
<>
|
||||
<p className="text-[#343A40] text-[14px] md:text-[16px] font-medium">{data.name}</p>
|
||||
<p className="text-[#7E7E7E] text-[12px] md:text-[14px] font-medium">3 روز پیش</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
return (
|
||||
<li className="w-full">
|
||||
<div className="flex items-center justify-start gap-2">
|
||||
{loading ? (
|
||||
<Skeleton
|
||||
variant="circular"
|
||||
className="!min-w-[40px] !min-h-[40px]"
|
||||
/>
|
||||
) : (
|
||||
<Image
|
||||
className="!w-[32px] !h-[32px] sm:!w-[35px] sm:!h-[35px] md:!h-[37px] md:!w-[37px] lg:!w-[40px] lg:!h-[40px]"
|
||||
src={data.profile}
|
||||
width={40}
|
||||
height={40}
|
||||
alt="profile"
|
||||
/>
|
||||
)}
|
||||
<div className="flex flex-col items-start justify-center gap-[8px]">
|
||||
{loading ? (
|
||||
<Skeleton variant="text" className="!min-w-[70px]" />
|
||||
) : (
|
||||
<>
|
||||
<p className="text-[#343A40] text-[14px] md:text-[16px] font-medium">
|
||||
{data.name}
|
||||
</p>
|
||||
<p className="text-[#7E7E7E] text-[12px] md:text-[14px] font-medium">
|
||||
3 روز پیش
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
{loading ? (
|
||||
<>
|
||||
<Skeleton variant="text" className="!w-full !mt-8" />
|
||||
<Skeleton variant="text" className="!w-1/3" />
|
||||
</>
|
||||
) : (
|
||||
<p className="text-[#495057] text-[12px] md:text-[14px] font-normal leading-[20px] sm:leading-[24px] md:leading-[28px] lg:leading-[30px]">
|
||||
{data.comment}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex items-center justify-start mt-2 gap-[28px]">
|
||||
<div className="flex items-center justify-start gap-1">
|
||||
<div
|
||||
className="cursor-pointer"
|
||||
onClick={() =>
|
||||
handleLike(
|
||||
data.is_like ? data.like - 1 : data.like + 1,
|
||||
data,
|
||||
"like",
|
||||
"is_like"
|
||||
)
|
||||
}
|
||||
>
|
||||
{data.is_like ? <BoldLikeComment /> : <LikeComment />}
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
{loading ? (
|
||||
<>
|
||||
<Skeleton variant="text" className="!w-full !mt-8" />
|
||||
<Skeleton variant="text" className="!w-1/3" />
|
||||
</>
|
||||
) : (
|
||||
<p className="text-[#495057] text-[12px] md:text-[14px] font-normal leading-[20px] sm:leading-[24px] md:leading-[28px] lg:leading-[30px]">{data.comment}</p>
|
||||
)}
|
||||
<div className="flex items-center justify-start mt-2 gap-[28px]">
|
||||
<div className="flex items-center justify-start gap-1">
|
||||
<div
|
||||
className="cursor-pointer"
|
||||
onClick={() =>
|
||||
handleLike(data.is_like ? data.like - 1 : data.like + 1, data, 'like', 'is_like')
|
||||
}
|
||||
>
|
||||
{data.is_like ? (
|
||||
<BoldLikeComment />
|
||||
) : (
|
||||
<LikeComment />
|
||||
)}
|
||||
</div>
|
||||
{loading ? (
|
||||
<Skeleton variant="text" className="!min-w-[8px]" />
|
||||
) : (
|
||||
<p className="text-[#6C757D] text-[12px] font-normal select-none">{data.like}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center justify-start gap-1">
|
||||
<div
|
||||
className="cursor-pointer"
|
||||
onClick={() =>
|
||||
handleLike(data.is_dislike ? data.dislike - 1 : data.dislike + 1, data, 'dislike', 'is_dislike')
|
||||
}
|
||||
>
|
||||
{data.is_dislike ? (
|
||||
<BoldDisLikeComment />
|
||||
) : (
|
||||
<DisLikeComment />
|
||||
)}
|
||||
</div>
|
||||
{loading ? (
|
||||
<Skeleton variant="text" className="!min-w-[8px]" />
|
||||
) : (
|
||||
<p className="text-[#6C757D] text-[12px] font-normal select-none">{data.dislike}</p>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
className="!text-[#495057] !text-[12px] !font-medium"
|
||||
onClick={() => {
|
||||
data.is_open_answer = !data.is_open_answer;
|
||||
setUpdate(!update);
|
||||
}}
|
||||
variant="text"
|
||||
>پاسخ</Button>
|
||||
</div>
|
||||
<div
|
||||
className={`flex flex-col mt-2 justify-center overflow-hidden transition duration-500 items-start gap-2 mb-2
|
||||
${data.is_open_answer ? 'max-h-fit' : 'max-h-0'}`}
|
||||
>
|
||||
<Field
|
||||
type='text'
|
||||
title='پاسخ شما...'
|
||||
isPlaceHolder={true}
|
||||
/>
|
||||
<Button
|
||||
variant="contained"
|
||||
className="!p-2 !h-10 !text-[12px] !font-medium !text-[#FFF] sm:!py-[10px] md:!px-[12px] !rounded-[8px] !bg-[#5559CE]
|
||||
{loading ? (
|
||||
<Skeleton variant="text" className="!min-w-[8px]" />
|
||||
) : (
|
||||
<p className="text-[#6C757D] text-[12px] font-normal select-none">
|
||||
{data.like}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center justify-start gap-1">
|
||||
<div
|
||||
className="cursor-pointer"
|
||||
onClick={() =>
|
||||
handleLike(
|
||||
data.is_dislike ? data.dislike - 1 : data.dislike + 1,
|
||||
data,
|
||||
"dislike",
|
||||
"is_dislike"
|
||||
)
|
||||
}
|
||||
>
|
||||
{data.is_dislike ? <BoldDisLikeComment /> : <DisLikeComment />}
|
||||
</div>
|
||||
{loading ? (
|
||||
<Skeleton variant="text" className="!min-w-[8px]" />
|
||||
) : (
|
||||
<p className="text-[#6C757D] text-[12px] font-normal select-none">
|
||||
{data.dislike}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
className="!text-[#495057] !text-[12px] !font-medium"
|
||||
onClick={() => {
|
||||
data.is_open_answer = !data.is_open_answer;
|
||||
setUpdate(!update);
|
||||
}}
|
||||
variant="text"
|
||||
>
|
||||
پاسخ
|
||||
</Button>
|
||||
</div>
|
||||
<div
|
||||
className={`flex flex-col mt-2 justify-center overflow-hidden transition duration-500 items-start gap-2 mb-2
|
||||
${data.is_open_answer ? "max-h-fit" : "max-h-0"}`}
|
||||
>
|
||||
<Field type="text" title="پاسخ شما..." isPlaceHolder={true} />
|
||||
<Button
|
||||
variant="contained"
|
||||
className="!p-2 !h-10 !text-[12px] !font-medium !text-[#FFF] sm:!py-[10px] md:!px-[12px] !rounded-[8px] !bg-[#5559CE]
|
||||
!shadow-none sm:!shadow-[0px_4px_30px_0px_rgba(56,_160,_162,_0.30)]"
|
||||
>
|
||||
ارسال پاسخ
|
||||
</Button>
|
||||
</div>
|
||||
{!!data.replays.length && (
|
||||
<div className="flex items-center justify-start gap-1 my-2">
|
||||
<Button
|
||||
className="!text-[#0FA1B3] !text-[12px] !font-medium"
|
||||
onClick={() => {
|
||||
data.is_open_reply = !data.is_open_reply;
|
||||
setUpdate(!update);
|
||||
}}
|
||||
>
|
||||
مشاهده پاسخ ها ({data.replays.length})
|
||||
<div className={`!mr-1 ${data.is_open_reply ? '!rotate-0' : '!rotate-180'}`}>
|
||||
<ArrowUpComment />
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
<ul
|
||||
className={`flex mr-12 flex-col justify-center transition-all duration-500 overflow-hidden items-start gap-12
|
||||
${loading && 'w-full'}
|
||||
${data.is_open_reply ? 'max-h-screen mt-12' : 'max-h-0'}`}
|
||||
>
|
||||
{data.replays.map((item, idx) => (
|
||||
<ItemUser
|
||||
key={idx}
|
||||
data={item}
|
||||
isReply={true}
|
||||
update={update}
|
||||
loading={loading}
|
||||
setUpdate={setUpdate}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
>
|
||||
ارسال پاسخ
|
||||
</Button>
|
||||
</div>
|
||||
{!!data.replays.length && (
|
||||
<div className="flex items-center justify-start gap-1 my-2">
|
||||
<Button
|
||||
className="!text-[#0FA1B3] !text-[12px] !font-medium"
|
||||
onClick={() => {
|
||||
data.is_open_reply = !data.is_open_reply;
|
||||
setUpdate(!update);
|
||||
}}
|
||||
>
|
||||
مشاهده پاسخ ها ({data.replays.length})
|
||||
<div
|
||||
className={`!mr-1 ${
|
||||
data.is_open_reply ? "!rotate-0" : "!rotate-180"
|
||||
}`}
|
||||
>
|
||||
<ArrowUpComment />
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
<ul
|
||||
className={`flex mr-12 flex-col justify-center transition-all duration-500 overflow-hidden items-start gap-12
|
||||
${loading && "w-full"}
|
||||
${data.is_open_reply ? "max-h-screen mt-12" : "max-h-0"}`}
|
||||
>
|
||||
{data.replays.map((item, idx) => (
|
||||
<ItemUser
|
||||
key={idx}
|
||||
data={item}
|
||||
isReply={true}
|
||||
update={update}
|
||||
loading={loading}
|
||||
setUpdate={setUpdate}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
export default ItemUser
|
||||
export default ItemUser;
|
||||
|
||||
Reference in New Issue
Block a user