You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

131 lines
4.5 KiB

import React, { useMemo, useEffect, useState } from "react";
import { connect } from "react-redux";
import userImage from "./user.svg";
import positiveIcon from "./positive.svg";
import negativeIcon from "./negative.svg";
import Avatar from "../Avatar";
import moment from "jalali-moment";
import StarRating from "../StarRating";
export const Comments = ({ comments, indent }) => {
const [list, setList] = useState([]);
useEffect(() => {
if (indent) {
let indentComments = comments?.sort((i, j) => i.pid - j.pid);
let result = [];
indentComments?.reduce((acc, comment) => {
let cmnt = {
id: comment?.id,
title: comment?.title,
text: comment?.text,
pid: comment?.pid,
childs: [],
};
if (comment.pid) {
acc[comment.pid]?.childs?.push(cmnt);
} else {
result?.push(cmnt);
}
acc[comment?.id] = cmnt;
return acc;
}, []);
setList(result);
}
}, [comments]);
const Comment = ({ comment }) => {
return (
<div className="flex flex-col w-full">
<header className="w-full flex flex-row justify-between py-1">
<div className="flex flex-row items-end">
<Avatar source={comment?.userImage} size={60} rounded={true} />
<div className="flex flex-col">
<div className="flex items-center">
<strong className="text-base mr-2">{comment.userId}</strong>
<span className="text-tiny text-greenBA mr-3">
{comment?.userRoll || window.t("خریدار محصول")}
</span>
<div className="flex flex-row items-center mr-10 font-semibold">
<StarRating />
</div>
</div>
<div
className="flex flex-row divide-x divide-gray-300 mt-4 divided items-center"
style={{ direction: "ltr" }}
></div>
</div>
</div>
<div
className="flex flex-row divide-x divide-gray-300 divided items-center"
style={{ direction: "ltr" }}
>
<span className="px-2 text-sm text-blue-400">
{moment(comment?.createdAt).locale("fa").format("YYYY/MM/DD")}
</span>
<span className="px-2 text-sm text-blue-400">
{moment(comment?.createdAt).locale("fa").format("HH:mm:ss")}
</span>
</div>
</header>
<div className="flex flex-row">
<div style={{ width: 60 }} className="min-h-full"></div>
<div className="flex flex-1 flex-col px-3">
<header className="w-full flex flex-row justify-between items-center">
<div>&nbsp;</div>
<div className="flex flex-row items-center">
{comment?.status === true && (
<>
<img src={positiveIcon} alt="" className="w-6 ml-2" />
<span className="text-sm">
{window.t("برای خرید توصیه میکنم")}
</span>
</>
)}
{comment?.status === false && (
<>
<img src={negativeIcon} alt="" className="w-6 ml-2" />
<span className="text-sm text-black">
{window.t("بازگشت بی چون و برای خرید توصیه نمیکنم")}
</span>
</>
)}
</div>
</header>
<p className="text-gray-500 h-auto leading-7 mt-2">
{comment?.text}
</p>
<div className="self-end mt-4">
{/* <Button title='اطلاعات بیشتر' backgroundColor='bg-gray-200' width={}/> */}
</div>
</div>
</div>
{indent && (
<div className="flex pr-12">
{comment?.childs?.map((object, index) => (
<Comment comment={object} key={index} />
))}
</div>
)}
</div>
);
};
return (
<div className="w-full flex flex-col divide-y divide-solid divide-gray-200">
{(indent ? list : comments)?.map((comment, index) => (
<Comment comment={comment} key={index} />
))}
</div>
);
};
const mapStateToProps = (state) => ({
comments: state.book.info?.comment,
});
const mapDispatchToProps = {};
export default connect(mapStateToProps, mapDispatchToProps)(Comments);