reza added indent comment

src/components/Comments/index.js

@@ -1,33 +1,68 @@
-import React from "react";
+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 Avatar from "../Avatar";
 import moment from "jalali-moment";
 import StarRating from "../StarRating";
 
 export const Comments = ({ comments }) => {
-  // connectToParent(comments);
+  const [list, setList] = useState([]);
+
+  useEffect(() => {
+    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} />
+            <Avatar source={comment?.userImage} size={60} rounded={true} />
             <div className="flex flex-col">
-              <strong className="text-lg mr-2">{comment.username}</strong>
-              <div
+              <strong className="text-lg mr-2">{comment.id}</strong>
+              {/* {comment.pid && (
+                <strong className="text-lg mr-2">
+                  {"در پاسخ به" +
+                    " " +
+                    comments.filter(
+                      (commentt) => commentt.id === comment.pid
+                    )[0].id}
+                </strong>
+              )} */}
+              {/* <div
                 className="flex flex-row divide-x divide-gray-300 mt-4 divided items-center"
                 style={{ direction: "ltr" }}
               >
                 <span className="px-2 text-xs text-gray-500">
-                  {comment.product?.color}
+                  {comment?.product?.color}
                 </span>
                 <span className="px-2 text-xs text-gray-500">
-                  {comment.product?.name}
+                  {comment?.product?.name}
                 </span>
-              </div>
+              </div> */}
             </div>
           </div>
           <div
@@ -35,10 +70,10 @@ export const Comments = ({ comments }) => {
             style={{ direction: "ltr" }}
           >
             <span className="px-2 text-sm text-blue-400">
-              {moment(comment.data).locale("fa").format("YYYY/MM/DD")}
+              {moment(comment?.createdAt).locale("fa").format("YYYY/MM/DD")}
             </span>
             <span className="px-2 text-sm text-blue-400">
-              {comment.date.getHours()}&nbsp;:&nbsp;{comment.date.getMinutes()}
+              {moment(comment?.createdAt).locale("fa").format("HH:mm:ss")}
             </span>
           </div>
         </header>
@@ -46,9 +81,11 @@ export const Comments = ({ comments }) => {
           <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 className="flex flex-row items-center"><StarRating /></div>
-              <div className="flex flex-row items-center">
-                {comment.status === true && (
+              {/* <div className="flex flex-row items-center">
+                <StarRating />
+              </div> */}
+              {/* <div className="flex flex-row items-center">
+                {comment?.status === true && (
                   <>
                     <img src={positiveIcon} alt="" className="w-6 ml-2" />
                     <span className="text-sm text-black">
@@ -56,7 +93,7 @@ export const Comments = ({ comments }) => {
                     </span>
                   </>
                 )}
-                {comment.status === false && (
+                {comment?.status === false && (
                   <>
                     <img src={negativeIcon} alt="" className="w-6 ml-2" />
                     <span className="text-sm text-black">
@@ -64,48 +101,38 @@ export const Comments = ({ comments }) => {
                     </span>
                   </>
                 )}
-              </div>
+              </div> */}
             </header>
-            <p className="text-gray-500 h-auto leading-7 mt-2">{comment.text}</p>
+            <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>
+        <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">
-      {comments.map((comment, index) => (
+      {list?.map((comment, index) => (
         <Comment comment={comment} key={index} />
       ))}
     </div>
   );
 };
 
-const mapStateToProps = (state) => ({});
+const mapStateToProps = (state) => ({
+  comments: state.book.info?.comment,
+});
 
 const mapDispatchToProps = {};
 
 export default connect(mapStateToProps, mapDispatchToProps)(Comments);
-
-Comments.defaultProps = {
-  comments: [
-    {
-      id: 0,
-      pid: null,
-      username: "آرش سامانی",
-      date: new Date(),
-      text: "خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ” ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ ﻫﺮﮔﺰ ﺩﺯﺩﯼ ﻧﮑﻦ ” ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻭ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ﻣﻌﻨﺎ ﮐﻪ ﺍﻭ ﻫﺮﮔﺰ ﺩﺳﺖ ﮐﺞ ﻧﺪﺍﺷﺘﻪ ﭘﺪﺭ ﺑﻪ ﻧﮕﺎﻩ ﻣﺘﻌﺠﺐ ﻓﺮﺯﻧﺪ ﻟﺒﺨﻨﺪﯼ ﺯﺩ ﻭ ﺍﺩﺍﻣﻪ ",
-      userImage: userImage,
-      rate: 4,
-      product: {
-        name: "مک بوک پرو 16 گیگ",
-        color: "خاکستری",
-      },
-      status: true,
-    },
-    
-  ],
-};

src/components/ProductStatusCard/index.js

@@ -30,7 +30,7 @@ const ProductStatusCard = ({
   shippingTime,
 }) => {
   return (
-    <section className="w-full">
+    <section className="w-full" style={{minWidth: 350 }}>
       <div className="bg-grayF9 rounded-md px-4 py-2 divide-y divide-solid divide-gray-200">
         <div className="flex flex-row items-center justify-between py-3">
           <div className="flex flex-row items-center">
@@ -45,7 +45,7 @@ const ProductStatusCard = ({
           <div className="flex flex-row items-center justify-between py-3">
             <div className="flex flex-row items-center">
               <img src={shop} alt="" className="w-8" />
-              <div className="flex flex-col mr-3 text-sm">
+              <div className="flex flex-1 flex-col mr-3 text-sm">
                 {"فروشنده" + " " + seller}
               </div>
             </div>

src/views/Product/Desktop/index.js

@@ -22,7 +22,7 @@ const DesktopProductLayout = () =>{
             </div>
             <div className="w-4/5">
             <Comments />
-            <QandA />
+            {/* <QandA /> */}
             </div>
             
         </div>