|
@@ -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(
|
|
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 justify-between p-3">
|
|
<div className="flex items-center space-x-2">
|
|
<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">
|
|
<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>
|
|
</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="p-3">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center space-x-3">
|
|
<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">Comment</button>
|
|
<button className="flex items-center justify-center">Direct</button>
|
|
<button className="flex items-center justify-center">Direct</button>
|
|
</div>
|
|
</div>
|
|
@@ -27,15 +100,21 @@ const FeedComponent = () => {
|
|
</div>
|
|
</div>
|
|
<div className="space-y-3">
|
|
<div className="space-y-3">
|
|
<p className="text-sm">
|
|
<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>
|
|
</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>
|
|
</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;
|
|
export default FeedComponent;
|