list comment user in page doctor item

2024-07-08 20:32:07 +03:30
parent c57efe643a
commit cbcfa2029b
11 changed files with 1177 additions and 912 deletions
@@ -0,0 +1,28 @@
+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'
+                    }
+                }
+            }}
+        />
+    )
+}
+
+export default Field
@@ -0,0 +1,159 @@
+import Image from "next/image"
+import { Button, Skeleton } from "@mui/material"
+import LikeComment from "@/components/icons/LikeComment"
+import BoldLikeComment from "@/components/icons/BoldLikeComment"
+import BoldDisLikeComment from "@/components/icons/BoldDisLikeComment"
+import DisLikeComment from "@/components/icons/DisLikeComment"
+import ArrowUpComment from "@/components/icons/ArrowUpComment"
+import Field from "./Field"
+
+function ItemUser({ update, setUpdate, 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-4">
+                    {loading ? (
+                        <Skeleton variant="text" className="!min-w-[70px]" />
+                    ) : (
+                        <>
+                            <p className="text-[#343A40] text-[14px] md:text-[16px] font-medium">{data.name}</p>
+                        </>
+                    )}
+                </div>
+            </div>
+            <div className="mr-12 mt-2">
+                {loading ? (
+                    <>
+                        <Skeleton variant="text" className="!w-full !mt-8" />
+                        <Skeleton variant="text" className="!w-1/3" />
+                    </>
+                ) : (
+                    <p className="text-[#495057] text-[14px] font-normal 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] 
+                !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 flex-col justify-center transition-all duration-500 overflow-hidden items-start gap-12 
+          ${loading && 'w-full'}
+          ${data.is_open_reply ? 'max-h-fit mt-12' : 'max-h-0'}`}
+                >
+                    {data.replays.map((item, idx) => (
+                        <ItemUser
+                            key={idx}
+                            data={item}
+                            update={update}
+                            loading={loading}
+                            setUpdate={setUpdate}
+                        />
+                    ))}
+                </ul>
+            </div>
+        </li>
+    )
+}
+
+export default ItemUser
@@ -0,0 +1,27 @@
+'use client';
+import { useState } from 'react';
+import ItemUser from './Item'
+
+function CommentUser({ doctor }) {
+
+    const [list, setList] = useState(doctor.comments);
+    const [update, setUpdate] = useState(false);
+
+    return (
+        <ul className={`flex flex-col !pl-2.5 justify-start max-h-[492px] overflow-auto items-start gap-12 mt-2 ${false && 'w-full'}`}>
+            {doctor && !!doctor.comments.length && doctor.comments.map((item, idx) => (
+                <ItemUser
+                    key={idx}
+                    list={list}
+                    data={item}
+                    update={update}
+                    loading={false}
+                    setList={setList}
+                    setUpdate={setUpdate}
+                />
+            ))}
+        </ul>
+    )
+}
+
+export default CommentUser
@@ -1,5 +1,6 @@
 import { Button } from '@mui/material'
 import Chart from './chart'
+import CommentUser from './commentUser'

 function Comments({ doctor }) {
    return (
@@ -15,6 +16,7 @@ function Comments({ doctor }) {
                >ثبت نظر</Button>
            </div>
            <Chart doctor={doctor} />
+            <CommentUser doctor={doctor} />
        </div>
    )
 }
@@ -0,0 +1,9 @@
+function ArrowUpComment() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+            <path d="M16.6004 12.5417L11.1671 7.10833C10.5254 6.46666 9.47539 6.46666 8.83372 7.10833L3.40039 12.5417" stroke="#0FA1B3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    )
+}
+
+export default ArrowUpComment
@@ -0,0 +1,10 @@
+function BoldDisLikeComment() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+            <path d="M15.61 5.50002V15.66C15.61 16.06 15.49 16.45 15.27 16.78L12.54 20.84C12.11 21.49 11.04 21.95 10.13 21.61C9.14998 21.28 8.49999 20.18 8.70999 19.2L9.22998 15.93C9.26998 15.63 9.18999 15.36 9.01999 15.15C8.84999 14.96 8.59999 14.84 8.32999 14.84H4.21998C3.42998 14.84 2.74998 14.52 2.34999 13.96C1.96999 13.42 1.89999 12.72 2.14999 12.01L4.60999 4.52002C4.91999 3.28002 6.26999 2.27002 7.60999 2.27002H11.51C12.18 2.27002 13.12 2.50002 13.55 2.93002L14.83 3.92002C15.32 4.30002 15.61 4.88002 15.61 5.50002Z" fill="#6C757D" />
+            <path d="M18.79 17.6099H19.82C21.37 17.6099 22 17.0099 22 15.5299V5.4799C22 3.9999 21.37 3.3999 19.82 3.3999H18.79C17.24 3.3999 16.61 3.9999 16.61 5.4799V15.5399C16.61 17.0099 17.24 17.6099 18.79 17.6099Z" fill="#6C757D" />
+        </svg>
+    )
+}
+
+export default BoldDisLikeComment
@@ -0,0 +1,10 @@
+function BoldLikeComment() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+            <path d="M8.39 18.4902V8.33022C8.39 7.93022 8.51 7.54022 8.73 7.21022L11.46 3.15022C11.89 2.50022 12.96 2.04022 13.87 2.38022C14.85 2.71022 15.5 3.81022 15.29 4.79022L14.77 8.06022C14.73 8.36022 14.81 8.63022 14.98 8.84022C15.15 9.03022 15.4 9.15022 15.67 9.15022H19.78C20.57 9.15022 21.25 9.47022 21.65 10.0302C22.03 10.5702 22.1 11.2702 21.85 11.9802L19.39 19.4702C19.08 20.7102 17.73 21.7202 16.39 21.7202H12.49C11.82 21.7202 10.88 21.4902 10.45 21.0602L9.17 20.0702C8.68 19.7002 8.39 19.1102 8.39 18.4902Z" fill="#6C757D" />
+            <path d="M5.21 6.37988H4.18C2.63 6.37988 2 6.97988 2 8.45988V18.5199C2 19.9999 2.63 20.5999 4.18 20.5999H5.21C6.76 20.5999 7.39 19.9999 7.39 18.5199V8.45988C7.39 6.97988 6.76 6.37988 5.21 6.37988Z" fill="#6C757D" />
+        </svg>
+    )
+}
+
+export default BoldLikeComment
@@ -0,0 +1,10 @@
+function DisLikeComment() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+            <path d="M10.7996 22.1C10.5096 22.1 10.2196 22.05 9.94955 21.95C8.69955 21.54 7.89955 20.16 8.17955 18.88L8.66955 15.73C8.67955 15.66 8.67955 15.56 8.60955 15.48C8.55955 15.43 8.48955 15.4 8.40955 15.4H4.40955C3.42955 15.4 2.57955 14.99 2.07955 14.28C1.58955 13.59 1.48955 12.68 1.80955 11.8L4.19955 4.52002C4.56955 3.07002 6.11955 1.90002 7.71955 1.90002H11.5196C12.0796 1.90002 13.2996 2.07002 13.9496 2.72002L16.9796 5.06002L16.0596 6.25002L12.9596 3.85002C12.7096 3.60002 12.0796 3.40002 11.5196 3.40002H7.71955C6.81955 3.40002 5.84955 4.12002 5.64955 4.93002L3.22955 12.28C3.06955 12.72 3.09955 13.12 3.30955 13.41C3.52955 13.72 3.92955 13.9 4.41955 13.9H8.41955C8.93955 13.9 9.41955 14.12 9.74955 14.5C10.0896 14.89 10.2396 15.41 10.1596 15.95L9.65955 19.16C9.53955 19.72 9.91955 20.35 10.4596 20.53C10.9396 20.71 11.5796 20.45 11.7996 20.13L15.8996 14.03L17.1396 14.87L13.0396 20.97C12.5696 21.67 11.6796 22.1 10.7996 22.1Z" fill="#6C757D" />
+            <path d="M19.6191 18.1H18.6191C16.7691 18.1 15.8691 17.23 15.8691 15.45V5.65C15.8691 3.87 16.7691 3 18.6191 3H19.6191C21.4691 3 22.3691 3.87 22.3691 5.65V15.45C22.3691 17.23 21.4691 18.1 19.6191 18.1ZM18.6191 4.5C17.5291 4.5 17.3691 4.76 17.3691 5.65V15.45C17.3691 16.34 17.5291 16.6 18.6191 16.6H19.6191C20.7091 16.6 20.8691 16.34 20.8691 15.45V5.65C20.8691 4.76 20.7091 4.5 19.6191 4.5H18.6191Z" fill="#6C757D" />
+        </svg>
+    )
+}
+
+export default DisLikeComment
@@ -0,0 +1,10 @@
+function LikeComment() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
+            <path d="M17.0587 21.5685H13.2587C12.6987 21.5685 11.4787 21.4074 10.8287 20.7916L7.79867 18.5748L8.71867 17.4474L11.8187 19.7211C12.0687 19.9485 12.6987 20.1379 13.2587 20.1379H17.0587C17.9587 20.1379 18.9287 19.4558 19.1287 18.6885L21.5487 11.7253C21.7087 11.3085 21.6787 10.9295 21.4687 10.6548C21.2487 10.3611 20.8487 10.1906 20.3587 10.1906H16.3587C15.8387 10.1906 15.3587 9.98215 15.0287 9.62215C14.6887 9.25267 14.5387 8.76004 14.6187 8.24846L15.1187 5.20741C15.2387 4.67688 14.8587 4.08004 14.3187 3.90952C13.8287 3.73899 13.1987 3.9853 12.9787 4.28846L8.87867 10.0674L7.63867 9.28109L11.7387 3.50215C12.3687 2.61162 13.7487 2.18531 14.8287 2.57373C16.0787 2.96215 16.8787 4.26952 16.5987 5.48215L16.1087 8.46636C16.0987 8.53267 16.0987 8.62741 16.1687 8.7032C16.2187 8.75057 16.2887 8.77899 16.3687 8.77899H20.3687C21.3487 8.77899 22.1987 9.16741 22.6987 9.84004C23.1887 10.4937 23.2887 11.3558 22.9687 12.1895L20.5787 19.0864C20.2087 20.46 18.6687 21.5685 17.0587 21.5685Z" fill="#7E7E7E" />
+            <path d="M6.16016 20.5263H5.16016C3.31016 20.5263 2.41016 19.7021 2.41016 18.0158V8.7316C2.41016 7.04528 3.31016 6.22107 5.16016 6.22107H6.16016C8.01016 6.22107 8.91016 7.04528 8.91016 8.7316V18.0158C8.91016 19.7021 8.01016 20.5263 6.16016 20.5263ZM5.16016 7.64212C4.07016 7.64212 3.91016 7.88844 3.91016 8.7316V18.0158C3.91016 18.859 4.07016 19.1053 5.16016 19.1053H6.16016C7.25016 19.1053 7.41016 18.859 7.41016 18.0158V8.7316C7.41016 7.88844 7.25016 7.64212 6.16016 7.64212H5.16016Z" fill="#7E7E7E" />
+        </svg>
+    )
+}
+
+export default LikeComment