+comments +spoilerComment +answersToComment

src/actions/index.js

@@ -304,4 +304,46 @@ export const actionAddFullLike = (postId) => async(dispatch,getState) => {
       if(liked){
         await dispatch(actionFindOnePost(postId));
       }
+}
+
+export const actionAddComment = (text,postId) => 
+    actionPromise("addComment", gql(`mutation AddComment($comment: CommentInput){
+      CommentUpsert(comment:$comment){
+        _id 
+      }
+    }`,{
+      comment:{
+          "text":text,
+          "post":{"_id":postId}
+      }
+    }))
+
+
+export const actionFullComment = (text,postId) => async(dispatch,getState) => {
+  let commented = await dispatch(actionAddComment(text,postId));
+  if(commented){
+    await dispatch(actionFindOnePost(postId));
+  }
+}
+
+export const actionAddSubComment = (text,commentId,answers) => 
+      actionPromise("addSubComment", gql(`mutation AddSubComment($comment: CommentInput){
+        CommentUpsert(comment:$comment){
+          _id
+        }
+      }`,{ comment:{
+          "_id":commentId,
+          "answers":[...(answers||[]),{"text":text}]
+      }
+      }))
+
+export const actionfullAddSubComment = (text,commentId) => async(dispatch,getState)=> {
+    const oldAnswers = (getState().promise?.findPost?.comments?.answers || []).map(item => ({_id:item._id}));
+    console.log(oldAnswers);
+    const postId = (getState().promise?.findPost?.payload?._id || '') 
+    let answered = await dispatch(actionAddSubComment(text,commentId,oldAnswers));
+    if(answered){
+      await dispatch(actionFindOnePost(postId));
+    }
+
 }

src/components/Post/PostItem.js

@@ -1,14 +1,14 @@
 import { connect } from "react-redux";
 import "react-responsive-carousel/lib/styles/carousel.min.css";
 import { Carousel } from "react-responsive-carousel";
-import { actionAddFullLike, actionfullDeleteLike, backendURL } from "../../actions";
-import {IoHeartOutline, IoHeartSharp} from "react-icons/io5"
+import { actionAddFullLike, actionAddSubComment, actionFullComment, actionfullDeleteLike, backendURL } from "../../actions";
+import {IoHeartOutline, IoHeartSharp,IoSend} from "react-icons/io5"
 import { Link } from "react-router-dom";
-
+import { useState } from "react";
 const ImagesInPost = ({image}) => {
     return (
         <div>
-        <img className="object-cover object-center w-full h-96 bg-slate-500" src={image.url ?`${backendURL}/${image?.url}` : ""}/>
+        <img className="object-cover object-center w-full h-96 bg-slate-500" src={image.url ?`${backendURL}/${image?.url}` : "" } alt="postImg"/>
         </div>
     )
 }
@@ -18,21 +18,53 @@ const LikeButton = ({onLike, unLike,props,children,liked}) => {
         <button className="flex items-center justify-center " onClick={()=>{liked.length !==0 ? unLike(liked[0]._id): onLike(props)}}>{liked.length !==0 ?(<IoHeartSharp className="text-fuchsia-700"/>):(<IoHeartOutline className="text-fuchsia-700"/>)}{children}</button>
     )
 }
-{/* <button className="flex items-center justify-center"><IoHeartOutline />{findPost?.likes?.length ? findPost?.likes?.length : "0"}</button> */}
+const AnswersTo =({answer = {}}) => {
+    console.log(answer);
+    return(
+        <div className=" flex pl-4">
+                                {answer === null ? (<span>no comment</span>):(<><p>{answer?.owner?.nick}:</p><span>{answer?.text}</span></>)}
+                            </div>
+    )
+}
+
+const CommentButton = ({_id, onComment, onSubComment,text, type}) => {
+    console.log(text);
+    console.log(_id);
+    console.log(type);
+    if(type === "comment"){
+    return(<>
+        <button className="w-1/6 pl-3 items-center" onClick={()=>onComment(text,_id)}><IoSend/></button>
+    </>)} else {
+        return (
+            <>
+            <button className="w-1/6 pl-3 items-center" onClick={()=>onSubComment(text,_id)}><IoSend/></button>
+            </>
+        )
+    }
+}
 
 const Comments =({comment = {}}) => {
+    const [open,setOpen] = useState(false);
+    const [show,setShow] = useState(false);
+    const [commentText, setCommentText] = useState("");
     console.log(comment);
     return(
         <div className="space-y-3">
-                <div className="mb-0.5">
+                <div className="mb-0.5 pl-4">
                     <p>{comment?.owner?.nick} : <span>
                         {comment?.text}
                         </span></p>
-                        <button className="ml-1 text-sm text-gray-400">answer to</button>
+                        <button className="ml-1 text-sm text-gray-400" onClick={()=>setOpen(!open)}>answer to</button>
+                        <button className="ml-1 text-sm text-gray-400 pl-3" onClick={()=>setShow(!show)}>show answers to</button>
+                        {show && (comment.answers || []).map(answer => <AnswersTo answer={answer}/>)}
+                        {open && <div>
+                                <input type="text" placeholder="Add answer to" className="w-5/6 py-0.5 bg-transparent border-none rounded text-sm pl-0 text-gray-400 focus:text-black" onChange={(event)=> setCommentText(event.target.value)}/>
+                                <CCommentButton _id={comment._id} text={commentText} type={"subcomment"} />
+                            </div>
+                            }
+                        
                 </div>
-                <input type="text" placeholder="Add a comment" className="w-full py-0.5 bg-transparent border-none rounded text-sm pl-0 text-gray-400"/>
                 </div>
-
     )
 } 
 
@@ -40,6 +72,7 @@ const Comments =({comment = {}}) => {
 
 const PostItem = ({findPost={},myId}) =>{
     const liked = (findPost?.likes || []).filter(like => like.owner._id === myId);
+    const [commentText, setCommentText] = useState("");
     return(
         <div className="rounded-md  shadow-md p-3 sm:w-96 lg:w-3/6">
             <div className="flex items-center justify-between p-3">
@@ -71,12 +104,15 @@ const PostItem = ({findPost={},myId}) =>{
                             {findPost?.title} {findPost?.text}
                         </p>   
                 </div>
-                {(findPost?.comments || []).map(comment => <Comments comment={comment}/>)}
-                
+                {(findPost?.comments || []).map(comment => <Comments  comment={comment}/>)}
+                <input type="text" placeholder="Add a comment" className="w-5/6 py-0.5 bg-transparent border-none rounded text-sm pl-0 text-gray-400 focus:text-black" onChange={(event)=> setCommentText(event.target.value)}/>
+                <CCommentButton _id={findPost._id} text={commentText} type={"comment"}/>
         </div>
     )
 }
 
+const CCommentButton = connect(null,{onComment: actionFullComment, onSubComment: actionAddSubComment})(CommentButton)
+
 const CLikeButton = connect(null,{onLike: actionAddFullLike, unLike: actionfullDeleteLike})(LikeButton)
 
 const CPostItem = connect(state=>({findPost: state.promise?.findPost?.payload || {}, myId: state.auth?.payload?.sub?.id}))(PostItem)