add prettier formatter to all file
This commit is contained in:
Ehsan
@@ -1,28 +1,30 @@
|
||||
import { TextField } from "@mui/material"
|
||||
import { TextField } from "@mui/material";
|
||||
|
||||
function Field({ title, type, multiline, isPlaceHolder }) {
|
||||
return (
|
||||
<TextField
|
||||
placeholder={isPlaceHolder && title}
|
||||
label={!isPlaceHolder ? title : ''}
|
||||
type={type || 'text'}
|
||||
className="!w-full !mx-auto !bg-transparent"
|
||||
sx={{
|
||||
'& .MuiFormLabel-root': {
|
||||
top: '-4px !important'
|
||||
},
|
||||
'& .MuiInputBase-input': { padding: '12.5px 14px' },
|
||||
'& .MuiInputBase-root': { borderRadius: '6px !important' },
|
||||
'& .MuiOutlinedInput-notchedOutline': { border: '1px solid #EFEFEF !important' },
|
||||
".Mui-focused": {
|
||||
'& .MuiOutlinedInput-notchedOutline': {
|
||||
border: '1px solid #5559CE !important',
|
||||
transition: '0.5s all'
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
return (
|
||||
<TextField
|
||||
placeholder={isPlaceHolder && title}
|
||||
label={!isPlaceHolder ? title : ""}
|
||||
type={type || "text"}
|
||||
className="!w-full !mx-auto !bg-transparent"
|
||||
sx={{
|
||||
"& .MuiFormLabel-root": {
|
||||
top: "-4px !important",
|
||||
},
|
||||
"& .MuiInputBase-input": { padding: "12.5px 14px" },
|
||||
"& .MuiInputBase-root": { borderRadius: "6px !important" },
|
||||
"& .MuiOutlinedInput-notchedOutline": {
|
||||
border: "1px solid #EFEFEF !important",
|
||||
},
|
||||
".Mui-focused": {
|
||||
"& .MuiOutlinedInput-notchedOutline": {
|
||||
border: "1px solid #5559CE !important",
|
||||
transition: "0.5s all",
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default Field;
|
||||
export default Field;
|
||||
|
||||
+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;
|
||||
|
||||
@@ -1,27 +1,32 @@
|
||||
'use client';
|
||||
import { useState } from 'react';
|
||||
import ItemUser from './ItemUser'
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
import ItemUser from "./ItemUser";
|
||||
|
||||
function Comment({ data, loading }) {
|
||||
const [list, setList] = useState(data.comments);
|
||||
const [update, setUpdate] = useState(false);
|
||||
|
||||
const [list, setList] = useState(data.comments);
|
||||
const [update, setUpdate] = useState(false);
|
||||
|
||||
return (
|
||||
<ul className={`flex flex-col comment-list !pl-2.5 justify-start max-h-[492px] overflow-auto items-start gap-12 mt-2 ${false && 'w-full'}`}>
|
||||
{data && !!data.comments.length && data.comments.map((item, idx) => (
|
||||
<ItemUser
|
||||
key={idx}
|
||||
list={list}
|
||||
data={item}
|
||||
update={update}
|
||||
setList={setList}
|
||||
loading={loading}
|
||||
setUpdate={setUpdate}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
return (
|
||||
<ul
|
||||
className={`flex flex-col comment-list !pl-2.5 justify-start max-h-[492px] overflow-auto items-start gap-12 mt-2 ${
|
||||
false && "w-full"
|
||||
}`}
|
||||
>
|
||||
{data &&
|
||||
!!data.comments.length &&
|
||||
data.comments.map((item, idx) => (
|
||||
<ItemUser
|
||||
key={idx}
|
||||
list={list}
|
||||
data={item}
|
||||
update={update}
|
||||
setList={setList}
|
||||
loading={loading}
|
||||
setUpdate={setUpdate}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
export default Comment;
|
||||
export default Comment;
|
||||
|
||||
Reference in New Issue
Block a user