+like and unLike +draw comments with out add

src/actions/index.js

@@ -203,7 +203,7 @@ export const actionFindOnePost = _id =>
                   _id, title,text, images {
                    url, _id
                   }, comments{
-                  _id text likesCount likes{
+                  _id text owner{_id nick} likesCount likes{
                     owner{
                       nick avatar{url}
                     }
@@ -212,7 +212,7 @@ export const actionFindOnePost = _id =>
                       nick avatar{url}
                     }
                   }
-                }, likes {_id}, likesCount,
+                }, likes {_id owner{_id,nick}}, likesCount,
                 owner {
                   _id, nick avatar{url}
                 }
@@ -284,7 +284,7 @@ export const actionFullUnSubscribe = (userId, followId) => async(dispatch,getSta
 export const actionDeleteLike = (_id) =>
         actionPromise('unLike', gql(`mutation Deletelike($like:LikeInput){
           LikeDelete(like:$like){
-            _id
+            _id post{_id owner{_id}}
           }
         }`,{
             like:{
@@ -292,4 +292,16 @@ export const actionDeleteLike = (_id) =>
             }
         }))
 
-/* export const actionfullDeleteLike = (_id) => */        
+export const actionfullDeleteLike = (likeId) => async(dispatch,getState) => {
+    let unLike = await dispatch(actionDeleteLike(likeId));
+    if(unLike){
+      await dispatch(actionFindOnePost(unLike?.post?._id));
+    }
+}        
+
+export const actionAddFullLike = (postId) => async(dispatch,getState) => {
+      let liked = await dispatch(actionAddlike(postId));
+      if(liked){
+        await dispatch(actionFindOnePost(postId));
+      }
+}

src/components/Post/PostItem.js

@@ -1,8 +1,9 @@
 import { connect } from "react-redux";
 import "react-responsive-carousel/lib/styles/carousel.min.css";
 import { Carousel } from "react-responsive-carousel";
-import { actionAddlike, backendURL } from "../../actions";
+import { actionAddFullLike, actionfullDeleteLike, backendURL } from "../../actions";
 import {IoHeartOutline, IoHeartSharp} from "react-icons/io5"
+import { Link } from "react-router-dom";
 
 const ImagesInPost = ({image}) => {
     return (
@@ -12,23 +13,40 @@ const ImagesInPost = ({image}) => {
     )
 }
 
-const LikeButton = ({onLike, props,children}) => {
-    console.log(props);
-    console.log(children);
+const LikeButton = ({onLike, unLike,props,children,liked}) => {
     return(
-        <button className="flex items-center justify-center" onClick={()=>onLike(props)}><IoHeartOutline />{children}</button>
+        <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 PostItem = ({findPost}) =>{
+const Comments =({comment = {}}) => {
+    console.log(comment);
+    return(
+        <div className="space-y-3">
+                <div className="mb-0.5">
+                    <p>{comment?.owner?.nick} : <span>
+                        {comment?.text}
+                        </span></p>
+                        <button className="ml-1 text-sm text-gray-400">answer to</button>
+                </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>
+
+    )
+} 
+
+
+
+const PostItem = ({findPost={},myId}) =>{
+    const liked = (findPost?.likes || []).filter(like => like.owner._id === myId);
     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">
                 <div className="flex items-center space-x-2">
                     <img  src={findPost.owner?.avatar?.url ? `${backendURL}/${findPost.owner?.avatar?.url}`:""} alt="userAvatar" className="object-cover object-center w-14 h-14 rounded-full shadow-sm bg-slate-600 "/>
                     <div className="-space-y-1">
-                        <h2 className="text-sm font-semibold leading-none">{findPost.owner?.nick ? findPost.owner.nick : "anon"}</h2>
+                        <Link to={`/user/${findPost?.owner?._id}`}className="text-sm font-semibold leading-none">{findPost.owner?.nick ? findPost.owner.nick : "anon"}</Link>
                     </div>
                 </div>
                 
@@ -40,7 +58,7 @@ const PostItem = ({findPost}) =>{
                 <div className="p-3">
                     <div className="flex items-center justify-between">
                         <div className="flex items-center space-x-3">
-                       <CLikeButton props={findPost?._id} children={findPost?.likes?.length ? findPost?.likes?.length : "0"}/>
+                       <CLikeButton props={findPost?._id} liked={liked} children={findPost?.likes?.length ? findPost?.likes?.length : "0"}/>
                         <button className="flex items-center justify-center">Comment</button>
                         <button className="flex items-center justify-center">Direct</button>
                         </div>
@@ -51,17 +69,17 @@ const PostItem = ({findPost}) =>{
                         <p className="text-sm">
                             <span className="text-base font-semibold pr-2">{findPost.owner?.nick ? findPost.owner.nick : "anon"}</span>
                             {findPost?.title} {findPost?.text}
-                        </p>
-                     <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"/>   
+                        </p>   
                 </div>
+                {(findPost?.comments || []).map(comment => <Comments comment={comment}/>)}
                 
         </div>
     )
 }
 
-const CLikeButton = connect(null,{onLike: actionAddlike})(LikeButton)
+const CLikeButton = connect(null,{onLike: actionAddFullLike, unLike: actionfullDeleteLike})(LikeButton)
 
-const CPostItem = connect(state=>({findPost: state.promise?.findPost?.payload || {}}))(PostItem)
+const CPostItem = connect(state=>({findPost: state.promise?.findPost?.payload || {}, myId: state.auth?.payload?.sub?.id}))(PostItem)
 
 
 export default CPostItem;