+actionMyPostFollowings +feedCOmponent

src/actions/index.js

@@ -326,24 +326,46 @@ export const actionFullComment = (text,postId) => async(dispatch,getState) => {
   }
 }
 
-export const actionAddSubComment = (text,commentId,answers) => 
+export const actionAddSubComment = (text,commentId) => 
       actionPromise("addSubComment", gql(`mutation AddSubComment($comment: CommentInput){
         CommentUpsert(comment:$comment){
           _id
         }
       }`,{ comment:{
           "_id":commentId,
-          "answers":[...(answers||[]),{"text":text}]
+          "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 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));
+    let answered = await dispatch(actionAddSubComment(text,commentId));
+    console.log(answered);
     if(answered){
       await dispatch(actionFindOnePost(postId));
     }
 
-}
+}
+
+
+export const actionGetAllPostMyFollowings = (skip, myFollowings) =>
+      actionPromise("myFollowingsPosts", gql(`query allposts($query: String!){
+        PostFind(query: $query){
+          _id, text, title,
+          owner{_id, nick, login, avatar
+           {url}
+          },
+          likes { _id owner {_id login avatar{url}}},
+          likesCount,
+          images{url},
+          comments{text _id owner{login _id avatar{url}} createdAt, answers{_id text owner{login _id avatar{url}}}},
+          createdAt
+      }
+    }`,{
+      query: JSON.stringify([
+        { ___owner: { $in: myFollowings } },
+        { sort: [{ _id: -1 }], skip: [skip || 0], limit: [15] },
+      ])
+    }))

src/components/Feed/FeedComponent.js

@@ -1,24 +1,97 @@
+import { connect } from "react-redux";
+import "react-responsive-carousel/lib/styles/carousel.min.css";
+import { Carousel } from "react-responsive-carousel";
+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}` : "" } alt="postImg"/>
+        </div>
+    )
+}
+
+const LikeButton = ({onLike, unLike,props,children,liked}) => {
+    return(
+        <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>
+    )
+}
+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 pl-4">
+                    <p>{comment?.owner?.nick} : <span>
+                        {comment?.text}
+                        </span></p>
+                        <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>
+                </div>
+    )
+} 
 
 
-const FeedComponent = () => {
 
+const FeedComponent = ({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">
+        <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 alt="userAvatar" className="object-cover object-center w-8 h-8 rounded-full shadow-sm bg-slate-600 border-gray-500"/>
+                    <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">User_Nick</h2>
+                        <Link to={`/user/${findPost?.owner?._id}`}className="text-sm font-semibold leading-none">{findPost.owner?.nick ? findPost.owner.nick : "anon"}</Link>
                     </div>
                 </div>
                 
               
             </div>
-                <img className="object-cover object-center w-full h-72 bg-slate-500"/>
+                <Carousel infiniteLoop showThumbs={false} showStatus={false} showArrows={true}>
+                    {findPost?.images ? findPost?.images?.map(image => <ImagesInPost image={image}/>):"No image"}
+                </Carousel>
                 <div className="p-3">
                     <div className="flex items-center justify-between">
                         <div className="flex items-center space-x-3">
-                        <button className="flex items-center justify-center">Like</button>
+                       <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>
@@ -27,15 +100,21 @@ const FeedComponent = () => {
                 </div>
                 <div className="space-y-3">
                         <p className="text-sm">
-                            <span className="text-base font-semibold">User_Nick</span>
-                            description or 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"/>   
+                            <span className="text-base font-semibold pr-2">{findPost.owner?.nick ? findPost.owner.nick : "anon"}</span>
+                            {findPost?.title} {findPost?.text}
+                        </p>   
                 </div>
-                
+                {(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 CFeedComponent = connect(state=>({myFollowings: state.promise?.myFollowingsPosts?.payload || []}))(FeedComponent)
 
 export default FeedComponent;