|
@@ -1,19 +1,20 @@
|
|
import React, { useState } from 'react'
|
|
import React, { useState } from 'react'
|
|
-import { Divider } from 'antd';
|
|
|
|
|
|
+import { Button, Divider, Dropdown, Menu } from 'antd';
|
|
import { connect } from 'react-redux'
|
|
import { connect } from 'react-redux'
|
|
import PostImage from '../components/main/postsFeed/PostImage'
|
|
import PostImage from '../components/main/postsFeed/PostImage'
|
|
import { PostDescription } from './MainPostsFeed';
|
|
import { PostDescription } from './MainPostsFeed';
|
|
import Text from 'antd/lib/typography/Text';
|
|
import Text from 'antd/lib/typography/Text';
|
|
-import { CFieldCommentSend, CFieldSubCommentSend } from '../components/main/postsFeed/FieldComment';
|
|
|
|
|
|
+import { CFieldCommentSend, CFieldSubCommentSend, CFieldUpsertCommentSend } from '../components/main/postsFeed/FieldComment';
|
|
import { CPostUserPanel } from '../components/main/postsFeed/PostUserPanel';
|
|
import { CPostUserPanel } from '../components/main/postsFeed/PostUserPanel';
|
|
import { Comment, Tooltip } from 'antd';
|
|
import { Comment, Tooltip } from 'antd';
|
|
import moment from 'moment';
|
|
import moment from 'moment';
|
|
import { Link } from 'react-router-dom';
|
|
import { Link } from 'react-router-dom';
|
|
-import { LikeFilled, LikeOutlined } from '@ant-design/icons';
|
|
|
|
|
|
+import { EditOutlined, LikeFilled, LikeOutlined, MoreOutlined } from '@ant-design/icons';
|
|
import { actionLikeComment, actionDelLikeComment, actionSubComment } from '../actions';
|
|
import { actionLikeComment, actionDelLikeComment, actionSubComment } from '../actions';
|
|
import { CPostTitle } from '../components/main/post/PostTitle';
|
|
import { CPostTitle } from '../components/main/post/PostTitle';
|
|
import { UserAvatar } from '../components/header/UserAvatar';
|
|
import { UserAvatar } from '../components/header/UserAvatar';
|
|
import { CPreloader } from './Preloader';
|
|
import { CPreloader } from './Preloader';
|
|
|
|
+import Paragraph from 'antd/lib/typography/Paragraph';
|
|
|
|
|
|
|
|
|
|
const PostPageTitle = ({ data: { owner }, postId }) =>
|
|
const PostPageTitle = ({ data: { owner }, postId }) =>
|
|
@@ -21,118 +22,111 @@ const PostPageTitle = ({ data: { owner }, postId }) =>
|
|
|
|
|
|
const CPostPageTitle = connect(state => ({ data: state?.postsFeed?.posts || {}, postId: state?.postsFeed?.posts?._id }))(PostPageTitle)
|
|
const CPostPageTitle = connect(state => ({ data: state?.postsFeed?.posts || {}, postId: state?.postsFeed?.posts?._id }))(PostPageTitle)
|
|
|
|
|
|
-
|
|
|
|
-const PostCommentAuthor = ({ owner }) => {
|
|
|
|
- return (
|
|
|
|
|
|
+const PostCommentAuthor = ({ owner }) =>
|
|
|
|
+ <>
|
|
<Link className='PostCommentAuthor' to={`/profile/${owner?._id}`} >
|
|
<Link className='PostCommentAuthor' to={`/profile/${owner?._id}`} >
|
|
{owner?.nick ? owner.nick : owner?.login ? owner.login : 'Null'}
|
|
{owner?.nick ? owner.nick : owner?.login ? owner.login : 'Null'}
|
|
</Link>
|
|
</Link>
|
|
- )
|
|
|
|
|
|
+ </>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+const EditMenu = ({ setEditComment }) =>
|
|
|
|
+ <Menu>
|
|
|
|
+ <Menu.Item key="1" onClick={() => setEditComment(true)}><EditOutlined /> Edit</Menu.Item>
|
|
|
|
+ </Menu>
|
|
|
|
+
|
|
|
|
+const PostCommentText = ({ myID, commentId, owner, text }) => {
|
|
|
|
+ const [editComment, setEditComment] = useState(false)
|
|
|
|
+ return (
|
|
|
|
+ <>
|
|
|
|
+ {owner?._id === myID && <Dropdown overlay={<EditMenu setEditComment={setEditComment} />} placement="bottomRight">
|
|
|
|
+ <span className='PostOne__comment-edit'
|
|
|
|
+ >
|
|
|
|
+ <MoreOutlined />
|
|
|
|
+ </span >
|
|
|
|
+ </Dropdown>}
|
|
|
|
+ {!editComment
|
|
|
|
+ ? <Dropdown overlay={owner?._id === myID && <EditMenu setEditComment={setEditComment} />} trigger={['contextMenu']}>
|
|
|
|
+ <Paragraph ellipsis={{ rows: 2, expandable: true, symbol: 'more' }} >
|
|
|
|
+ {text}
|
|
|
|
+ </ Paragraph>
|
|
|
|
+ </Dropdown>
|
|
|
|
+ : <CFieldUpsertCommentSend value={text} id={commentId} autoFocus={true} setOpen={setEditComment} rows={4} bordered={true} />}
|
|
|
|
+ </>)
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+const CPostCommentText = connect(state => ({ myID: state.auth.payload.sub.id || '' }))(PostCommentText)
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+const PostCommentDate = ({ createdAt }) =>
|
|
|
|
+ <Tooltip title={moment(new Date(+createdAt)).format('DD-MM-YYYY HH:mm:ss')} >
|
|
|
|
+ {moment(new Date(+createdAt)).startOf().fromNow()}
|
|
|
|
+ </ Tooltip>
|
|
|
|
|
|
|
|
|
|
|
|
+const PostCommentAction = ({ myID, commentId, likes, delLikeComment, addLikeComment }) => {
|
|
|
|
+ const [open, setOpen] = useState(false);
|
|
|
|
+ const likeId = likes.find(l => l?.owner?._id === myID)?._id
|
|
|
|
|
|
-// const PostComment = ({ myID, subComments, data: { _id, answers, createdAt, likes = [], text, owner }, addLikeComment, removeLikeComment, findSubComment }) => {
|
|
|
|
-// const [open, setOpen] = useState(false);
|
|
|
|
-
|
|
|
|
-// let likeStatus
|
|
|
|
-// let likeId
|
|
|
|
-// likes.find(l => {
|
|
|
|
-// if (l?.owner?._id === myID) {
|
|
|
|
-// likeStatus = true
|
|
|
|
-// likeId = l._id
|
|
|
|
-// } else {
|
|
|
|
-// likeStatus = false
|
|
|
|
-// }
|
|
|
|
-// })
|
|
|
|
-
|
|
|
|
-// const changeLike = () => likeStatus ? removeLikeComment(likeId, _id) : addLikeComment(_id)
|
|
|
|
-
|
|
|
|
-// const actions = [
|
|
|
|
-// <span onClick={changeLike}>
|
|
|
|
-// {likeStatus ? <LikeFilled /> : <LikeOutlined />}
|
|
|
|
-// <span style={{ paddingLeft: 8, cursor: 'auto' }}>{likes.length ? likes.length : ''}</span>
|
|
|
|
-// </span>,
|
|
|
|
-// <span onClick={() => setOpen(true)}>Reply to</span>,
|
|
|
|
-// ];
|
|
|
|
-
|
|
|
|
-// return (
|
|
|
|
-// <Comment
|
|
|
|
-// actions={actions}
|
|
|
|
-// author={<PostCommentAuthor owner={owner} />}
|
|
|
|
-// avatar={< UserAvatar avatar={owner?.avatar} avatarSize={'35px'} />}
|
|
|
|
-// content={<p>{text}</p >}
|
|
|
|
-// datetime={
|
|
|
|
-// < Tooltip title={moment(new Date(+createdAt)).format('DD-MM-YYYY HH:mm:ss')} >
|
|
|
|
-// <span>
|
|
|
|
-// {moment(new Date(+createdAt)).startOf('seconds').fromNow()}
|
|
|
|
-// </span>
|
|
|
|
-// </ Tooltip>
|
|
|
|
-// }
|
|
|
|
-// >
|
|
|
|
-// {subComments && subComments['subComments#' + _id]
|
|
|
|
-// ? subComments['subComments#' + _id].map(s => < CPostSubComment key={s._id} data={s} />)
|
|
|
|
-// : answers?.length >= 0 && <Divider plain>
|
|
|
|
-// <Text type='secodary' onClick={() => findSubComment(_id)}>View answers</Text>
|
|
|
|
-// </Divider>}
|
|
|
|
-
|
|
|
|
-// {open && <CFieldSubCommentSend id={_id} autoFocus={true} value={`@${owner?.nick || owner?.login || ''}, `} setOpen={setOpen} />}
|
|
|
|
-// </Comment>
|
|
|
|
-// )
|
|
|
|
-// }
|
|
|
|
-// const CPostComment = connect(state => ({
|
|
|
|
-// myID: state.auth.payload.sub.id || '',
|
|
|
|
-// subComments: state?.postsFeed?.subComments
|
|
|
|
-// }), {
|
|
|
|
-// addLikeComment: actionLikeComment,
|
|
|
|
-// removeLikeComment: actionDelLikeComment,
|
|
|
|
-// findSubComment: actionSubComment,
|
|
|
|
-// }
|
|
|
|
-// )(PostComment)
|
|
|
|
-
|
|
|
|
-// const CPostSubComment = connect(state => ({ comments: state?.postsFeed?.SubComments }), {
|
|
|
|
-// findSubComment: actionSubComment,
|
|
|
|
-// })(PostComment)
|
|
|
|
-
|
|
|
|
-const PostComments = ({ comments, findSubComment, parentId }) =>
|
|
|
|
- <div>
|
|
|
|
|
|
+ const changeLike = () => likeId ? delLikeComment(likeId, commentId) : addLikeComment(commentId)
|
|
|
|
+
|
|
|
|
+ return (
|
|
|
|
+ <>
|
|
|
|
+ <span onClick={changeLike}>
|
|
|
|
+ {likeId ? <LikeFilled /> : <LikeOutlined />}
|
|
|
|
+ <span style={{ paddingLeft: 8, cursor: 'auto' }}>{likes.length ? likes.length : ''}</span>
|
|
|
|
+ </span>
|
|
|
|
+ <span onClick={() => setOpen(!open)}>Reply to</span>
|
|
|
|
+ {open && <CFieldSubCommentSend autoFocus={true} id={commentId} setOpen={setOpen} />}
|
|
|
|
+ </>
|
|
|
|
+ )
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+const CPostCommentAction = connect(state => ({
|
|
|
|
+ myID: state.auth.payload.sub.id || ''
|
|
|
|
+}), {
|
|
|
|
+ addLikeComment: actionLikeComment,
|
|
|
|
+ delLikeComment: actionDelLikeComment
|
|
|
|
+})(PostCommentAction)
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+const PostComments = ({ comments, findSubComment, parentId, }) => {
|
|
|
|
+ return (<>
|
|
{comments?.length && Object.keys(comments[0]).length > 1
|
|
{comments?.length && Object.keys(comments[0]).length > 1
|
|
- ? comments.map(n => {
|
|
|
|
|
|
+ ? comments.map(c => {
|
|
return (
|
|
return (
|
|
- <div className="comment" key={n._id}>
|
|
|
|
- <h3>{n.owner?.login}</h3>
|
|
|
|
- <div>{n.text}</div>
|
|
|
|
- {n.answers && n.answers?.length
|
|
|
|
- ? <> <PostComments comments={n?.answers} parentId={n._id} findSubComment={findSubComment} />
|
|
|
|
- </>
|
|
|
|
- : null}
|
|
|
|
- </div>
|
|
|
|
|
|
+ <Comment
|
|
|
|
+ key={c._id}
|
|
|
|
+ author={<PostCommentAuthor owner={c.owner} />}
|
|
|
|
+ avatar={< UserAvatar avatar={c?.owner?.avatar} avatarSize={'35px'} />}
|
|
|
|
+ datetime={<PostCommentDate createdAt={c.createdAt} />}
|
|
|
|
+ content={<CPostCommentText text={c.text} commentId={c._id} owner={c.owner} />}
|
|
|
|
+ actions={[<CPostCommentAction likes={c.likes} commentId={c._id} />]}
|
|
|
|
+ >
|
|
|
|
+ {
|
|
|
|
+ c.answers && c.answers?.length
|
|
|
|
+ ? <>
|
|
|
|
+ <PostComments comments={c?.answers} parentId={c._id} findSubComment={findSubComment} />
|
|
|
|
+ </>
|
|
|
|
+ : null
|
|
|
|
+ }
|
|
|
|
+ </Comment>
|
|
)
|
|
)
|
|
})
|
|
})
|
|
- : <h1 onClick={() => findSubComment(parentId)} >{comments.length} мы есть</h1>}
|
|
|
|
- </div >
|
|
|
|
-// n?.answers?.length
|
|
|
|
-// <div key={n._id} onClick={() => {
|
|
|
|
-// console.log(parentId || n._id)
|
|
|
|
-// findSubComment(parentId)
|
|
|
|
-// }}
|
|
|
|
-// > vvvvvv Можно кукожитьvvvvvvv</ div >
|
|
|
|
-
|
|
|
|
-// const PostComments = ({comments}) => {
|
|
|
|
-// return (
|
|
|
|
-// <>
|
|
|
|
-// {
|
|
|
|
-// comments.map(c => <CPostComment key={c._id} data={c} cId={c._id} />)
|
|
|
|
-// }
|
|
|
|
-// </>
|
|
|
|
-// )
|
|
|
|
-// }
|
|
|
|
|
|
+ :
|
|
|
|
+ !!comments.length && <Divider plain>
|
|
|
|
+ <Text type='secodary' onClick={() => findSubComment(parentId)} >
|
|
|
|
+ View answers {comments.length}
|
|
|
|
+ </Text>
|
|
|
|
+ </Divider>
|
|
|
|
+ }
|
|
|
|
+ </>)
|
|
|
|
+}
|
|
|
|
|
|
const CPostComments = connect(state => ({
|
|
const CPostComments = connect(state => ({
|
|
- comments: state?.postsFeed?.posts?.comments || [],
|
|
|
|
|
|
+ comments: state?.postsFeed?.posts?.comments || [],
|
|
|
|
|
|
- }), { findSubComment: actionSubComment })(PostComments)
|
|
|
|
|
|
+}), { findSubComment: actionSubComment })(PostComments)
|
|
|
|
|
|
const PostPageDescrption = ({ data: { _id, likes, text, title, createdAt, } }) =>
|
|
const PostPageDescrption = ({ data: { _id, likes, text, title, createdAt, } }) =>
|
|
<div className='PostOne__description-inner'>
|
|
<div className='PostOne__description-inner'>
|
|
@@ -142,10 +136,10 @@ const PostPageDescrption = ({ data: { _id, likes, text, title, createdAt, } }) =
|
|
<CPostComments />
|
|
<CPostComments />
|
|
</div>
|
|
</div>
|
|
<div className='PostOne__description-bottom'>
|
|
<div className='PostOne__description-bottom'>
|
|
- <Divider ></Divider>
|
|
|
|
|
|
+ <Divider />
|
|
<CPostUserPanel likes={likes} postId={_id}
|
|
<CPostUserPanel likes={likes} postId={_id}
|
|
styleFontSize='1.3em' />
|
|
styleFontSize='1.3em' />
|
|
- <CFieldCommentSend postId={_id} setOpen={() => { }} />
|
|
|
|
|
|
+ <CFieldCommentSend setOpen={() => { }} /> {/* setOpen - функция заглушка для пропса компонента*/}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
@@ -158,8 +152,8 @@ const PostPage = ({ data: { images } }) =>
|
|
<CPreloader promiseName='postOne' />
|
|
<CPreloader promiseName='postOne' />
|
|
<div className='PostOne__inner'>
|
|
<div className='PostOne__inner'>
|
|
<div className='PostOne__image'>
|
|
<div className='PostOne__image'>
|
|
- <PostImage images={images} />
|
|
|
|
- </div>
|
|
|
|
|
|
+ <PostImage images={images} />
|
|
|
|
+ </div>
|
|
<div className='PostOne__title'>
|
|
<div className='PostOne__title'>
|
|
<CPostPageTitle />
|
|
<CPostPageTitle />
|
|
</div>
|
|
</div>
|